Modifing datasource and/or video representation

During the life cycle of a web page, the data are clearly subject to modifications, additions, and deletions.
Transactions at the level of user interface must be reflected in the underlying datasources to keep synchronized
the status of the data with a video.
This aspect is particularly delicate for the datasource bound to templates.
But in data modification of a record synchronization is maintained independently from jQXB, deletion or insertion of new elements
depends on the action taken by the user. The programmer can ask jQXB to eliminate or add records in
datasource with two speficic methods  for deletion and insertion in the datasource object associated with the physical template or
can ask jQXB to remove an item at any video or all elements of a template of a container to be able to regenerate through a new call of doBind(datasourceName)

the four methods referenced are:

jQXB.addObjectToDataSource (datasourceName, Object)This method adds an object to the datasource

jQXB.deleteObjectFromDataSource (datasourceName, occurrency), this method removes a specific item from the datasource

jQXB.clearTemplateInstances(templatename) removes all the istance of the template (video only)

jQXB.deleteTemplateRow (templateName, Occurrency) removes the nth instance of the template (video only)

HTML declaration

Including a jQXB.addObjectToDataSource direct function assigned to a button.

    <table>
        <thead>
            <tr>
                <th>Prefix</th>
                <th>Number</th>
            </tr>
        </thead>
        <tbody jqxb-templatecontainer="addressTemplate" jqxb-datasource="phoneNumbers">
            <tr jqxb-template="addressTemplate" jqxb-templateitemidprfx="row" style="display: none;">
                <td><input type="text"  jqxb-itemdatamember="prefix" /></td>
                <td><input type="text"  jqxb-itemdatamember="number" /></td>
                <td><input type="text"  class="rowsummary" /></td>
                <td><a href="#" class="onSelect">Click To See Data</a></td>
                <td><a href="#" class="onDelete">Delete Row</a></td>
             </tr>
        </tbody>
    </table>
    <input type="button" onclick="jQXB.addObjectToDataSource('phoneNumbers',new newPhoneNumber());displayDump();" value="AddRow"/>
   

jQXB code

 

 

    // Common jQuery entry point
    jQuery(document).ready(function () {
        // Initialize the System
        jQXB.initialize();
        displayDump();
        // Attach template Event Handling, it should be declared before binding 
        jQXB.addOnTemplateItemBoundhnd(function (dataSorceName, templateName, occurrency, dataItem, jQrytemplateItem) {
            switch (templateName) {
                case "addressTemplate": // filter only event databound from a specifica template
                    var jQryElem = jQrytemplateItem.find('.rowsummary');
                    var jQryBtnDisplay = jQrytemplateItem.find('.onSelect');
                    var jQryBtnDelete = jQrytemplateItem.find('.onDelete');
                    jQryElem.val(' the row  ' + occurrency + ' has been created in template \'' + templateName + '\', values : ' + dataItem.prefix + ' and ' + dataItem.number);
                    // prevent events fires twice in case of re-binding
                    jQryBtnDisplay.unbind();
                    jQryBtnDisplay.bind('click', function () {
                        alert('Row ' + occurrency + ' selected , calling ' + dataItem.prefix + '-' + dataItem.number);
                    });
                    jQryBtnDelete.unbind();
                    jQryBtnDelete.bind('click', function () {
                        jQXB.deleteObjectFromDataSource(dataSorceName, occurrency);
                        displayDump();
                    });
                    break;
            }
        });

Last edited Jul 27, 2011 at 10:43 PM by lightcode, version 6

Comments

No comments yet.