JAVASCRIPT網頁應用程式設計

Spine 函式庫

|

191

remove: function(){

this.el.remove();

},

// 我們能取得資料，

// 也能針對各種事件進行不同的處理

click: function(){ /* ... */ }

});

var Tasks = Spine.Controller.create({

proxied: ["addAll", "addOne"],

init: function(){

Task.bind("refresh", this.addAll);

Task.bind("create", this.addOne);

},

addOne: function(item){

var task = TasksItem.init({item: item});

this.el.append(task.render().el);

},

addAll: function(){

Task.each(this.addOne);

}

});

前面這段範例程式裡的

Tasks

，是負責初始化並新增一筆或多筆資料，

TasksItem

則是負

責處理某筆資料的

udpate

和

destroy

事件，並在需要時重新產生資料。這麼做雖然讓程

式碼變得比較複雜，但為我們帶來了一些繪製模式沒有的好處：

第一個好處，是讓程式變得更有效率—不用每次只要有一組網頁元件被修改，就重新產生

整份項目清單。第二個好處，是能針對個別的網頁元件進行更多的操控。可以設定事件處

理器（範例中的

click

回叫函式），也可以針對不同的網頁元件提供不同的處理方式。 ...