自定义双向绑定插件
一、邦定插件
(function ($) { $.extend({ //VM捆绑对象 BindApply: function (viewModel) { var SetVal = function (field, val) { for (var p in viewModel) { for (var p1 in viewModel[p]) { if ((p + '.' + p1) == field) { viewModel[p][p1] = val; } } } } var SetForeachVal = function (className, field, val) { for (var p in viewModel) { for (var p1 in viewModel[p]) { var name = className.split('_')[0]; var num = className.split('_')[1]; if ((p + '.' + p1) == name) { var _obj = viewModel[p][p1][num]; for (var p2 in _obj) { if (p2 == field) { viewModel[p][p1][num][p2] = val; } } } } } } var SetWithVal = function (className, field, val) { for (var p in viewModel) { for (var p1 in viewModel[p]) { var num = className.split('_')[1]; var name = className.split('_')[0]; var num1 = num.split('-')[0]; var num2 = num.split('-')[1]; var name1 = name.split('.')[0] + '.' + name.split('.')[1]; var name2 = name.split('.')[2]; if ((p + '.' + p1) == name1) { var _obj = viewModel[p][p1][num1]; for (var p2 in _obj) { if (p2 == name2) { var _obj1 = _obj[p2][num2]; for (var p3 in _obj1) { if (p3 == field) { viewModel[p][p1][num1][p2][num2][p3] = val; } } } } } } } return false; } $("[data-bind]").each(function () { var my = $(this); var _type = my.attr("data-bind").split(':')[0]; var _val = my.attr("data-bind").split(':')[1]; switch (_type) { case "click": { for (var p in viewModel) { if (p == _val) { my.unbind(); my.click( function () { var e = $(my).attr('data-bind').split(':')[1]; viewModel[e](my); }) } } } break case "text": { for (var p in viewModel) { for (var p1 in viewModel[p]) { if ((p + '.' + p1) == _val) { my.val(viewModel[p][p1]); if (my[0].tagName == 'LABEL') my.text(viewModel[p][p1]); if (my[0].tagName == 'PRE') my.html(viewModel[p][p1]); my.change(function () { SetVal($(this).attr("data-bind").split(':')[1], this.value); }); } } } } break; case "foreach": { for (var p in viewModel) { for (var p1 in viewModel[p]) { if ((p + '.' + p1) == _val) { var $arrs = viewModel[p][p1]; var n = -1; $(this).find("[foreach]").each(function () { for (var k = 0; k < $arrs.length; k++) { if ($(this).attr('foreach') == $arrs[k].index) { n = k; $(this).find("[data-bind]").each(function () { var $type = $(this).attr("data-bind").split(':')[0]; var $val = $(this).attr("data-bind").split(':')[1]; if ($type == 'fText' || $type.indexOf('with') > -1) { for (var p2 in $arrs[n]) { if (p2 == $val) { switch ($type) { case "fText": { $(this).val($arrs[n][p2]); if ($(this)[0].tagName == 'LABEL') { $(this).text($arrs[n][p2]); } $(this).removeAttr('tit'); $(this).attr('tit', _val + '_' + n); $(this).unbind(); $(this).change(function () { SetForeachVal($(this).attr('tit'), $(this).attr("data-bind").split(':')[1], this.value); }); } break; case "with": { var $tarrs = $arrs[n][p2]; var m = 0; var _time = 0; $(this).find("[data-bind]").each(function () { if (_time == 4) { m++; _time = 0; } var $val1 = $(this).attr("data-bind").split(':')[1]; for (var p3 in $tarrs[m]) { if (p3 == $val1) { $(this).val($tarrs[m][p3]); if ($(this)[0].tagName == 'LABEL') { $(this).text($tarrs[m][p3]); } $(this).parents('tr:last').removeAttr('tit'); $(this).parents('tr:last').attr('tit', p + '.' + p1 + '.' + p2 + '_' + n + '-' + m); $(this).unbind(); $(this).change(function () { SetWithVal($(this).parents('tr:last').attr('tit'), $(this).attr("data-bind").split(':')[1], this.value); }); _time++; } } }); } break; case "with3": { var $tarrs = $arrs[n][p2]; var m = 0; var _time = 0; $(this).find("[data-bind]").each(function () { if (_time == 3) { m++; _time = 0; } var $val1 = $(this).attr("data-bind").split(':')[1]; for (var p3 in $tarrs[m]) { if (p3 == $val1) { $(this).val($tarrs[m][p3]); if ($(this)[0].tagName == 'LABEL') { $(this).text($tarrs[m][p3]); } $(this).parents('.with3:last').removeAttr('tit'); $(this).parents('.with3:last').attr('tit', p + '.' + p1 + '.' + p2 + '_' + n + '-' + m); $(this).unbind(); $(this).change(function () { SetWithVal($(this).parents('.with3:last').attr('tit'), $(this).attr("data-bind").split(':')[1], this.value); }); _time++; } } }); } break; case "with6": { var $tarrs = $arrs[n][p2]; var m = 0; var _time = 0; $(this).find("[data-bind]").each(function () { if (_time == 6) { m++; _time = 0; } var $val1 = $(this).attr("data-bind").split(':')[1]; for (var p3 in $tarrs[m]) { if (p3 == $val1) { $(this).val($tarrs[m][p3]); if ($(this)[0].tagName == 'LABEL') { $(this).text($tarrs[m][p3]); } $(this).parents('.with6:last').removeAttr('tit'); $(this).parents('.with6:last').attr('tit', p + '.' + p1 + '.' + p2 + '_' + n + '-' + m); $(this).unbind(); $(this).change(function () { SetWithVal($(this).parents('.with6:last').attr('tit'), $(this).attr("data-bind").split(':')[1], this.value); }); _time++; } } }); } break; case "with3m": { var $tarrs = $arrs[n][p2]; var mDepartList = $.grep($tarrs, function (e, i) { return e.IsMain == 1; }); var m = 0; //var _time = 0; var nameFirst = ''; $(this).find("[data-bind]").each(function () { //if (_time == 4) { m++; _time = 0; } var $val1 = $(this).attr("data-bind").split(':')[1]; var $type1 = $(this).attr("data-bind").split(':')[0]; if (nameFirst == $val1) { m++; } for (var p3 in mDepartList[m]) { if (p3 == $val1) { if (nameFirst == '') nameFirst = p3; if ($type1 == "wText") { $(this).val(mDepartList[m][p3]); if ($(this)[0].tagName == 'LABEL') { $(this).text(mDepartList[m][p3]); } //_time++; } else if ($type1 == "each") { var m1 = 0; //var _time1 = 0; var nameFirst1 = ''; var _length = $(this).find("[data-bind]").length; $(this).find("[data-bind]").each(function () { //if (_time1 == _length / mDepartList[m][p3].length) { m1++; _time1 = 0; } var $val2 = $(this).attr("data-bind").split(':')[1]; if (nameFirst1 == $val2) { m1++; } for (var p4 in mDepartList[m][p3][m1]) { if (p4 == $val2) { if (nameFirst1 == '') nameFirst1 = p4; $(this).val(mDepartList[m][p3][m1][p4]); if ($(this)[0].tagName == 'LABEL') { $(this).text(mDepartList[m][p3][m1][p4]); } //_time1++; } } }); // _time++; } } } }); } break; case "with3j": { var $tarrs = $arrs[n][p2]; var mDepartList = $.grep($tarrs, function (e, i) { return e.IsMain == 0; }); var m = 0; //var _time = 0; var nameFirst = ''; $(this).find("[data-bind]").each(function () { //if (_time == 4) { m++; _time = 0; } var $val1 = $(this).attr("data-bind").split(':')[1]; var $type1 = $(this).attr("data-bind").split(':')[0]; if (nameFirst == $val1) { m++; } for (var p3 in mDepartList[m]) { if (p3 == $val1) { if (nameFirst == '') nameFirst = p3; if ($type1 == "wText") { $(this).val(mDepartList[m][p3]); if ($(this)[0].tagName == 'LABEL') { $(this).text(mDepartList[m][p3]); } //_time++; } else if ($type1 == "each") { var m1 = 0; //var _time1 = 0; var nameFirst1 = ''; var _length = $(this).find("[data-bind]").length; $(this).find("[data-bind]").each(function () { //if (_time1 == _length / mDepartList[m][p3].length) { m1++; _time1 = 0; } var $val2 = $(this).attr("data-bind").split(':')[1]; if (nameFirst1 == $val2) { m1++; } for (var p4 in mDepartList[m][p3][m1]) { if (p4 == $val2) { if (nameFirst1 == '') nameFirst1 = p4; $(this).val(mDepartList[m][p3][m1][p4]); if ($(this)[0].tagName == 'LABEL') { $(this).text(mDepartList[m][p3][m1][p4]); } //_time1++; } } }); // _time++; } } } }); } break; case "with2": { var $tarrs = $arrs[n][p2]; var m = 0; var _time = 0; $(this).find("[data-bind]").each(function () { if (_time == 4) { m++; _time = 0; } var $val1 = $(this).attr("data-bind").split(':')[1]; var $type1 = $(this).attr("data-bind").split(':')[0]; for (var p3 in $tarrs[m]) { if (p3 == $val1) { if ($type1 == "wText") { $(this).val($tarrs[m][p3]); if ($(this)[0].tagName == 'LABEL') { $(this).text($tarrs[m][p3]); } $(this).parents('.with2:last').removeAttr('tit'); $(this).parents('.with2:last').attr('tit', p + '.' + p1 + '.' + p2 + '_' + n + '-' + m); $(this).unbind(); $(this).change(function () { SetWithVal($(this).parents('.with2:last').attr('tit'), $(this).attr("data-bind").split(':')[1], this.value); }); _time++; } else if ($type1 == "each") { var $tarrs1 = $tarrs[m][p3]; var mDepartList = $.grep($tarrs1, function (e, i) { return e.IsMain == 1; }); var m1 = 0; var _time1 = 0; var _length = $(this).find("[data-bind]").length; $(this).find("[data-bind]").each(function () { if (_time1 == _length / mDepartList.length) { m1++; _time1 = 0; } var $val2 = $(this).attr("data-bind").split(':')[1]; for (var p4 in mDepartList[m1]) { if (p4 == $val2) { $(this).val(mDepartList[m1][p4]); if ($(this)[0].tagName == 'LABEL') { $(this).text(mDepartList[m1][p4]); } $(this).parents('tr:last').removeAttr('tit'); $(this).parents('tr:last').attr('tit', p + '.' + p1 + '.' + p2 + '_' + n + '-' + m); $(this).unbind(); $(this).change(function () { SetWithVal($(this).parents('tr:last').attr('tit'), $(this).attr("data-bind").split(':')[1], this.value); }); _time1++; } } }); _time++; } else if ($type1 == "eachMain") { var $tarrs1 = $tarrs[m][p3]; var mDepartList = $.grep($tarrs1, function (e, i) { return e.IsMain == 0; }); var m1 = 0; var _time1 = 0; var _length = $(this).find("[data-bind]").length; $(this).find("[data-bind]").each(function () { if (_time1 == _length / mDepartList.length) { m1++; _time1 = 0; } var $val2 = $(this).attr("data-bind").split(':')[1]; for (var p4 in mDepartList[m1]) { if (p4 == $val2) { $(this).val(mDepartList[m1][p4]); if ($(this)[0].tagName == 'LABEL') { $(this).text(mDepartList[m1][p4]); } $(this).parents('tr:last').removeAttr('tit'); $(this).parents('tr:last').attr('tit', p + '.' + p1 + '.' + p2 + '_' + n + '-' + m); $(this).unbind(); $(this).change(function () { SetWithVal($(this).parents('tr:last').attr('tit'), $(this).attr("data-bind").split(':')[1], this.value); }); _time1++; } } }); _time++; } } } }); } break; } } } } }); } } }); } } } } break; } }); if (viewModel.BindCompleted) { viewModel.BindCompleted(); } } }); })(jQuery);
二、页面数据对象
//标题 var SubReport = function () { this.SubReportContent = ""; this.index = -1; //当前的INDEX this.PIndex = -1; //当前SubProject最大的序列号，递增，用于SubProject的序号的唯一性，复制给SubProject里的index this.SubProjects = []; } //项目 var SubProject = function () { this.SubProjectTitle = ""; this.index = -1; //当前的Index this.SubProjectContent = ""; this.DIndex = -1; this.Departments = []; this.Ty_SubID = ""; this.MNum=3; this.JNum=3; } //自定义填报 var ReportCustomProject = function () { this.DIndex = -1; this.index = -1; this.Departments = []; } //多个部门自定义填报项目 var Departments = function () { this.DepartmentID = ""; this.DepartmentName = ""; this.index = -1; this.IsMain = ''; //是否是牵头部门 this.Status = ''; this.CPIndex = -1; //最大部门自定义填报项的数量 this.CPTitle = ""; //每个部门的首个自定义填报标题 this.CustomProjects = []; this.CCIndex = -1; this.CCTitle = "职权或业务项目一"; this.CombingContents = []; this.OpinionContent = ''; //截断的内容 this.OpinionContentAll = ''; //所有内容 this.Ty_SubID_DepartmentID = ''; } //部门自定义项目 var CustomProject = function () { this.index = -1; //当前的Index this.CusTitle = ""; this.CusContent = ""; this.CusOpinion = ""; } //梳理表标题 var Combing = function () { this.index = -1; this.DIndex = -1; this.Title = ""; this.Departments = []; } // 梳理表填报内容 var CombingContent = function () { this.index = -1 this.KeyNode = ""; this.RelatePosition = ""; this.IPRisk = ""; this.ControlMethod = ""; this.PlanControlMethod = ""; this.Memo = ""; } var _AdminReportViewModel = function () { var self = this; self.Report = { Title: "123", Content: "456", SIndex: -1, //当前SubReport最大的序列号，递增，用于SubReport的序号的唯一性，复制给SubReport里的index SubReports: [], CIndex: -1, Combings: [], //梳理表集合 RCPIndex: -1, //自定义填报最大序列号 ReportCustomProject: [], //自定义项目 IsClose: 0 //填报是否关闭 } self.Param = { SubReportIndex: -1 //用于生成SubProject指定的索引 , SubProjectIndex: -1 , CusProDIndex: -1 //自定义填报的部门指定索引 , CombingIndex: -1 , CombingDIndex: -1 , layerIdx: -1 } self.UrlList = { SaveAdminReport: "AdminReportAjax.aspx/SaveAdminReport", QueryAdminReport: "AdminReportAjax.aspx/QueryAdminReport", QuerySubProjectJoinDept:"AdminReportAjax.aspx/GetDepartList" } //初始化 self.Init = function () { if (self.Report.IsClose == 1) {//管理员关闭填报 3历史填报 不允许编辑 $("[key]").each(function () { $(this).hide(); }); } else { $("[key]").each(function () { $(this).show(); }); } } //页面加载后执行 self.Load = function () { self.Param.layerIdx = layer.load("正在加载中...", 2); self.BindData(); } //加载后 self.Completed = function () { self.GenerateHTML(); //$.BindApply(AdminReportViewModel); } }();
三、使用方式
<label data-bind="text:Report.Title"></label> 绑定文本
<a data-bind="click:Submit">提 交</a> 绑定单击事件
<div data-bind="foreach:Report.SubReports"></div> 绑定对象的集合循环对象
<div data-bind="with3m:Departments"> 绑定循环对象下的子循环对象，with3m：标识循环3的子属性，用于牵头部门，with3j:循环参与部门
