ajax - jQuery data binding library or plugin recommendation -

ajax - jQuery data binding library or plugin recommendation -

stopping short of total blown frameworks such angular, knockout etc, recommend jquery plugin simple info binding?

it's needed shopping cart 1 page app needs update elements on page after ajax completion. needs iterate through fields , update user interface.

yes, know write myself, don't want reinvent wheel if there out there.

my research has lead me jquery.bindings - it's not popular ( 1 contributor )

suggestions?

look rivets.js.

rivets lightweight (3.4kb minified , gzipped) , powerful info binding , templating library.

rivets.js agnostic model / controller layer , works existing libraries employ event-driven model such backbone.js , stapes.js. ships built-in adapter subscribing plain js objects using es5 natives, can replaced watch.js adapter or object.observe adapter.

some of features out-of-the-box rivets.js:

bi-directional info binding , dom nodes. computed properties through dependency mapping. formatters allow mutating values through piping. iteration binding binding items in array. custom event handlers fit ideal workflow. uniform apis extending of core concepts.

rivets uses dom-based templating system:

instead of parsing , compiling template strings html, rivets.js wires models straight existing parts of dom contain binding declarations , command flow instructions straight on dom nodes. pass in models when binding parent dom node , rivets.js takes care of rest.

in short, illustration assume want display info in product object like:

var productinfo= { name: "test", price: 1000 }

in next html:

<ul id="product"> <li>name</li> <li>price</li> </ul>

your can bind info using rivets like:

rivets.bind($('#product'), { product: productinfo // product alias name within html template });

and corresponding rivets template 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 template element, model data, options wish override main rivets object (optional)

or if binding array of product objects:

rivets.bind($('#product'), { product: productarray // productarray array of products });

you can utilize 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 create n number of lists according items in array.

there many more cool features can find in guide.

jquery ajax plugins data-binding jquery-plugins