Javascript MVC 学习笔记 视图和模板
Posted brucemengbm
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Javascript MVC 学习笔记 视图和模板相关的知识,希望对你有一定的参考价值。
模板
javascript中模板的核心概念是,将包括模板变量的HTML片段和Javascript对象做合并。把模板变量替换为对象中的属性值。
书中讲到了几种库作为模板引擎,可是链接失效了。能够在这里下载,链接:jQuery.tmpl
使用方式非常easy,看一下它的说明即可了。给定一个模板。通过给它加入数据就能生成渲染好的元素节点。然后就能够将它加入到页面中,主要用法如:
//数据
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
元素,所以创建一个模板保存username:
<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");
效果立刻就出来了:
以上是关于Javascript MVC 学习笔记 视图和模板的主要内容,如果未能解决你的问题,请参考以下文章