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>
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") } );
} );
// 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") } );
} );
Result:
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!




