Templates

jQXB provides a simple way to bind html elements to enumerable items using template.

A jQXB template is a block of HTML elements repeated for every element's occurrence  present in a list declared as datasource.

A template is composed by:

  • A template container, that is, a zone inside which will be repeated template instances for any element's occurrency present in the associated datasource.
  • A template item, that is, the definition of the html block to repeat.
  • one or more binded items contained inside the item.

Any html element able to contain other elements can be used as a template containerThis can be done using decorators jqxb-templatecontainer to assign a name to the template container and jqxb-datasource to specify which datasource to bind with. 

Decorators jqxb-template and jqxb-templateitemidprfx are used to define the real html block to use for render data. jqbx-template must be used to specify to which template container the template belongs to and it's value must be the same as specified in jqxb-templatecontainer. With jqxb-templateitemidprfx you must specify the prefix that jQXB have to use to build the unique row identifier for each template item instance. 

It also contains elements decorated with jqxb-itemdatamember to specify the object member associate and having the same meaning of jqxb-datamember already seen for simple binding.

HTML declarations

    <input type="text" jqxb-datasource="mydata" jqxb-datamember="Name" />
    <input type="text" jqxb-datasource="mydata" jqxb-datamember="Surname" />
    <table>
        <thead>
            <tr>
                <th>Prefix</th>
                <th>Number</th>
            </tr>
        </thead>
        <tbody jqxb-templatecontainer="addressTemplate" jqxb-datasource="mydataDetails">
            <tr jqxb-template="addressTemplate" jqxb-templateitemidprfx="addressrow" style="display: none;">
                <td><input type="text"  jqxb-itemdatamember="prefix" /></td>
                <td><input type="text"  jqxb-itemdatamember="number" /></td>
            </tr>
        </tbody>
    </table>

jQXB code

 

    <script type="text/javascript">
        var Customer = { 'Name': 'Anthony',
            'Surname': 'Murray',
            'Address': { 'Street': 'Carnaby Street',
                'ZipCode': 'YTSCH',
                'Phones': [{
                    'prefix': 010,
                    'number': 23094895 },
                          { 'prefix': 0185,
                            'number': 2930940},
                          {
                            'prefix': 03485,
                            'number': 3234567
                            }]
                    },
            'MonthlyAmount': [13498, 23456, 12345, 12345, 38728, 0, 34231, 39748.95, 34534, 2134, 567, 666, 345]
        };

        // Common jQuery entry point
        jQuery(document).ready(function () {
            // Initialize the System
            jQXB.initialize();
            jQXB.setDataSource('mydata', Customer).doBind('mydata');
            // Creat a new DataSource for template ( data are shared between the two datasource )
            jQXB.setDataSource('mydataDetails', Customer.Address.Phones).doBind('mydataDetails');

        });

    </script>

Last edited Jul 15, 2011 at 5:54 PM by lightcode, version 6

Comments

No comments yet.