Object $p and its methods

When you load the pure.js in your page, a global variable called $p is available with the methods below.
PURE detects if you are using a JS framework in the same page(dojo, domassistant, jquery, mootools, prototype, sizzle or sly) and adds automatically the methods below to your familiar environment. i.e: $(...).render(...). Have a look at how to use PURE with your JS Framework

render

$p( html ).render( data, directives|function )

Input:

  • html: is the template source. It can be:
    • a CSS selector (String) pointing to a DOM node in the page
    • or directly a DOM node reference
  • data: is the JSON data we want to render
  • directive: This is the commands we want PURE to perform. See more info about directive here
  • function: To reuse a template, you can compile it. The function parameter here must be a JS function returned by $p.compile

Output:

the input DOM node html is replaced with the result of the transformation.

See some examples or render: simple , iteration , using JS functions

 

compile

Use this method if you want to re-use various times the same template.

compile converts an HTML node to a JS function using a directive.
Or as with autoRender, with data and map automatically CLASS attributes.

$p( html ).compile( directives [, data] )

Input:

  • html: is the template source. It can be:
    • a CSS selector (String) pointing to a DOM node in the page
    • or directly a DOM node reference
  • directive: a directive are additional commands, when the class attributes are not enough. i.e.: function directives
  • data [optional]: is the JSON data we want to render.

    The compilation will use the same logic as $p.autoRender, mapping JSON data and HTML class attributes. The directives can be set to false in that case:

    var rfn = $p('a').compile(false, data);

Output:

function: This method compiles the HTML template to returns a JS function.
This returned function can be executed on the JSON data we want to render.

var rfn = $p( 'div' ).compile( dir );
result.innerHTML = rfn( data );

To reuse a template, the function can be passed to $p.render:

var rfn = $p('a').compile(dir, data);
$p('a').render(data, rfn);

See an example that use compile

 

autoRender

autoRender automatically maps the JSON data with the CLASS attributes in the HTML.

$p( html ).autoRender( data [, directives] )

Input:

  • html: is the template source. It can be:
    • a CSS selector (String) pointing to a DOM node in the page
    • or directly a DOM node reference
  • data: is the data we want to render
  • directive [optional]: a directive are additional commands, when the class attributes are not enough. i.e.: function directives

Output:

the input DOM node html is replaced with the result of the transformation.

See some examples: node value , iteration , attribute