潜水多年、一直是只看不评不写多年，每每看到各位大牛分享的经典文章都是默默的收藏，对大牛技术分享技术表示感谢，这么多年从博客园学到了很多。 这段时间项目告一段落、 正好这段时间相对清闲，我也整理一些常用的内容与大家分享下。

　　从毕业到现在转眼间也有五年半了、一直从事企业管理软件开发、做过asp.net webform、做过silverlight、也做过asp.net mvc。对于企业管理软件，不管用什么技术展示，表单控件都是很重要的一个控件，今天就从表单控件--双向绑定说起吧！至于为什么需要双向绑定我就不阐述了。

　　需求背景：纯客户端控件、客户端和服务端通过ajax传输json格式数据进行交互，要求简单易用、易于扩展。

　　假设从服务端取到如下数据：

data = { "NAME": "张三", "SEX": "2" };

　　现要将数据绑定到如下HTML容器中：

 <div id="container">

 <div style="border: 1px solid; width: 400px;">

 姓名：<input type="text" data-bind="NAME" />

 性别：<select type="select" data-bind="SEX">

 <option value="1">男</option>

 <option value="2">女</option>

 </select>

 </div>

 <div>

 <input type="button" onclick="GetData();" value="获取数据"></div>

通过以下一行js即可实现效果：

   $("#container").binding(data);

当我们修改姓名或者性别时，再次获取data，data就是修改的数据，可直接用于提交

全部源码如下：

　　其中可以通过扩展$.formControls对象来实现对其他第三方控件的支持。

 /// <reference path="jquery-1.7.2.js" />

 $.extend({ formControls: {

     text: {

         getValue: function ($ele) {

             return $ele.val();

         },

         setValue: function ($ele, value) {

             $ele.val(value);

         }

     },

     select: {

         getValue: function ($ele) {

             return $ele.val();

         },

         setValue: function ($ele, value) {

             $ele.val(value);

         }

     }

 }

 });

 function UIBinder($container, op) {

     var pubSub = jQuery({});

     jQuery($container).unbind("change").on("change", "[data-bind]", function (evt) {

         var $ele = jQuery(this);

         var attrName = $ele.attr("data-bind");

         var obj = $.formControls[$ele.attr("type")];

         if (obj) {

             var val = obj.getValue($ele);

             pubSub.trigger("uiChange", [attrName, val]);

             pubSub.trigger("changed", [attrName, val]);

         }

     });

     pubSub.on("dataChange", function (evt, attrName, val) {

         jQuery("[data-bind='" + attrName + "']", $container).each(function () {

             var $ele = jQuery(this);

             var obj = $.formControls[$ele.attr("type")];

             if (obj) obj.setValue($ele, val);

         });

     });

     return pubSub;

 }

 function DataBinder($container, data, op) {

     var binder = new UIBinder($container, op);

     data.set = function (attr_name, val) {

         data[attr_name] = val;

         binder.trigger("dataChange", [attr_name, val]);

         if (op.isReady) binder.trigger("changed", [attr_name, val]);

     };

     data.get = function (attr_name) {

         return data[attr_name];

     };

     binder.on("uiChange", function (evt, attr_name, val) {

         if (op.isReady && data.State == 0) data.State = 2;

         if ($.isArray(val)) {

             data[attr_name] = val[0];

             data[attr_name + "NAME"] = val[1];

         }

         else {

             data[attr_name] = val;

         }

     });

     this._binder = binder;

 }

 $.fn.extend({

     binding: function (data, op) {

         var $container = $(this);

         op = $.extend({ changed: function () { }, isReady: false }, op);

         op.isReady = false;

         var entity = new DataBinder($container, data, op);

         $("[data-bind]", $container).each(function () {

             var attr_name = $(this).attr("data-bind");

             data.set(attr_name, data[attr_name]);

         });

         entity._binder.on("changed", function (evt, attr_name, val) {

             if ($.isFunction(op.changed)) op.changed(attr_name, val);

         });

         op.isReady = true;

         $container.data("data", data);

     }

 });
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head runat="server">

     <title></title>

     <script src="Scripts/jquery-1.7.2.js" type="text/javascript"></script>

     <script src="Scripts/jquery.json-2.4.js" type="text/javascript"></script>

     <script src="Scripts/Two-wayBinding.js" type="text/javascript"></script>

 </head>

 <body>

     <div id="container">

         <div style="border: 1px solid; width: 400px;">

             姓名：<input type="text" data-bind="NAME" />

             性别：<select type="select" data-bind="SEX">

                 <option value="1">男</option>

                 <option value="2">女</option>

             </select>

         </div>

         <div>

             <input type="button" onclick="GetData();" value="获取数据"></div>

         <label>

             event list</label>

         <textarea id="txtResult" readonly style="width: 200px; height: 200px;"></textarea>

     </div>

     <script type="text/javascript">

         var data = { "NAME": "张三", "SEX": "2" };

         var op = {

             changed: function (attr_name, val) {

                 if ($("#txtResult").text()) {

                     $("#txtResult").text($("#txtResult").text() + "\r\n" + attr_name + ">>" + val);

                 }

                 else {

                     $("#txtResult").text(attr_name + ">>" + val)

                 }

             }

         };

         $("#container").binding(data, op);

         function GetData() {

             alert($.toJSON(data));

         }

     </script>

 </body>

 </html>

