Binding to object members, enumerable objects or primitive value arrays

To access any member of an object or complex object simply specify the name using dot notation. This also applies if you want to access specific elements of an array or members of an object. In the case of arrays, the index of the element must be specified in the path.

HTML declaration

    <input type="text" jqxb-datasource="mydata" jqxb-datamember="Name" /><br />
    <input type="text" jqxb-datasource="mydata" jqxb-datamember="Surname" /><br />
    <input type="text" jqxb-datasource="mydata" jqxb-datamember="Address.Street" /><br />
    <input type="text" jqxb-datasource="mydata" jqxb-datamember="Address.ZipCode" /><br />
    <input type="text" jqxb-datasource="mydata" jqxb-datamember="Address.Phones.0.prefix" /><br />
    <input type="text" jqxb-datasource="mydata" jqxb-datamember="Address.Phones.0.number" /><br />
    <!-- Binding to a objects array -->
    <input type="text" jqxb-datasource="mydata" jqxb-datamember="Address.Phones.1.prefix" /><br />
    <input type="text" jqxb-datasource="mydata" jqxb-datamember="Address.Phones.1.number" /><br />
    <!-- Binding to a primitive values array -->
    <input type="text" jqxb-datasource="mydata" jqxb-datamember="MonthlyAmount.7" /><br />
    <!-- Inspect data value -->
    <input type="button" value="display value" onclick="alert(Customer.Address.Phones[0].number);" />

jQXB datasource initialization

<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}] },
                     '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');
    });

</script>

Last edited Aug 18, 2013 at 12:46 AM by lightcode, version 8

Comments

No comments yet.