jBind is jQuery plugin for binding any complex data to templates in an easy way. By using $(template).bind(data) you can bind your data to the template.

This Plugin is Updated, please check here.

Download jBind (jQuery Bind Template)

This is jBind 1.0.0 beta
You can get it here.

Or download the latest version here.

jBind

This Plugin is Updated, please check here.

1. Format
2. Options
3. How to map data to template?
4. Examples

Format

$(template).bind(data,[options]);

• in jBind version 1.5.0 the bind has changed to bindTo.
• template is a string of the template you want the data to be bound to it.
• data is complex data type such as {id:1, name:'Scott', family:'Adams', birthdate: 'June 8 1957'}, or can be array of objects or even nested object such as [{item:value,item:value,item:[{item:value,item:value},{item:value,item:value},..],item:{item:value,...}},....]

Options

• root [string]
  

[default = 'data']
The root node (in template). jBind use it to start traversing the template.

• appendTo [string]

[default = null]
If you do not set this option the bind method will return the content.Otherwise it will append the content to the element(s) and return the jQuery object created content.

• onBind [function]

• onBound [function]

You can define a function to be called at the end of bind action. It accepts content, data as inputs.

How to map data to template?

• Template is a string of html tags or can be inner html of an element which is returned by $(selector).html()
• Data must be options or array of options.
  
  1. {name:'John',age:25,education:'IT'}
     Each key will be replaced in template by a placeholder
     for example name will be replaced with {name}
  2. [{name:'John',age:25,education:'IT'},{name:'John',age:25,education:'IT'},....]
     When you use array it means a repetitive action so you must use
     In case it is an array inside an option such as below, you must replace the name with options key
     {name:'John',roles:[{role:'author',type:2},{role:'owner',type:3}]}
     So it would be , each repeater must have an end tag which is the same as
  3. Finally you must place your tags inside
• When jBind find .... ,it will understand that all the elements {name} inside these tags must be replaced with a parameter of provided data, or it will check to find if it is an array?So it will use the content of .... as template for each item inside the array and repeat it.
• Lets create the template of previous example:
  {name:'John',roles:[{role:'author',type:2},{role:'owner',type:3}]}
  As you see roles is array of roles so the template for it must be like this:
  

  2. {role}, {type}

   

  %3C%21--roles--%3E%0A%20%20%20%20%7Brole%7D%2C%20%7Btype%7D%0A%3C%21--roles--%3E
  
  Also roles and name are in options object so we have some thing like this.
  

  1. {name}
  3. {role}, {type}

   

  %7Bname%7D%0A%3C%21--roles--%3E%0A%20%20%20%20%7Brole%7D%2C%20%7Btype%7D%0A%3C%21--roles--%3E
  
  Because of jBind rule number 2 we must place the template in tag
  

  2. {name}
  4. {role}, {type}

   

  %3C%21--data--%3E%0A%20%20%20%20%7Bname%7D%0A%20%20%20%20%3C%21--roles--%3E%0A%20%20%20%20%20%20%20%20%7Brole%7D%2C%20%7Btype%7D%0A%20%20%20%20%3C%21--roles--%3E%0A%3C%21--data--%3E
  This Template also accept this:
  [{name:'John',roles:[{role:'author',type:2},{role:'owner',type:3}]},
  {name:'Jack',roles:[{role:'author',type:2},{role:'reader',type:4}]},
  ...]

Examples (Bind Data to Template)

1. Bind a hash to a template
   

   1. var data = {id:1,
   2. name:'Scott',
   3. family:'Adams',
   4. birthdate: 'June 8 1957'
   5. };
   6. $(template).bind(data,{'root':'info',appendTo:'.placeholder'});

    

   var%20data%20%3D%20%7Bid%3A1%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20name%3A%27Scott%27%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20family%3A%27Adams%27%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20birthdate%3A%20%27June%208%201957%27%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%3B%0A%24%28template%29.bind%28data%2C%7B%27root%27%3A%27info%27%2CappendTo%3A%27.placeholder%27%7D%29%3B%0A
   
   and the template is:
   

   1. class="content">
   3. class="viewBlock" id='{id}'>
   4. {name} {family}, [ Birthdate: {birthdate} ]

*In these example don't forget to add jQuery ready function to each code. so your code must be like this

You can download all the jBind examples as zip file here.

*Currently it is beta version please send your feedbacks to This e-mail address is being protected from spambots. You need JavaScript enabled to view it so I could upgrade it with new features.

Tags: jBind | jQuery | Plugin