jQuery two way bindings（双向数据绑定插件）

jQuery two way bindings

https://github.com/petersirka/jquery.bindings

这是一个简单的jQuery双向绑定库。 此插件将HTML元素和模型连接起来。 对web开发是一个小型的威力巨大的加农炮。

Simple jQuery two way bindings. This plugin joins HTML elements with a model and in reverse. This plugin is a little big cannon for the web development.

• CLICK HERE - jComponent
• easy to use
• minified only 11 kB (without GZIP compression)
• great functionality
• great use
• works with jQuery 1.9+
• works in IE 7+
• DEMO EXAMPLE

 

具体例子见：

http://source.858project.com/jquery-bindings-demo.html

工作方式：

根据data-model属性，连接HTML元素和js对象。

data-model的值是js对象的属性名。

在常规控件 INPUTS 类 SELECTS类 和 Textareas 控件使用双向绑定生效； 这些控件值被修改， 则模型（js对象的值被更新）。

How does it works?

• plugin connects a JavaScript object with HTML elements according to data-model attribute
• data-model must contain object property name
• in INPUTS, SELECTS and TEXTAREAS plugin uses two way bindings
• model is updated when is changed value in a INPUT/SELECT/TEXTAREA or manually

 

DEMO CODE

HTML attributes:

<div id="container" data-name="my-model-1">
	<div><input type="text" data-model="property" /></div>
	<div data-model="property"></div>
	<div data-model="property.next.property"></div>
	<div data-model="created" data-format="your-custom-format"></div>
	<div data-model="tags" data-custom="your-custom-identificator"></div>
	<div data-model="html" data-encode="false"></div>
</div>

• data-name="{String}" is a container name
• data-encode="{Boolean}" enable HTML encoding/decoding string (default: true)
• data-format="{String}" calls $.bindings.format() delegate
• data-custom="{String}" calls $.bindings.custom() delegate

$.bindings('create')(model, [template]);

Create bindings.

$('#form').bindings('create')({ firstname: 'Peter', lastname: 'Širka' });

// or (XHR)

$('#form').bindings('create')({ firstname: 'Peter', lastname: 'Širka' }, '/my-form.html');

// or (HTML)

$('#form').bindings('create')({ firstname: 'Peter', lastname: 'Širka' }, '<input type="text" data-model="firstname" /><span>your firstname: <b data-model="first-name"></b></span>');

// or (SELECTOR)

$('#form').bindings('create')({ firstname: 'Peter', lastname: 'Širka' }, '#template-selector');