IceMx.Mvc 我的js MVC 框架 二、视图的数据绑定
2013-08-31 19:42
274 查看
介绍
本人菜鸟,一些自己的浅薄见解,望各位大神指正。
本框架有以下优点
1、简单(调用简单、实现简单、不过度设计)
2、视图、控制器、模型分离(分离对于维护十分有必要)
3、组件化(每一个mvc模块儿的实现都是一个组件的实现,M+V+C = 组件)
上一篇通过html文件来实现了html代码的分离,也就是视图了。
数据绑定的几种情况
载入视图以后的操作通常伴随着数据绑定
1、最简单的情况(直接替换)
像这样的视图直接用正则表达式,将数据中对应的字段值替换视图中的部分就可以了,正则表达式如下。
2、有些是列表的循环绑定
像这样的要循环这个模板产生html代码然后填充到相应位置。
3、还有一些时候情况比较特殊,举例说明
如果现在要循环以上模板绑定数据,Face.Show(txtId)是一个共通方法,这个方法有一个参数txtId,该参数对应模板中的textarea的id。
那么现在问题就来了,如果在模板直接写死id的话循环出来的列表id都是一样的,肯定出问题。
解决思路是如果能在循环的同时给文本框和表情按钮都绑定一个随机的id,而且这两个id一样这样问题就能解决了。
具体的数据绑定代码如下
IceMx.GetIceId是一个获取随机id的方法
这样的话模板就可以改成这样
绑定方法依然是这个
其他
若有兴趣请关注分类下的其他文章,如果能得到您的支持将不甚感激。
本人菜鸟,一些自己的浅薄见解,望各位大神指正。
本框架有以下优点
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);
其他
若有兴趣请关注分类下的其他文章,如果能得到您的支持将不甚感激。
相关文章推荐
- IceMx.Mvc 我的js MVC 框架 一、html代码的分离(视图)
- IceMx.Mvc 我的js MVC 框架 开篇
- IceMx.Mvc 我的js MVC 框架六、完善植物大战僵尸(向日葵登场)
- IceMx.Mvc 我的js MVC 框架七、完善植物大战僵尸(增加阳光的消费和获得)
- IceMx.Mvc 我的js MVC 框架四、试水植物大战僵尸(雏形版)
- IceMx.Mvc 我的js MVC 框架 三、动手来写一个评论模块儿
- IceMx.Mvc 我的js MVC 框架五、完善植物大战僵尸(雏形版增加动画)
- Scott的ASP.net MVC框架系列文章之三: 视图数据的传递
- Vue.js之视图和数据的双向绑定(v-model)
- Scott的ASP.net MVC框架系列文章之三: 视图数据的传递
- MVC/MVP/MVVM区别——MVVM就是angular,视图和数据双向绑定
- [翻译]ASP.NET MVC 教程 - 传递数据到视图母版页(适合动态绑定菜单)
- 非常简单的js双向数据绑定框架(三):js model黑科技
- angular.js 中同步视图和模型数据双向绑定,$watch $digest $apply 机制
- 我是怎么从顾虑到热爱ReactJS的(与AngularJS经典MVC数据绑定的对比)
- Vue.js-----轻量高效的MVVM框架(三、认识数据绑定)
- 【微信小程序笔记-2】框架-视图层-WXML(数据绑定、渲染、引用)
- MVC视图js获取控制器数据
- MVC 5使用TempData(对象)跨视图传递数据
- MVC 数据绑定