Javascript MVC 学习笔记(三) 视图和模板

模板

Javascript中模板的核心概念是,将包含模板变量的HTML片段和Javascript对象做合并,把模板变量替换为对象中的属性值。

书中讲到了几种库作为模板引擎,但是链接失效了,可以在这里下载,链接:jQuery.tmpl

使用方式很简单,看一下它的说明就行了。给定一个模板,通过给它添加数据就能生成渲染好的元素节点,然后就可以将它添加到页面中,主要使用方法如:

//数据var object = {url: “http://example.com”,getName: ;}};//模板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获取模板的引用。比如:

=”text/x-jquery-tmpl” id=”someTemplate”><span>${getName()}</span></script><script> var data = {getName: ;}}var element = $(“#someTemplate”).tmpl(data);element.appendTo(“body”); </script>绑定

本质上讲,绑定将视图元素和Javascript对象(通常是模型)挂街在一起。当模型改变时,视图将根据改变后的对象做适时更新。

绑定意味着当记录发生改变的时候控制器不必处理视图的更新,因为更新已经自动完成了,使用绑定也为构建实时应用程序打下了基础。

比如有一个ul列表,显示应用中的用户。我们需要创建用户的时候让ul也动态改变。

>

一个用户对应一个li元素,所以创建一个模板保存用户名:

=”userTmpl”><li>${name}</li></script>

然后将模型和视图进行绑定:

{this.name = name;};//存放用户的数组User.records = [];//为用户绑定自定义事件User.bind = ._callbacks || (this._callbacks = {});//初始化_callbacks[ev](一个数组,里面存放该事件的事件处理函数)(this._callbacks[ev] || (this._callbacks[ev] = [])).push(callback);}//触发自定义事件User.trigger = list;if(!this._callbacks){return;}//获取所有事件处理函数if(!(list = this._callbacks[ev])){return;}//全部执行$.each(list, ();})}//创建用户User.create = .records.push(new this(name));//触发自定义事件this.trigger(“change”);};$(User.bind(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”);

效果立马就出来了:

不要忘本,任何时候,任何事情。

Javascript MVC 学习笔记(三) 视图和模板

相关文章:

你感兴趣的文章:

标签云: