jQuery Data Binding - Demo

A jQuery plugin to generate dynamic HTML contents from an array of JavaScript objects.

Demo 1

Demo 2

ID Name
{id} {name}

Demo 3

Sample Code

HTML

                    
<select id="my-select" data-binding-enabled="true">
    <option data-binding-template="true" value="{id}">{name}</option>
</select>
<button id="my-button">Update</button>
                    
                

JavaScript

                    
// data to be bound
var _array = [
    { id: 0, name: "jQuery", link: "http://en.wikipedia.org/wiki/JQuery" },
    { id: 1, name: "UTF-8", link: "http://en.wikipedia.org/wiki/UTF-8" },
    { id: 2, name: "Google Analytics", link: "http://en.wikipedia.org/wiki/Google_Analytics" },
    { id: 3, name: "WordPress", link: "http://en.wikipedia.org/wiki/Wordpress" }
];

$(document).ready(function () {
    $("#my-button").click(function () {
        // trigger "bind" event to bind data
        $("#my-select").trigger("bind", [_array]);
    });

    // "bound" event is fired when data-binding is finished
    $("#my-select").on("bound", function (evt) {
        $(this).children("option:nth-child(2)").attr("selected", "selected");
    });
});