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

In version 1.5.3 actions are enabled which means you can also treat special item in your data differently by extending $.fn.bindTo of this templating engine with your own functionality and apply it during binding.

Download jBind (jQuery Bind Template)

Current version is 1.5.8
You can get it here.

jBind

1. Formats
2. Options
3. How to map data to template?
4. How to implement function inside template?
5. Examples & Downloads

Formats

$(template).bindTo(data,[options]);
$(selector).bindTo(data,[options]);

• template is a string of the template you want the data to be bound to it.
• selector [version 1.5.3] is used when you set fill option to true, you must use css selector. download the examples and check the fill.html for more information or check jBind options.
• 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.

• fill [boolean] _{added in jBind 1.5.3}
  

[default = false]
When you want to fill a template once and show it set this property to true. For more information on this option check here.

• 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}]},
  ...]

You can see more examples below or can download the samples at the bottom of page and customize them.

How to implement function inside template?

With jBind you can add define action inside the template:

1. Add a html comment tag withthis format which you can change the functionName to whatever you want.
2. extend the $.fn.bindTo with the same functionName you have chosen.

For example your template is:

And Your code would be like this:

This code will only affects on items bounded in ... . You can download the sample codes which I provides at the end of this page.

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).bindTo(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.bindTo%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.

*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