jQBinder: jQuery plug-in

This is my attempt to create client-side template engine, jQBinder, as a jQuery plug-in, inspired by "Enforcing Strict Model-View Separation in Template Engines" (Terence Parr).

It allows developers to embed view-template within HTML, and data-bind it to a JSON data asynchronously downloaded from the server.

The syntax is very simple. You just need to put something like this in HTML (HTML snippet between outer <div> is the template):

<div id="#target">
<img src='$(.profile_image_url)' />
<div>$(.text)</div>
</div>

Then, simply call
$("#stage").dataBindTo( { urlToJSONP, options } );

It will load a json data from the specified URL (which must be an array), then generate HTML snippet for each row of data using the template above - replacing all $(.propertyName) with the specified property of each row data.

I have tested it on Safari 4.0, Chrome 4.0, Firefox 3.5, Opera 9.0 and IE 7/8 so far.

0 Comment

Leave a comment
Be the first to comment on this widget!

Leave a comment

Your comment: (No HTML accepting)