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');
jQuery two way bindings(双向数据绑定插件)的更多相关文章
- 双向数据绑定---AngularJS的基本原理学习
Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJS非 ...
- jQuery.my – 实时的复杂的双向数据绑定
jQuery.my 这个插件用于实时双向数据绑定.它发生变异给出的数据源对象,反映了用户与用户界面之间的相互作用.jQuery.my 提供了全面的验证,条件格式,复杂的依赖关系,运行形式结构操作. 马 ...
- 双向数据绑定(angular,vue)
最近github上插件项目更新了关于双向数据绑定的实现方式,关于angular和vue. angular众所周知是使用的脏检查($dirty).一开始大家会认为angular开启了类似setInter ...
- angularJs:双向数据绑定
示例1 <!DOCTYPE html> <html ng-app> <head> <meta charset="UTF-8" /> ...
- 利刃 MVVMLight 3:双向数据绑定
上篇我们已经了解了MVVM的框架结构和运行原理.这里我们来看一下伟大的双向数据绑定. 说到双向绑定,大家比较熟悉的应该就是AngularJS了,几乎所有的AngularJS 系列教程的开篇 ...
- JavaScript实现简单的双向数据绑定
什么是双向数据绑定 双向数据绑定简单来说就是UI视图(View)与数据(Model)相互绑定在一起,当数据改变之后相应的UI视图也同步改变.反之,当UI视图改变之后相应的数据也同步改变. 双向数据绑定 ...
- Angularjs1.X进阶笔记(1)—两种不同的双向数据绑定
一. html与Controller中的双向数据绑定 html-Controller的双向数据绑定,在开发中非常常见,也是Angularjs1.x的宣传点之一,使用中并没有太多问题. 1.1数据从ht ...
- Vue双向数据绑定原理分析(转)
add by zhj: 目前组里使用的是前端技术是jQuery + Bootstrap,后端使用的Django,Flask等,模板是在后端渲染的.前后端没有分离,这种做法有几个缺点 1. 模板一般是由 ...
- 第217天:深入理解Angular双向数据绑定的原理
一.理解angular双向数据绑定 双向绑定是新的前端框架中频繁出现的一个新词汇,也是mvvm的核心原理.angularjs五条核心信念中的数据驱动,便是由双向绑定进行完成. 那么什么是双向绑定,下面 ...
随机推荐
- js多回调函数
多回调问题 前端编程时,大多通过接口交换数据,接口调用都是异步的,处理数据都是在回调函数里. 假如需要为一个用户建立档案,需要准备以下数据,然后调用建档接口 name // 用户名字 使用接口 ...
- NOIP2018凉凉记
首先声明一下,我去不了TG,因为我太菜了GD的某教授把我打到PJ了…… 虽然就我这实力普及都不一定1= 不管了,这次是普及,就当扎实基础了.反正HF的 $\text{hhz}$ 也考PJ,见个面多好啊 ...
- Zabbix历史数据清理
特别提醒: a.文中测试的Zabbix版本为 3.0.3 . b.清理数据属于高危操作,请在测试环境中验证后再执行线上操作!!! 1.统计数据库中每个表所占的空间: mysql> SELECT ...
- 如何设置 ssh secure shell 支持中文
只需要设置下/etc/sysconfig/i18n 文件内容如清单 1 所示. 清单 1. 文件内容 1 2 3 LANG="zh_CN.GB18030" SUPPORTED=&q ...
- Java Number & Math 类
// java.lang.Math 常用 // xxxValue() 方法用于将 Number 对象转换为 xxx 数据类型的值并返回. System.out.println(((Integer) 5 ...
- java == 与 equals
1.基本数据类型用"==" java的基本数据类型,也称为原始的数据类型.它们分别是: byte, short, char, int, long, float, double, b ...
- QTREE6&&7 - Query on a tree VI &&VII
树上连通块 不用具体距离,只询问连通块大小或者最大权值 可以类比Qtree5的方法,但是记录东西很多,例如子树有无0/1颜色等 一个trick,两个LCT分离颜色 每个颜色在边上. 仅保留连通块顶部不 ...
- P1966 火柴排队
这道题需要小小的思考一波 (然而我思考了两节课) 好,我们先得出一个结论:a中第k大的与b中第k大的一定要排在一起,才能保证最小. 然后发现:挪a,b其实没有区别,故我们固定a,挪b. 然后我们就思考 ...
- Python之黏包
黏包现象 让我们基于tcp先制作一个远程执行命令的程序(命令ls -l ; lllllll ; pwd) res=subprocess.Popen(cmd.decode('utf-8'), shell ...
- 如何用思维导图快速理解PMBOK-PMP第六版教材
PMP的教材很多人拿到PMBOK的时候都觉得头疼,这书本这么厚,我什么时候能看完啊,确实是,没有体系,没有框架的看书是很难的,看的很多知识点都无法联系起来.所以利用思维导图来学习PMP就很有效果,下面 ...