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 來如虎添翼！