HTML控件绑定与模板-优快云博客

本文链接：https://blog.youkuaiyun.com/sharp_ice/article/details/4482676

文件名：DataBinder.js

包含三个类的定义，DBRef,DataBinder,Repeater

主要实现HTML控件的绑定功能，和模板功能。

基于prototype.js及prototype_ext.js两个文件的功能。

/* DBRef类，实现单个属性映射 */ function DBRef(tag, tagAttr, data, dataAttr) { this.data = data; //数据源 this.dataAttr = dataAttr; //绑定属性值 this.tag = tag; //目标 this.tagAttr = tagAttr; //目标属性 if (this.tagAttr == null) { this.tagAttr = this.GetDefaultAttr(this.tag); } } DBRef.prototype = { //获取默认绑定属性 GetDefaultAttr: function(tag) { var tn = tag.tagName.toLowerCase(); //默认绑定属性 var defaultAttr = { input: "value", select: "value", a: "href", img: "src", textarea: "value" }; if (defaultAttr[tn] == null) { return "innerHTML"; } return defaultAttr[tn]; }, // 读取数据 data->tag Read: function() { try { eval("this.tag." + this.tagAttr + " = this.data." + this.dataAttr + ";"); } catch (e) { window.status = "读取数据出现异常，已忽略"; } }, //保存数据 tag->data Save: function() { try { eval("this.data." + this.dataAttr + " = this.tag." + this.tagAttr + ";"); } catch (e) { window.status = "保存数据出现异常，已忽略"; } } }; /* DataBinder类，实现一数据对象{}到一组HTML控件属性之间的映射关系 */ /* mapList格式: [{id:"子控件ID",attr:"子控件赋值属性",field:"数据源字段名"}, {id:"子控件ID",attr:"子控件赋值属性",field:"数据源字段名"},.......]; */ function DataBinder(rootCtrl, data, mapList) { this.root = rootCtrl; //HTML标签根节点 this.data = data; this.mapList = mapList; this.refs = []; //构造映射关系 for (var i = 0; i < this.mapList.length; i++) { var map = this.mapList[i]; var tag = Public.FindChild(this.root, map.id); if (tag == null) continue; var ref = new DBRef(tag, map.attr, this.data, map.field); this.refs.push(ref); } }; DataBinder.prototype = { Read: function() { for (var i = 0; i < this.refs.length; i++) { var ref = this.refs[i]; ref.Read(); } }, Save: function() { for (var i = 0; i < this.refs.length; i++) { var ref = this.refs[i]; ref.Save(); } }, setData: function(data) { for (var i = 0; i < this.refs.length; i++) { this.refs[i].data = data; } this.data = data; } }; //模板类 function Repeater() { this.tpl = null; // 模板 this.container = null; // 容器 this.items = []; // 子项集合 this.dataList = []; // 数据集 this.mapList = []; // 映射关系 } Repeater.prototype = { // 设置模板 setTpl: function(elm) { if (typeof (elm) == "string") { var dom = document.getElementById(elm); this.tpl = dom; } else { this.tpl = elm; } }, // 设置容器 setContainer: function(elm) { var dom; if (typeof (elm) == "string") { dom = document.getElementById(elm); } else { dom = elm; } this.container = dom; }, setMapList: function(ml) { this.mapList = ml; }, onBinding: function(item) { }, Bind: function() { for (var i = 0; i < this.dataList.length; i++) { var data = this.dataList[i]; var item = this.CreateItem(data); this.AddItem(item); this.onBinding(item); } }, //设置数据源 setDataList: function(dl) { this.dataList = dl; }, CreateItem: function(data) { var item = this.defaultCreateItem(); var db = new DataBinder(item, data, this.mapList); db.Read(); item.dataBinder = db; //设置绑定器引用 item.data = data; //设置数据引用 return item; }, //特殊情况下，用户可替换该方法，创建列表项 defaultCreateItem: function() { var item = this.tpl.cloneNode(true); return item; }, // 添加一项 AddItem: function(item) { this.defaultAddItem(item); this.items.push(item); }, //特殊情况下，用户可替换该方法，添加列表项 defaultAddItem: function(item) { this.container.appendChild(item); }, // 删除一项 RemoveItem: function(item) { this.defaultRemoveItem(item); this.items.remove(item); }, //特殊情况下，用户可替换该方法，删除列表项 defaultRemoveItem: function(item) { this.container.removeChild(item); }, // 清空所有 Clear: function() { this.container.innerHTML = ""; this.items = []; }, Read: function() { for (var i = 0; i < this.items.length; i++) { var item = this.items[i]; item.dataBinder.Read(); } }, Save: function() { for (var i = 0; i < this.items.length; i++) { var item = this.items[i]; item.dataBinder.Save(); } } }

示例1

<!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> <title></title>  <mce:script src="../JsLib/prototype.js" mce_src="JsLib/prototype.js" type="text/javascript"></mce:script> <mce:script src="../JsLib/prototype_ext.js" mce_src="JsLib/prototype_ext.js" type="text/javascript"></mce:script> <mce:script src="../JsLib/Lib.js" mce_src="JsLib/Lib.js" type="text/javascript"></mce:script>  <mce:script language="javascript" type="text/javascript"></mce:script> </head> <body> <table id="tableUser" border="1"> <tr> <td>姓名</td> <td><input id="tbName" type="text" /></td> </tr> <tr> <td>性别</td> <td><select id="sltSex"> <option value="M">男</option> <option value="F">女</option> </select></td> </tr> <tr> <td>年龄</td> <td><input id="tbAge" type="text" /></td> </tr> </table> <input type="button" value="查看" onclick="View()" /> <input type="button" value="数据0" onclick="ChangeData(0)" /> <input type="button" value="数据1" onclick="ChangeData(1)" /> </body> </html>

示例2

<!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> <title></title>  <mce:script src="../JsLib/prototype.js" mce_src="JsLib/prototype.js" type="text/javascript"></mce:script> <mce:script src="../JsLib/prototype_ext.js" mce_src="JsLib/prototype_ext.js" type="text/javascript"></mce:script> <mce:script src="../JsLib/Lib.js" mce_src="JsLib/Lib.js" type="text/javascript"></mce:script>  <mce:script language="javascript" type="text/javascript"></mce:script> </head> <body>  <div id="divList"> </div> <div id="divResult"></div> <div style="display:none;" mce_style="display:none;">  <span id="spTpl"> <input id="chkSelected" type="checkbox" onclick="View(this)" /><span id="spName">名称</span> </span> </div> </body> </html>

数据绑定器