JAVASCRIPT網頁應用程式設計

190

|

第十一章

this.el.html(this.template(Task.all()));

}

});

這種做法簡單易懂，但不是很有效率，因為只要模型中有一筆資料有更動，就得要更新

整個網頁元件。如果模型裡的資料筆數不多、資料不複雜的話，還可以勉強湊合著用。

不過如果希望能夠只針對某組特定網頁元件，進行更細緻的處理（像是幫某些網頁元件

設定事件處理器），就需要用接下來要介紹的

元件模式

（

element pattern

）。

元件模式（Element Pattern）

基本上，產製模式能做到的功能，元件模式也都能做到，不過元件模式能對元件進行更

多的處理。元件模式主要由兩組控制器所組成：一組負責處理元件的集合體，另一組則

負責處理單一元件。讓我們直接看一段範例程式碼，好讓你對它的運作原理更有感覺：

var TasksItem = Spine.Controller.create({

// 將 click 事件委派給某個內部處理器

events: {

"click": "click"

},

// 確保函式內的執行環境是正確的

proxied: ["render", "remove"],

// 將事件和資料綁在一起

init: function(){

this.item.bind("update", this.render);

this.item.bind("destroy", this.remove);

},

// 產生網頁元件

render: function(item){

if (item) ...