pax.template

This PAX library can parse and render a PAX template

Author

Mikkel Bergmann, http://www.pointful.com

Note

In IE we sometimes get: “Unkown runtime error...”, when we try to write html that is partially rendered, such as a table part or a as list item without enclosing list start tags.  The reason is that you can not write a partial table using innerHTML with IE.  This is acknowledged by microsoft: http://support.microsoft.com/kb/239832 The solution is to use proper DOM methods or write a full (valid) table, ie: ensure you have properly formed HTML...

Summary
pax.templateThis PAX library can parse and render a PAX template
Properties
sTag
eTag
vTag[:= Value tag.
bTag
aTag
pTag
peTag
Functions
pax.template.renderRenders the template with given value into the target container.
pax.template.parsePrivate method: Parses a template, and returns a dict with a HTML string, and a list with JS code to evaluate afterwards.

Properties

sTag

[: Start tagexecutes inline JS code.

eTag

] End tag.

vTag

[:= Value tag.

bTag

[:_ Before tagruns code before template rendering.  Eg: for setting up an OBJ to be accessed during rendering.

aTag

[:.  After tagruns code after template rendering.  Eg: for unobtrusive JS.

pTag

[:p Partial tagsignifies a part of a template that can be rendered partially.

peTag

p:] Partial end tagEnd of partial template rendering.

Functions

pax.template.render

pax.template.render = function(template,
args)

Renders the template with given value into the target container.

Parameters

templateString with the contents of the template
valueObject with values as required
targetA DOM element to render the template into

Example

<div id='pax.template.render.example1'></div>
[:.
    var value = {
        greeting: 'Hello',
        name: 'World'
    };
    var template = "[" + ":= greeting :" + "] [" + ":= name :" + "]!";
    pax.template.render( template, {
        value: value,
        target: pax.$('pax.template.render.example1')
    } );
:]

This will display “Hello World!” in the DIV.  Note that the formatting is a bit funny, as we’re using the PAX template system for this documentation as well.

Example

<div id='pax.template.render.example2'></div>

<button id='partial1'>Partial update 1</button>
<button id='partial2'>Partial update 2</button>

[:. var myTemplate = "" +
        "[" + ":= greeting :" + "] [" + ":= name :" + "]!<br>" +
        "[" + ":p(template_stub)" +
        " Time stamp 1 is: [" + ":= time :" + "]" +
        "p:" + "]" +
        "<br>" +
        "[" + ":p(template_stub2)" +
        " Time stamp 2 is: [" + ":= time :" + "]" +
        "p:" + "] The end of the template." +
    "";

    var myVars = {
        greeting: 'Hello',
        name: 'World',
        time: new Date().getTime()
    };

    pax.template.render( myTemplate, {
        value: myVars,
        target: pax.$('pax.template.render.example2')
    } );

    pax.event.bindOne( pax.$('partial1'), 'click', function() {
        myVars.time = new Date().getTime();
        pax.template.render( myTemplate, { value: myVars, partial: 'template_stub' } );
    } );

    pax.event.bindOne( pax.$('partial2'), 'click', function() {
        myVars.time = new Date().getTime();
        pax.template.render( myTemplate, { value: myVars, partial: 'template_stub2' } );
    } );
:]

This will display a sentence, and two buttons that can initiate a partial render of the template.  Note that you MUST have a DOM element to render the template into, in order to use partial rendering.

pax.template.parse

pax.template.parse = function(template,
value,
partial)

Private method: Parses a template, and returns a dict with a HTML string, and a list with JS code to evaluate afterwards.  You should only need to use <pax.render>, unless you’re writing your own rendering method.

Parameters

templateString with the contents of the template
_Object with values as required

Returns

{ html: string, [js1, js2, ..., jsX] }

Note that this method has internal methods that you can use in a template

include( id )A method to get the value of the textarea with given id, and use it as a template
load( url, target )A method to get a template from a url, and render it after the parent template has been rendered

Example

<div id='pax.template.parse.example1'></div>
[:.
    var myVars = {
        greeting: 'Hello',
        name: 'World'
    };
    var result = pax.template.parse( "[" + ":= greeting :" + "] [" + ":= name :" + "]!", myVars );
    pax.$('pax.template.parse.example1').innerHTML = pax.util.toString( result );
:]

This will set result as {“html”:”Hello World!”,”js”:[]}, and then display that in the DIV.

Example

<div id='pax.template.parse.example2'></div>
[:.
    var myVars = {
        greeting: 'Hello',
        name: 'World'
    };
    var result = pax.template.parse( "[" + ":= greeting :" + "] [" + ":= name :" + "]! <span id='pax.template.parse.example2.update'></span>", myVars );
    pax.$('pax.template.parse.example2').innerHTML = pax.util.toString( result.html );
:]

This will set result as {“html”:”Hello World!”,”js”:[]}, and then display that in the DIV.

pax.template.render = function(template,
args)
Renders the template with given value into the target container.
pax.template.parse = function(template,
value,
partial)
Private method: Parses a template, and returns a dict with a HTML string, and a list with JS code to evaluate afterwards.
Close