html表单-双向绑定

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

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

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

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

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

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

通过以下一行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>