Quick Start

Step 1 - Create a HTML page and include library dependecies

<head>
    <title>jQXB simple binding</title>
    <script type="text/javascript" src="jquery-1.4.4.js"></script>
    <script type="text/javascript" src="jQXB.<lastver>.min.js"></script>
</head>

 

Step 2 - Specify binding directives

use the principal custom attributes jqxb-datasource and jqxb-datamember to declare which datasource will be connected with HTML elements and specify the desired object members to bind.

    <input type="text" jqxb-datasource="mydata" jqxb-datamember="Name" />
    <input type="text" jqxb-datasource="mydata" jqxb-datamember="Surname" />
    <input type="text" jqxb-datasource="mydata" jqxb-datamember="Address.Street" />
    <input type="text" jqxb-datasource="mydata" jqxb-datamember="Address.ZipCode" />
    <input type="button" onclick="alert(Customer.Address.Street);" />

Step 3 - Initialize objects and start binding

Prepare data for binding. Two commands only are needed to associate items with a data source and to render the contents: setDataSource and doBind

<script type="text/javascript">
    var Customer = { 'Name': 'Anthony', 'Surname': 'Murray', 'Address': { 'Street': 'Carnaby Street', 'ZipCode': 'YTSCH'} };
    // Common jQuery entry point
    jQuery(document).ready(function () {
        // Initialize the System
        jQXB.initialize();
        jQXB.compatibilitymode = false; // Default false for use with jQuery versions prior to 1.6, otherwise set to true
        jQXB.setDataSource('mydata',Customer).doBind('mydata');
    });
</script>

Last edited Sep 22, 2011 at 9:08 PM by lightcode, version 9

Comments

No comments yet.