html表單-雙向綁定

時間 2019-12-01

標籤 html 表單雙向綁定欄目 HTML 简体版

原文原文鏈接

　　潛水多年、一直是隻看不評不寫多年，往往看到各位大牛分享的經典文章都是默默的收藏，對大牛技術分享技術表示感謝，這麼多年從博客園學到了不少。這段時間項目告一段落、正好這段時間相對悠閒，我也整理一些經常使用的內容與你們分享下。javascript

　　從畢業到如今轉眼間也有五年半了、一直從事企業管理軟件開發、作過asp.net webform、作過silverlight、也作過asp.net mvc。對於企業管理軟件，無論用什麼技術展現，表單控件都是很重要的一個控件，今天就從表單控件--雙向綁定提及吧！至於爲何須要雙向綁定我就不闡述了。html

　　需求背景：純客戶端控件、客戶端和服務端經過ajax傳輸json格式數據進行交互，要求簡單易用、易於擴展。java

　　假設從服務端取到以下數據：jquery

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

　　現要將數據綁定到以下HTML容器中：web

 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便可實現效果：ajax

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

當咱們修改姓名或者性別時，再次獲取data，data就是修改的數據，可直接用於提交json

所有源碼以下：mvc

　　其中能夠經過擴展$.formControls對象來實現對其餘第三方控件的支持。asp.net

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

View Code

 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/ide

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。