其中部分代码参考：http://www.lucaongaro.eu/blog/2012/12/02/easy-two-way-data-binding-in-javascript/

html表单-双向绑定的更多相关文章

  1. antd 表单双向绑定的研究

    痛点 在使用antd的表单时,大家觉得不够清爽,总结如下: 大量的模板语法,需要一定的学习成本. 需要手动地进行数据绑定,使用大量的onChange/setFieldsValue去控制数据. 无法通过 ...

  2. react中使用Input表单双向绑定方法

    input react 表单 input 密码框在谷歌浏览器下 会有黄色填充 官网的不太用,这个比较好用 type="password" autoComplete="ne ...

  3. 前端MVC Vue2学习总结（五）——表单输入绑定、组件

    一.表单输入绑定 1.1.基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖, ...

  4. Vue的指令系统、计算属性和表单输入绑定

    指令系统 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变 ...

  5. Vue.js教程--基础2(事件处理 表单输入绑定

    事件处理 表单输入绑定 事件处理 监听v-on 监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 可以在v-on:click=''加内联语句. 有时也需要在内联语句处理器中访问原始 ...

  6. Vue学习计划基础笔记(五) - 表单输入绑定、组件基础

    表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...

  7. VUE：事件处理和表单输入绑定

    事件处理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  8. vue样式绑定、事件监听、表单输入绑定、响应接口

    1.样式绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错 ...

  9. Vue（10）表单输入绑定v-model

    v-model v-model指定可以实现表单值与属性的双向绑定.即表单元素中更改了值会自动的更新属性中的值,属性中的值更新了会自动更新表单中的值 绑定的属性和事件 v-model在内部为不同的输入元 ...

随机推荐

  1. 做优步有什么旁门左道吗？No，贪小便宜会吃大亏！

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  2. void类型及void指针

    1.概述 许多初学者对C/C 语言中的void及void指针类型不甚理解,因此在使用上出现了一些错误.本文将对void关键字的深刻含义进行解说,并 详述void及void指针类型的使用方法与技巧. 2 ...

  3. JavaScript要点（八） 闭包

    JavaScript 变量可以是局部变量或全局变量. 私有变量可以用到闭包. 全局变量 函数可以访问由函数内部定义的变量,如: function myFunction() { var a = 4; r ...

  4. 浅析 ThreadLocal

    一.ThreadLocal类说明 ThreadLocal,很容易让人望文生义,直译"本地线程".ThreadLocal不是一个thread,是thread的局部变量.使用Threa ...

  5. 【11】在operator=中处理“自我赋值”

    1.自我赋值,看起来愚蠢,但是却合法.有些自我赋值一眼就可看出来.有些自我赋值是潜在的.比如:a[i] = a[j]; *px = *py; 甚至不同类型的指针,都指向同一个地址,也是自我赋值,这一类 ...

  6. C# Redis Server分布式缓存编程(二)

    在Redis编程中, 实体和集合类型则更加有趣和实用 namespace Zeus.Cache.Redis.Demo { public class Person { public int Id { g ...

  7. 05---JSON学习（Java）

    一.简介         JSON:JavaScript对象表示法(JavaScript object Notation)         JSON是存储和文本交换信息的语法         JSON ...

  8. 升级ADT22.6后，Android模拟器无法创建

    这 两天,在社区里看到有小伙伴们反应,自己在Eclipse下无法创建Android模拟器的问题.起初,自己也没太在意,我一直使用的是 Genymotion模拟器.然后,问题不解决,总有那么一天会让自己 ...

  9. 【BZOJ2318】【spoj4060】game with probability Problem 概率DP

    链接: #include <stdio.h> int main() { puts("转载请注明出处[辗转山河弋流歌 by 空灰冰魂]谢谢"); puts("网 ...

  10. Linux下批量改动名字方法

    如果任务是把文件夹下全部的.log后缀文件名称中的2014去掉. 方法一) 脚本 这样的方法通过ls把当前文件夹下全部的文件进行遍历,然后获取文件名称,进行mv操作.例如以下: #!/bin/sh f ...