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

Posted 2020-10-08 LightSong@计海拾贝

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‘);

 

以上是关于jQuery two way bindings（双向数据绑定插件）的主要内容，如果未能解决你的问题，请参考以下文章

[Angular 2] Using ng-model for two-way binding

R语言使用aov函数进行双因素方差分析（Two-way factorial ANOVA）在双因素方差分析中，受试者被分配到由两个因素交叉分类形成的组（Two-way factorial ANOVA）

[Vue +TS] Use Two-Way Binding in Vue Using @Model Decorator with TypeScript

[WPF源码分析]ContentControl依赖项属性的双向绑定，two-way binding view's DependencyProperty and ViewModel's

R语言使用aov函数进行双因素方差分析（Two-way factorial ANOVA）使用interaction.plot函数在双因素方差分析中可视化交互作用（Interaction）

R语言使用aov函数进行双因素方差分析（Two-way factorial ANOVA）gplots包的plotmeans函数在双因素方差分析中显示交互作用包括均值，误差条95%置信区间样本量