Home » Articles » Template introduction » Template modifiers

Template modifiers

So what are these "modifiers" I've been hearing so much about? Well, in order to aid you in displaying data in templates in a uniform manner, PAX comes with a bunch of functions, that can be used for just that. One example is to capitalise names, or perhaps you want to set a value to a default, if it is null, or maybe you just want to truncate values at a certain length. Whatever the case may be, it is easy, with PAX modifiers. Modifiers are defined in pax.template.modifier.js, and for the sake of convenience, are scoped locally to the template, which means you can access the functions as _blah, instead of pax.template.modifier._blah
Here is an example: HTML:

<div id="example2_output"></div>
Javascript:
pax.load.onloaded( function() {
    //  Setup a template
    var myTemplate = "[:= _def(greeting, 'Hello') :] [:= _caps(name, true) :]!";
   
    //  Create some data for our template
    var data = { greeting: null, name: "wOrLd" };
   
    //  Render the template and data
    pax.template.render( myTemplate, { value: data, target: pax.$("example2_output") } );
} );
We have modified our hello world example, to now include a greeting, and use two modifiers to display the output in a consistent manner
Result:
As you can see, even though our greeting is null, the _def method ensures we greet our friend appropriately. The _caps method makes sure the name is displayed nicely; by passing in 'true' as the 2nd parameters, the _caps method will make the rest of the characters lowercase.
Note: you can read more about the modifiers included with PAX, on the pax.template.modifier.js API documentation page.
Well, that was easy! Read on for a template example!