IceMx.Mvc 我的js MVC 框架 二、视图的数据绑定

介绍

本人菜鸟，一些自己的浅薄见解，望各位大神指正。

本框架有以下优点

1、简单（调用简单、实现简单、不过度设计）

2、视图、控制器、模型分离（分离对于维护十分有必要）

3、组件化（每一个mvc模块儿的实现都是一个组件的实现，M+V+C = 组件）

上一篇通过html文件来实现了html代码的分离，也就是视图了。

数据绑定的几种情况

载入视图以后的操作通常伴随着数据绑定

1、最简单的情况(直接替换）

<div>@{title}</div>
<div>@{content}</div>
<div>@{insTime}</div>

像这样的视图直接用正则表达式，将数据中对应的字段值替换视图中的部分就可以了，正则表达式如下。

RegExp("@{[a-z,A-Z,0-9,_]+}", "g");

2、有些是列表的循环绑定

<div>@{discussContent}</div>
<div>@{insTime}</div>

像这样的要循环这个模板产生html代码然后填充到相应位置。

var muBan = DiscussView.Get("view1");
var list = DiscussModel.GetList();
$.each(list,function(i,discuss){
    muBan+=IceMx.Model.Format(muBan,discuss);
})

$(muBan).appendTo($body);

3、还有一些时候情况比较特殊，举例说明

<div>评论内容</div>
<div><textarea></textarea></div>
<div><input value='表情' onclick='Face.Show()' /><div>

如果现在要循环以上模板绑定数据，Face.Show(txtId)是一个共通方法，这个方法有一个参数txtId，该参数对应模板中的textarea的id。

那么现在问题就来了，如果在模板直接写死id的话循环出来的列表id都是一样的，肯定出问题。

 解决思路是如果能在循环的同时给文本框和表情按钮都绑定一个随机的id，而且这两个id一样这样问题就能解决了。

具体的数据绑定代码如下

    IceMx.Model = {
        Format: function (htm, data) {
            var iceTagReg = new RegExp("@{[a-z,A-Z,0-9,_]+}", "g");
            var iceTag;

            while (iceTag = iceTagReg.exec(htm)) {

                iceTag = iceTag[0];
                iceTagReg = new RegExp("@{[a-z,A-Z,0-9,_]+}", "g");

                //iceId处理
                var iceId = iceTag.match(/@{iceId[0-9]}/g);
                if(iceId){
                    iceId = iceId[0];
                    iceId = iceId.substring(2, iceId.length - 1);
                    if (!data[iceId]) {
                        data[iceId] = IceMx.GetIceId();
                    }
                }

                //值替换
                var theAttr = iceTag.substr(2, iceTag.length - 3);
                var theValue = data[theAttr];
                if (theValue != undefined) {
                    htm = htm.replace(iceTag, theValue);
                } else {
                    htm = htm.replace(iceTag, "@@!!!!^====" + theAttr + "!!!!^!!!!@");
                }
            }
            htm = htm.replace("@@!!!!^====", "@{");
            htm = htm.replace("!!!!^!!!!@", "}");
            return htm;
        }
    };

 IceMx.GetIceId是一个获取随机id的方法

这样的话模板就可以改成这样

<div>评论内容</div>
<div><textarea id='@{iceId1}'></textarea></div>
<div><input value='表情' onclick='Face.Show(@{iceId1})' /><div>

绑定方法依然是这个

var muBan = DiscussView.Get("view1");
var list = DiscussModel.GetList();
$.each(list,function(i,discuss){
    muBan+=IceMx.Model.Format(muBan,discuss);
})

$(muBan).appendTo($body);

其他

若有兴趣请关注分类下的其他文章，如果能得到您的支持将不甚感激。