Example 1

Binding text to an element. The id of the element is matched to the value in the object.

var data = { title: 'Lorem ipsum', text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.' };
$(document).binddata(data);

Example 2

Binding data to a form. An array populates the drop down. The ids in the form are matched to the object.
Note: data and list would probably be retrieved via an ajax call.

var list = { gender: [[0, 'Female'], [1, 'Male']] };
var data = { name: 'John Doe', age: 35, gender: 1 };

$('#form1').binddata(list); //Bind the select
$('#form1').binddata(data); //Bind the data

Example 3

Binding data with a mapping object. The map translates between the object keys and the form ids.
Note: data would normally be retrieved via an ajax call.

var map = { name: '#txtName', age: '#txtAge', gender: '#drpGender', genders: '#drpGender' };
var data = { name: 'Jane Doe', age: 27, genders: [[0, 'Female'], [1, 'Male']], gender: 0 };

$('#form1').binddata(data, map); //Bind with a map

Example 4

Binding data with a function. Each value in the object is passed to the function with the candidate selector.

var map = { gender: '#drpGender', genders: '#drpGender' };
var data = { name: 'Billy Bob', age: 55, genders: [[0, 'Female'], [1, 'Male']], gender: 1 };

//Bind with a map and a function
$('#form1').binddata(data, map, function(args) {

    //Set selector
    if (args.selector == '#name') { args.selector = '#txtName'; };
    if (args.selector == '#age') { args.selector = '#txtAge'; };

    return true;
});

Example 5

Bind array data to a table or tbody. Existing data is cleared. Column position is mapped to array position.

var array = [['23 april 2009', 'Dreams from my Father', 24.99], ['1 May 2009', 'The Fame', 7.99]];
var map = [0, 2, 1];
	        
$('#purchases').binddata(array, map);

Example 6

Bind array of objects to a table with a map and function to right align the amount column.

var purchases = [{ date: '23 april 2009', title: 'Dreams from my Father', amount: 24.99 }, 
    { date: '1 May 2009', title: 'The Fame', amount: 7.99}];
var map = ['date', 'amount', 'title'];

$('#purchases').binddata(purchases, map, function(args) {

    //Align totals to the right
    if (args.key == 'amount') args.selector = '<td class="numeric">';
    return true;
});

Example 7

Unbinds form inputs into a new json object.

var map = { gender: '#drpGender' };
var data = {};

$('#form1').unbinddata(data, map); //Unbind with a map