第三章 Backbonejs中的Collections實踐 · Backbone.js入門教程第二版

上一節介紹了model的使用，model算是對現實中某一物體的抽象，比如你可以定義一本書的model，具有書名（title）還有書頁（page_num)等屬性。僅僅用一個Model是不足以呈現現實世界的內容，因此基于Model，這節我們來看collection。collection是model對象的一個有序的集合，也可以理解為是model的容器。概念理解起來十分簡單，在通過幾個例子來看一下，會覺得更容易理解。 ## 3.1 關于book和bookshelf的例子 ~~~ var Book = Backbone.Model.extend({ defaults : { title:'default' }, initialize: function(){ //alert('Hey, you create me!'); } }); var BookShelf = Backbone.Collection.extend({ model : Book }); var book1 = new Book({title : 'book1'}); var book2 = new Book({title : 'book2'}); var book3 = new Book({title : 'book3'}); //注意這里面是數組,或者使用add //var bookShelf = new BookShelf([book1, book2, book3]); var bookShelf = new BookShelf; bookShelf.add(book1); bookShelf.add(book2); bookShelf.add(book3); bookShelf.remove(book3); //基于underscore這個js庫，還可以使用each的方法獲取collection中的數據 bookShelf.each(function(book){ alert(book.get('title')); }); ~~~ 很容易理解吧。 ## 3.2 使用fetch從服務器端獲取數據首先要在上面的的Bookshelf中定義url，注意collection中并沒有urlRoot這個屬性。或者你直接在fetch方法中定義url的值，如下： ~~~ //注意這里 bookShelf.url = '/books/'; bookShelf.fetch({ success:function(collection, response, options){ collection.each(function(book){ alert(book.get('title')); }); },error:function(collection, response, options){ alert('error'); } }); ~~~ 其中也定義了兩個接受返回值的方法，具體含義我想很容易理解，返回正確格式(json)的數據，就會調用success方法，錯誤格式的數據就會調用error方法，當然error方法也看添加和success方法一樣的形參。對應的BookShelf的返回格式如下：[{'title':'book0'},{'title':'book1'}.....] ## 3.3 reset方法使用這個方法的時候是要和上面的fetch進行配合的，collection在fetch到數據之后，默認情況會調用set方法(set方法向collection里面添加新model，如果該model之前存在則會合并，與此同時會觸發collection的add事件)，可以通過參數{reset: true}來手動觸發reset，reset會整個清空collection重新添加所有model。這時你就需要在collection中定義reset方法或者是綁定reset方法。這里使用綁定演示： ~~~ var showAllBooks = function(){ bookShelf.each(function(book){ //將book數據渲染到頁面的操作。 document.writeln(book.get('title')); }); } bookShelf.bind('reset',showAllBooks); bookShelf.url = '/books/'; //注意這里 bookShelf.fetch({ // 需要主動傳遞reset，才會觸發reset reset: true, success:function(collection, response, options){ collection.each(function(book){ alert(book.get('title')); }); },error:function(collection, response, options){ alert('error'); } }); ~~~ 綁定的步驟要在fetch之前進行。 ## 3.4 發送數據到Server端創建數據，其實就是調用collection的create方法，POST對應的Model對象（json數據）到配置好的url上。之后會返回一個model的實例，如下面代碼中的onebook。 ~~~ var NewBooks = Backbone.Collection.extend({ model: Book, url: '/books/' }); var books = new NewBooks; var onebook = books.create({ title: "I'm coming", }); ~~~ 完整代碼可以在?[code](https://github.com/the5fire/backbonejs-learning-note/blob/master/code)?中找到, 服務器端的代碼后面會介紹。