Javascript MVC 學習筆記（三） 視圖和模板

標籤：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運算式的同學都應該好理解，具體用法可以去百度Google一下。

對於模板的儲存，可以儲存在<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");

效果立馬就出來了：

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

Javascript MVC 學習筆記（三） 視圖和模板