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

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

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

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

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

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

  1.  <div id="container">
  2.  <div style="border: 1px solid; width: 400px;">
  3.  姓名：<input type="text" data-bind="NAME" />
  4.  性别：<select type="select" data-bind="SEX">
  5.  <option value="1">男</option>
  6.  <option value="2">女</option>
  7.  </select>
  8.  </div>
  9.  <div>
  10.  <input type="button" onclick="GetData();" value="获取数据"></div>

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

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

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

全部源码如下：

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

  1.  /// <reference path="jquery-1.7.2.js" />
  2.  $.extend({ formControls: {
  3.      text: {
  4.          getValue: function ($ele) {
  5.              return $ele.val();
  6.          },
  7.          setValue: function ($ele, value) {
  8.              $ele.val(value);
  9.          }
  10.      },
  11.      select: {
  12.          getValue: function ($ele) {
  13.              return $ele.val();
  14.          },
  15.          setValue: function ($ele, value) {
  16.              $ele.val(value);
  17.          }
  18.      }
  19.  }
  20.  });
  21.  function UIBinder($container, op) {
  22.      var pubSub = jQuery({});
  23.      jQuery($container).unbind("change").on("change", "[data-bind]", function (evt) {
  24.          var $ele = jQuery(this);
  25.          var attrName = $ele.attr("data-bind");
  26.          var obj = $.formControls[$ele.attr("type")];
  27.          if (obj) {
  28.              var val = obj.getValue($ele);
  29.              pubSub.trigger("uiChange", [attrName, val]);
  30.              pubSub.trigger("changed", [attrName, val]);
  31.          }
  32.      });
  33.      pubSub.on("dataChange", function (evt, attrName, val) {
  34.          jQuery("[data-bind='" + attrName + "']", $container).each(function () {
  35.              var $ele = jQuery(this);
  36.              var obj = $.formControls[$ele.attr("type")];
  37.              if (obj) obj.setValue($ele, val);
  38.          });
  39.      });
  40.      return pubSub;
  41.  }
  42.  function DataBinder($container, data, op) {
  43.      var binder = new UIBinder($container, op);
  44.      data.set = function (attr_name, val) {
  45.          data[attr_name] = val;
  46.          binder.trigger("dataChange", [attr_name, val]);
  47.          if (op.isReady) binder.trigger("changed", [attr_name, val]);
  48.      };
  49.      data.get = function (attr_name) {
  50.          return data[attr_name];
  51.      };
  52.      binder.on("uiChange", function (evt, attr_name, val) {
  53.          if (op.isReady && data.State == 0) data.State = 2;
  54.          if ($.isArray(val)) {
  55.              data[attr_name] = val[0];
  56.              data[attr_name + "NAME"] = val[1];
  57.          }
  58.          else {
  59.              data[attr_name] = val;
  60.          }
  61.      });
  62.      this._binder = binder;
  63.  }
  64.  $.fn.extend({
  65.      binding: function (data, op) {
  66.          var $container = $(this);
  67.          op = $.extend({ changed: function () { }, isReady: false }, op);
  68.          op.isReady = false;
  69.          var entity = new DataBinder($container, data, op);
  70.          $("[data-bind]", $container).each(function () {
  71.              var attr_name = $(this).attr("data-bind");
  72.              data.set(attr_name, data[attr_name]);
  73.          });
  74.          entity._binder.on("changed", function (evt, attr_name, val) {
  75.              if ($.isFunction(op.changed)) op.changed(attr_name, val);
  76.          });
  77.          op.isReady = true;
  78.          $container.data("data", data);
  79.      }
  80.  });
  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head runat="server">
  4.      <title></title>
  5.      <script src="Scripts/jquery-1.7.2.js" type="text/javascript"></script>
  6.      <script src="Scripts/jquery.json-2.4.js" type="text/javascript"></script>
  7.      <script src="Scripts/Two-wayBinding.js" type="text/javascript"></script>
  8.  </head>
  9.  <body>
  10.      <div id="container">
  11.          <div style="border: 1px solid; width: 400px;">
  12.              姓名：<input type="text" data-bind="NAME" />
  13.              性别：<select type="select" data-bind="SEX">
  14.                  <option value="1">男</option>
  15.                  <option value="2">女</option>
  16.              </select>
  17.          </div>
  18.          <div>
  19.              <input type="button" onclick="GetData();" value="获取数据"></div>
  20.          <label>
  21.              event list</label>
  22.          <textarea id="txtResult" readonly style="width: 200px; height: 200px;"></textarea>
  23.      </div>
  24.      <script type="text/javascript">
  25.          var data = { "NAME": "张三", "SEX": "2" };
  26.          var op = {
  27.              changed: function (attr_name, val) {
  28.                  if ($("#txtResult").text()) {
  29.                      $("#txtResult").text($("#txtResult").text() + "\r\n" + attr_name + ">>" + val);
  30.                  }
  31.                  else {
  32.                      $("#txtResult").text(attr_name + ">>" + val)
  33.                  }
  34.              }
  35.          };
  36.          $("#container").binding(data, op);
  37.          function GetData() {
  38.              alert($.toJSON(data));
  39.          }
  40.      </script>
  41.  </body>
  42.  </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. AlertDialog

    1.AlertDialog点击时不自动消失 //在setPositiveButton和setNegativeButton根据自己的逻辑处理,大概代码如下 if(validate){//验证通过自动消失 ...

  2. Android实例-消息框(XE8+小米2)

    方法一支持. 方法二与方法三都是三方单元,功能相同. 方法4与方法5报错,提示平台不支持. 第三方单元一: unit Android.JNI.Toast; // Java bridge class i ...

  3. 第九章、文件与文件系统的压缩与打包 3. 打包命令: tar

    打包命令: tar gzip 与 bzip2 也能够针对目录来进行压缩, 不过,这两个命令对目录的压缩指的是『将目录内的所有文件 "分别" 进行压缩』! 将多个文件或目录包成一个大 ...

  4. hdoj 2682 Tree

    Tree Time Limit: 6000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  5. MySQL中UNION和UNION ALL的使用

    在数据库中,UNION和UNION ALL关键字都是将两个结果集合并为一个,但这两者从使用和效率上来说都有所不同. MySQL中的UNION UNION在进行表链接后会筛选掉重复的记录,所以在表链接后 ...

  6. C#-将控件动态添加到选项卡页tablepage

    tabPage1.Controls.Add(new Button()); 实例: Button cp = new Button(); cp.text="test";cp.Click ...

  7. HDU 5501 The Highest Mark 背包dp

    The Highest Mark Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?p ...

  8. iOS使用宏写单例

    本文只介绍ARC情况下的单例 过去一直背不下来单例如何写,就是知道这么回事,也知道通过宏来写单例,但是一直记不住,今天就来记录一下 - (void)viewDidLoad {     [super v ...

  9. iOS开发——面试笔试精华（三）

    面试笔试精华(三) 1.        When to use NSMutableArray and when to use NSArray? 什么时候使用NSMutableArray,什么时候使用N ...

  10. form表单普通提交预览显示，读取显示tmp文件

    <html> <head> <meta http-equiv="content-type" content="text/html; char ...