Javascript MVC 学习笔记（三） 视图和模板

模板

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");

效果立马就出来了：