PAX templates

This page contains examples of how to use the PAX template library. The main intended purpose of the library is developing UI widgets, and as such, it has a rather unique feature: partial rendering. In normal template solutions, this would be appropriate, but in the case of browser based rendering, this feature is most valuable, when developing an efficient UI widget.
The features demonstrated here are:

Example 1: a simple template with some data
Example 2: a table of financial data
Example 3: an asyncronously, partially rendered template

Example 1: a simple template with some data

This example displays a small form, with some data. This is one of the most simple examples of using a PAX template.

Form goes here

Example 2: a table of financial data

This example displays a table of customers with outstanding amounts. The amounts that are greater than a threshold value are highlighted, so they are easy to spot in the example.
Note: We use the CSS from this CSS file to display the table as it is.

Employee table goes here

demo_template_example2.htm

This example displays a table of customers with outstanding amounts. The amounts that are greater than a threshold value are highlighted, so they are easy to spot in the example.<br/>

Note:  We use the CSS from <a href="examples/demo_template_table.css">this CSS file</a> to display the table as it is.

<div id="example2_output">Employee table goes here</div>

demo_template_example2.js

pax.load.onloaded( function() {

    //  Setup a template for our table

    var myTemplate = "\

        <table style='border: 1px solid #ccc'>\

            <tr>\

                <th> Name </th> <th> Address </th> <th> Phone </th> <th> Outstanding </th>\

            </tr>\

            [: for( var i = 0; i < cust.length; i++ ) { :]\

                <tr class='r[:= i % 2 :][:= ( cust[i].owe > 1000 )? 'hi': '' :]'>\

                    <td>[:= _caps( cust[i].name ) :]</td>\

                    <td>[:= cust[i].add :]</td>\

                    <td>[:= cust[i].ph :]</td>\

                    <td align='right'>$[:= cust[i].owe :]</td>\

                </tr>\

            [: } :]\

            <tr>\

                <td style='background: #ccc;' colspan='3'>[:= cust.length :] customers with a total owing of: </td>\

                <td align='right' style='background: #ccc;'>\

                [:  var total = 0;\

                    for( var i = 0; i < cust.length; i++ )total += cust[i].owe;\

                :]\

                <b>$[:= _round( total, 2 ) :]</b>\

                </td>\

            </tr>\

        </table>\

    ";

    var cust = [

        { name: "James Brownson",  add: "123 Some st. Sydney NSW 2000",           ph: "02 9555 1672", owe:  100.25 },

        { name: "Timothy Mend",    add: "27 Flack road, Toowong QLD 4066",        ph: "07 4255 5729", owe:  245.95 },

        { name: "Alexis Smith",    add: "176 York street, Toowong QLD 4066",      ph: "07 4355 5827", owe:  132.76 },

        { name: "ben Mullson",     add: "12 / 68 Newark Rd, Sydney NSW 2000",     ph: "02 9555 2198", owe: 1981.19 },

        { name: "Donald Rumduck",  add: "1600 Nottingham pde, Sydney NSW 2000",   ph: "02 9555 1782", owe: 2095.11 },

        { name: "maxine Smick",    add: "392 Flinders st. Melbourne VIC 3000",    ph: "03 9555 2091", owe: 1012.78 },

        { name: "matthew Spade",   add: "Suite 204, 78 Pitt st. Sydney NSW 2000", ph: "02 9255 5690", owe: 2128.98 },

        { name: "Simon Partridge", add: "29 Liverpool st. Sydney NSW 2000",       ph: "02 9555 2256", owe:   12.84 },

        { name: "Nick Hogan",      add: "17/11 Lilyfield Road, Hornsby NSW 2187", ph: "02 9555 1298", owe:  412.84 }

    ];

    pax.template.render( myTemplate, {

        value: { cust: cust }, 

        target: $("example2_output")

    } );

} );

Example 3: an asyncronously, partially rendered template

This example displays a small form, with some data, and the partially renders a component of it, when you click the 'Display notes field' button.

Form goes here

demo_template_example3.htm

This example displays a small form, with some data, and the partially renders a component of it, when you click the 'Display notes field' button.<br/><br/>

<div id="example3_output">Form goes here</div>

demo_template_example3.js

pax.load.onloaded( function() {

    //  Setup a template for our form, notice the 'partial_stub'

    var myTemplate = "\

        <button id='example3_the_button'>Display notes field</button>\

        <br/>\

        <fieldset style='width:530px;'><legend>Customer details</legend>\

            <label for='name'>Name</label>\

                <input name='name' type='text' size='30' style='width:300px' value='[:= name :]'><br>\

            <label for='address'>Address</label>\

                <input name='address' type='text' size='80' style='width:300px' value='[:= add :]'><br>\

            <label for='phone'>Phone</label>\

                <input name='phone' type='text' size='10' style='width:300px' value='[:= ph :]'><br>\

            <label for='owing'>Owing</label>\

                <input name='owing' type='text' size='10' style='width:300px' value='[:= owe :]'><br>\

        [:p(partial_stub) \

            [: if( typeof(notes) != 'undefined' ) { :]\

            <label for='notes'>Notes</label><br/>\

                <textarea name='notes' style='width:300px' rows='6'>[:= notes :]</textarea>\

            [: }:]\

        p:] \

        </fieldset>\

    ";

    //  Create some data

    var cust = { name: "Nick Hogan", add: "17/11 Lilyfield Rd, Hornsby NSW 2187", ph: "02 9555 1298", owe:  412.84  };

    //  Render the template and data

    pax.template.render( myTemplate, { value: cust, target: $("example3_output") } );

    //  Bind function to the button

    pax.event.bind( $('example3_the_button'), 'click', function() {

        //  Retreive the notes via ajax, and render the partial part of the template

        pax.get( '../examples/demo_template_example3_notes.txt', function( xml, txt, url ) {

            cust['notes'] = txt;

            pax.template.render( myTemplate, { value: cust, partial: 'partial_stub' } );

        } );

    } );

} );