backbone.js教學(四)Collection

在開始之前可以到 JSFiddle 取得範例程式碼並一邊閱讀底下的介紹。
環境的基本與過去大致相同:

Collection 簡單來說就是一組 Model 的陣列版本,如果有一堆 Model 需要被當做陣列(或類似的有序資料結構 – ordered set)來操作,而更重要的是,Collection 可以無縫的整合 RESTful web service,大大減低與後端溝通的阻礙。此外,Collection 可以直接對監聽 Collection 本身或 Collection 裡的 Model 所發出的各種事件(event),例如 change, add, remove 等等。
來看看底下這個例子,假設我們有一種 Model 叫做 Person:
如果我們想要有一個代表一群人的物件,可以用 Collection 建出代表一群人的 Collection: people,只要在建構的屬性裡面指定 Model為 Person 即可:產生一個 Person 或 People 的方法就像我們過去所知道的方法類似:從 People (人群) 增加一個 Person (人)的方法:people.add(person);

或是一些人

people.add([{name:"Bob"}, {name:"Jim"}]);

除此之外,也可以把 Collection 當做堆疊(stack),透過 push/pop 來操做:

people.push([{name:"Bob"}, {name:"Jim"}]);
people.pop();

也可以用 reset 來新增 Model。reset 和 add 唯一的差別在於 reset 會清除掉原本的所有 Model:

people.reset([{name:"Bob"}, {name:"Jim"}]);
/* 或是 */
people.reset([{name:"Bob"}, {name:"Jim"}], person);

想刪除一些人也沒問題:

people.remove(person);

值得注意的是上面的 add, reset 和 remove  642-436 dumps 都會觸發本身的事件(add, reset, remove event),我們可以用 on

這方法來監聽這些 event,例如

people.on(“reset", function(){});

還有一些存取 Model 的方法,包括 online pokies at 和 getCid 等。at 這方法可以直接依照 Collection 裡面的 Model 生成的順序讀取,像是:

people.at(1);

Collection 的每一個 Model 都會有一串代表 Model 的 Cid,編號方式是 c 加上數字,例如 casino c1, c2。可以透過 getCid Top UK Casinos 來取出 model

people.getCid(“c1″);

除了上面方法來存取每個 Model 之外,也可以用 Models 來直接存取 Collection 的內容,例如:

console.log(people.models);

當然,要把整個 Collection 轉成 JSON 也只要呼叫一個方法即可:

people.toJSON();

若要讓 Collection 裡面的 Model 有排序,可以定義 comparator 這個屬性:

上面的例子,我們傳進了兩個 person,person2,取出 person 的 name 屬性作比較
如此一來 collection 的 getter/setter 就會按照 name 的排序來增減。
可以透過呼叫 sort() 來取強迫 collection 排序:

people.sort();

Collection 有一些特殊的過濾方法,其中一個是 pluck,可以從 Collection 中取出每個 Model 的某相同 key 的值的陣列。
例如上例中的 people 有三個 person,我們可以取出一個三個 person name 的 array:

people.pluck(“name");

結果是

["Joe", "Bob", "Jim"]

另外一個過濾方法是 where,可以藉由指定某種物件,找到 Collection 當中包含該物件的陣列。
假設我們有一個物件 friends:

透過 where:

var musketeers = friends.where({job: “Musketeer"});

我們可以得到 musketeers.length 的長度是3。

最後,是結合 RESTful web servcie 的操作,可以透過指定 url 屬性來對應到 RESTful API,例如:

上面這個例子的 People 會從 “/friends" 這個位置取得 JSON 資料,利用 guys.fetch() 就可以把資料讀進 Collection 裡面,而不必再另外 GET 資料並逐筆塞入 Collection,大大的簡化了存取或操作資料所需的瑣碎流程,是不是很棒呢?

Collection 是一個非常實用的 Backbone 物件,相信看完上面的例子之後,對於 Collection 的使用已經不再陌生。如果還想知道更多細節,歡迎參考官方說明文件,相信能讓您寫起 code 來如虎添翼!

留言

這個網誌中的熱門文章

c語言-關於#define用法

CMD常用網管指令

使用windows CMD 時間自動校正