Javascript MVC 学习笔记(三) 视图和模板
2015-07-26 20:30
716 查看
模板
Javascript中模板的核心概念是,将包含模板变量的HTML片段和Javascript对象做合并,把模板变量替换为对象中的属性值。书中讲到了几种库作为模板引擎,但是链接失效了,可以在这里下载,链接:jQuery.tmpl
使用方式很简单,看一下它的说明就行了。给定一个模板,通过给它添加数据就能生成渲染好的元素节点,然后就可以将它添加到页面中,主要使用方法如:
//数据 var object = { url: "http://example.com", getName: function(){ return "Trevor"; } }; //模板 var template = '<li><a href="${url}">${getName()}</a></li>'; //生成渲染的元素 var element = $.tmpl(template, object); //添加到body中 $("body").append(element);
可以看到使用
${}来书写插入的变量,再根据传入到
$.tmpl()的
object的对应属性名获取到具体的值。上面的实例将会生成一个
<li><a href="http://example.com">Trevor</a></li>,并插入到body的最后。
模板功能还有很多,比如条件和迭代,使用过EL表达式的同学都应该好理解,具体用法可以去百度谷歌一下。
对于模板的存储,可以保存在
<script>标签里,通过标签的id获取模板的引用。比如:
<!-- 存放模板 --> <script type="text/x-jquery-tmpl" id="someTemplate"> <span>${getName()}</span> </script> <script> var data = { getName: function(){ return "Bob"; } } var element = $("#someTemplate").tmpl(data); element.appendTo("body"); </script>
绑定
本质上讲,绑定将视图元素和Javascript对象(通常是模型)挂街在一起。当模型改变时,视图将根据改变后的对象做适时更新。绑定意味着当记录发生改变的时候控制器不必处理视图的更新,因为更新已经自动完成了,使用绑定也为构建实时应用程序打下了基础。
比如有一个
ul列表,显示应用中的用户。我们需要创建用户的时候让
ul也动态改变。
<ul id="users"> </ul>
一个用户对应一个
li元素,所以创建一个模板保存用户名:
<script type="text/x-jquery-tmpl" id="userTmpl"> <li>${name}</li> </script>
然后将模型和视图进行绑定:
//模型 var User = function(name){ this.name = name; }; //存放用户的数组 User.records = []; //为用户绑定自定义事件 User.bind = function(ev, callback){ //初始化_callbacks(该对象属性为事件名,值为对应的事件处理函数) this._callbacks || (this._callbacks = {}); //初始化_callbacks[ev](一个数组,里面存放该事件的事件处理函数) (this._callbacks[ev] || (this._callbacks[ev] = [])).push(callback); } //触发自定义事件 User.trigger = function(ev){ var list; if(!this._callbacks){ return; } //获取所有事件处理函数 if(!(list = this._callbacks[ev])){ return; } //全部执行 $.each(list, function(){ this(); }) } //创建用户 User.create = function(name){ //存放用户 this.records.push(new this(name)); //触发自定义事件 this.trigger("change"); }; $(function(){ //绑定事件 User.bind("change", function(){ //创建模板,传入一个数组代表将该数组内所有对象分别渲染模板,有多少个对象创建多少个模板 var template = $("#userTmpl").tmpl(User.records); //重新渲染ul $("#users").empty().append(template); }); });
可以看到在
User.create方法里面触发了
change事件,而通过
bind绑定的函数里面通过获取
User.records重新渲染了
ul,所以每次添加用户都会让
ul刷新一次。
调用一下create方法:
User.create("zhangsan"); User.create("lisi");
效果立马就出来了:
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- 分享微信开发Html5轻游戏中的几个坑
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 异步流程控制:7 行代码学会 co 模块
- JavaScript拆分字符串时产生空字符的原因
- IE8开发人员工具教程(二)
- 在flex中执行一个javascript方法的简单方式
- Flex结合JavaScript读取本地路径的方法
- PowerShell中执行Javascript的方法示例
- javascript asp教程第六课-- response方法
- javascript asp教程More About Recordsets
- javascript asp教程第十二课---session对象
- javascript asp教程创建数据库连接
- javascript asp教程错误处理