自定义双向绑定插件

一、邦定插件

(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:循环参与部门