Binding to generic html attributes

With jQXB you can associate attributes of html elements. In this example more html elements are associated with the same member object. This allows both editing that use of the resulting value to apply special behaviors to  HTML elements.

The target attribute to bind must be specified via jqxb-bindedattribute decorator attribute. You can use any attribute name for binding. "html" and "text" are special attribute target used by jQXB to set innerHTML and innerTEXT. Any other attibute will set his own value ( "width","height","valign","style" etc.)

 HTML declaration

 

    Main DIV Syle:<input type="text" jqxb-datasource="attributesdata" jqxb-datamember="divstyle" /><br />
    Table width
    <input type="text" jqxb-datasource="attributesdata" jqxb-datamember="tablewidth" /><br />
    Header div title<input type="text" jqxb-datasource="attributesdata" jqxb-datamember="tabletitle" /><br />
    Body span text<input type="text" jqxb-datasource="attributesdata" jqxb-datamember="tablebody" /><br />
    <div jqxb-datasource="attributesdata" jqxb-datamember="divstyle" jqxb-bindedattribute="style">
        <table border="1" jqxb-datasource="attributesdata" jqxb-datamember="tablewidth" jqxb-bindedattribute="width">
            <thead>
                <tr>
                    <td>
                        <div jqxb-datasource="attributesdata" jqxb-datamember="tabletitle" jqxb-bindedattribute="html">
                        </div>
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <span jqxb-datasource="attributesdata" jqxb-datamember="tablebody" jqxb-bindedattribute="text">
                        </span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <input type="button" value="Reapply Values" onclick="refresh();" />

 

jQXB 

  <script type="text/javascript">
        var attributesObject = {
            'divstyle': 'background: white;',
            'tablewidth': '200px',
            'tabletitle': '<strong>Table Title</strong>',
            'tablebody': 'body'
        };

        function refresh() {
            jQXB.refreshControls('attributesdata');
        }

        jQuery(document).ready(function () {
            jQXB.initialize();
            jQXB.setDataSource("attributesdata", attributesObject).doBind("attributesdata");
        });
 
    </script>

Last edited Jun 23, 2011 at 1:22 PM by lightcode, version 11

Comments

JackMadeja May 31, 2012 at 7:31 PM 
Very nice solution! But I am still strugling to get some elements to bind. In this example I can’t see that divstyle item is working.
I tried to add some of my own divstyle in this manner:
var attributesObject = {
'divstyle': 'background: black;',
'tablewidth': '200px',
'tabletitle': '<strong>Table Title</strong>',
'tablebody': 'body',
'divstyle2': 'background-image: url("mypic.jpg"); width: 460px; height:460px;'
};

And change jqxb-datamember="divstyle2"

But this is not working. Any sugestions?
/Jack