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.

具体例子见:

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(双向数据绑定插件)的更多相关文章

  1. 双向数据绑定---AngularJS的基本原理学习

    Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJS非 ...

  2. jQuery.my – 实时的复杂的双向数据绑定

    jQuery.my 这个插件用于实时双向数据绑定.它发生变异给出的数据源对象,反映了用户与用户界面之间的相互作用.jQuery.my 提供了全面的验证,条件格式,复杂的依赖关系,运行形式结构操作. 马 ...

  3. 双向数据绑定(angular,vue)

    最近github上插件项目更新了关于双向数据绑定的实现方式,关于angular和vue. angular众所周知是使用的脏检查($dirty).一开始大家会认为angular开启了类似setInter ...

  4. angularJs:双向数据绑定

    示例1 <!DOCTYPE html> <html ng-app> <head> <meta charset="UTF-8" /> ...

  5. 利刃 MVVMLight 3:双向数据绑定

          上篇我们已经了解了MVVM的框架结构和运行原理.这里我们来看一下伟大的双向数据绑定. 说到双向绑定,大家比较熟悉的应该就是AngularJS了,几乎所有的AngularJS 系列教程的开篇 ...

  6. JavaScript实现简单的双向数据绑定

    什么是双向数据绑定 双向数据绑定简单来说就是UI视图(View)与数据(Model)相互绑定在一起,当数据改变之后相应的UI视图也同步改变.反之,当UI视图改变之后相应的数据也同步改变. 双向数据绑定 ...

  7. Angularjs1.X进阶笔记(1)—两种不同的双向数据绑定

    一. html与Controller中的双向数据绑定 html-Controller的双向数据绑定,在开发中非常常见,也是Angularjs1.x的宣传点之一,使用中并没有太多问题. 1.1数据从ht ...

  8. Vue双向数据绑定原理分析(转)

    add by zhj: 目前组里使用的是前端技术是jQuery + Bootstrap,后端使用的Django,Flask等,模板是在后端渲染的.前后端没有分离,这种做法有几个缺点 1. 模板一般是由 ...

  9. 第217天:深入理解Angular双向数据绑定的原理

    一.理解angular双向数据绑定 双向绑定是新的前端框架中频繁出现的一个新词汇,也是mvvm的核心原理.angularjs五条核心信念中的数据驱动,便是由双向绑定进行完成. 那么什么是双向绑定,下面 ...

随机推荐

  1. js多回调函数

    多回调问题 前端编程时,大多通过接口交换数据,接口调用都是异步的,处理数据都是在回调函数里. 假如需要为一个用户建立档案,需要准备以下数据,然后调用建档接口 name     // 用户名字 使用接口 ...

  2. NOIP2018凉凉记

    首先声明一下,我去不了TG,因为我太菜了GD的某教授把我打到PJ了…… 虽然就我这实力普及都不一定1= 不管了,这次是普及,就当扎实基础了.反正HF的 $\text{hhz}$ 也考PJ,见个面多好啊 ...

  3. Zabbix历史数据清理

    特别提醒: a.文中测试的Zabbix版本为 3.0.3 . b.清理数据属于高危操作,请在测试环境中验证后再执行线上操作!!! 1.统计数据库中每个表所占的空间: mysql> SELECT ...

  4. 如何设置 ssh secure shell 支持中文

    只需要设置下/etc/sysconfig/i18n 文件内容如清单 1 所示. 清单 1. 文件内容 1 2 3 LANG="zh_CN.GB18030" SUPPORTED=&q ...

  5. Java Number & Math 类

    // java.lang.Math 常用 // xxxValue() 方法用于将 Number 对象转换为 xxx 数据类型的值并返回. System.out.println(((Integer) 5 ...

  6. java == 与 equals

    1.基本数据类型用"==" java的基本数据类型,也称为原始的数据类型.它们分别是: byte, short, char, int, long, float, double, b ...

  7. QTREE6&&7 - Query on a tree VI &&VII

    树上连通块 不用具体距离,只询问连通块大小或者最大权值 可以类比Qtree5的方法,但是记录东西很多,例如子树有无0/1颜色等 一个trick,两个LCT分离颜色 每个颜色在边上. 仅保留连通块顶部不 ...

  8. P1966 火柴排队

    这道题需要小小的思考一波 (然而我思考了两节课) 好,我们先得出一个结论:a中第k大的与b中第k大的一定要排在一起,才能保证最小. 然后发现:挪a,b其实没有区别,故我们固定a,挪b. 然后我们就思考 ...

  9. Python之黏包

    黏包现象 让我们基于tcp先制作一个远程执行命令的程序(命令ls -l ; lllllll ; pwd) res=subprocess.Popen(cmd.decode('utf-8'), shell ...

  10. 如何用思维导图快速理解PMBOK-PMP第六版教材

    PMP的教材很多人拿到PMBOK的时候都觉得头疼,这书本这么厚,我什么时候能看完啊,确实是,没有体系,没有框架的看书是很难的,看的很多知识点都无法联系起来.所以利用思维导图来学习PMP就很有效果,下面 ...