Look into rivets.js.
rivets is a Lightweight (3.4kb minified and gzipped) and powerful data binding and templating library.
Rivets.js is completely agnostic about your model / controller layer and works well with existing libraries that employ an event-driven model such as Backbone.js and Stapes.js. It ships with a built-in adapter for subscribing to plain JS objects using ES5 natives, however this can be replaced with a Watch.JS adapter or an Object.observe adapter.
Some of the features you get out-of-the-box with Rivets.js:
- Bi-directional data binding to and from DOM nodes.
- Computed properties through dependency mapping.
- Formatters to allow mutating values through piping.
- Iteration binding for binding items in an array.
- Custom event handlers to fit your ideal workflow.
- Uniform APIs for easily extending any of the core concepts.
Rivets uses DOM-based templating system:
Instead of parsing and compiling template strings into HTML, Rivets.js wires up your models directly to existing parts of DOM that contain binding declarations and control flow instructions directly on the DOM nodes. You just pass in your models when binding to the parent DOM node and Rivets.js takes care of the rest.
In short, for example assume you want to display the data in a product object like:
var productInfo= {
name: "test",
price: 1000
}
in following HTML:
<ul id="product">
<li>Name</li>
<li>Price</li>
</ul>
Your can bind the data using rivets like:
rivets.bind($('#product'), {
product: productInfo // product will be the alias name inside HTML template
});
And the corresponding rivets template will be:
<ul id="product">
<li rv-text="product.name"></li>
<li v-text="product.price"></li>
</ul>
or more semantically:
<ul id="product">
<li data-rv-text="product.name"></li>
<li data-rv-text="product.price"></li>
</ul>
The rivets.bind method accepts the template element, the model data, as well as any options you wish to override from the main rivets object (optional)
Or if you are binding an array of product objects:
rivets.bind($('#product'), {
product: ProductArray // where productArray is an array of products
});
You can use iteration bindings using rv-each like:
<ul class="products" data-rv-each-product="products">
<li data-rv-text="product.name"></li>
<li data-rv-text="product.price"></li>
</ul>
rivets will create n number of lists according to the items in array.
There are many more cool features which you can find in the guide.
