認識Backbone (三)

 　　Backbone.Collection（集合）

　　 collection是model對象的一個有序的組合，咱們能夠在集合上綁定 "change" 事件，從而當集合中的模型發生變化時fetch（得到）通知，集合也能夠監聽 "add" 和 "remove" 事件， 從服務器更新，並能使用 Underscore.js 提供的方法。

　　建立集合

//自定義集合對象
var Book = Backbone.Model.extend({
    defaults:{
        title: 'backbone',
        author: 'Jeremy Ashkenas'
    }
})
var Books = Backbone.Collection.extend({
    model: Book
})
var booklist = [
    {title:'ios',author:'apple'},
    {title:'android',author:'google'},
    {title:'Windows Phone',author:'microsoft'}
]
//自定義
var books = new Books(booklist)
//遍歷集合中的模型
books.each(function(book){
    console.log( book.toJSON() )
    //console.log(book.get('title') +' / '+ book.get('author'))
})

//實例化集合對象
var Book = Backbone.Model.extend({
    defaults:{
        title: 'backbone',
        author: 'Jeremy Ashkenas'
    }
})
var booklist = [
    {title:'ios',author:'apple'},
    {title:'android',author:'google'},
    {title:'Windows Phone',author:'microsoft'}
]
//實例化
var books = new Backbone.Collection(booklist,{
    model: Book
})
//遍歷集合中的模型
books.each(function(book){
    console.log( book.toJSON() )
})

 　　操做集合

 　　移除集合中的模型

　　 remove collection.remove(models, [options]) 從集合中刪除一個模型（或一個模型數組），而且返回他們。會觸發 "remove" 事件，一樣可使用 silent 關閉。移除前該模型的index可用做options.index類監聽。

　　 pop collection.pop([options]) 刪除而且返回集合中最後一個模型。

　　 shift collection.shift([options]) 刪除而且返回集合中第一個模型。

var Book = Backbone.Model.extend({
    defaults:{
        title: 'backbone',
        author: 'Jeremy Ashkenas'
    }
})
var booklist = [
    {title:'ios',author:'apple'},
    {title:'android',author:'google'},
    {title:'Windows Phone',author:'microsoft'}
]
var books = new Backbone.Collection(booklist,{
    model: Book
})

books.shift() //刪除第1個模型
//books.remove(books.models[0])
books.pop() //刪除徐最後1個模型

books.each(function(book){
    console.log( book.toJSON() )
})

 　　添加模型到集合中

 　　add collection.add(models, [options]) 向集合中增長一個模型（或一個模型數組），觸發"add"事件。  若是已經定義了model屬性， 您也能夠經過原始屬性的對象讓其看起來像一個模型實例。 返回已經添加的（或預先存在的，若是重複）模式。  傳遞{at: index}能夠將模型插入集合中特定的index索引位置。 若是您要添加 集合中已經存在的模型 到集合，他們會被忽略， 除非你傳遞{merge: true}， 在這種狀況下，它們的屬性將被合併到相應的模型中， 觸發任何適當的"change" 事件。

　　 push collection.push(model, [options]) 在集合尾部添加一個模型。

　　 unshift collection.unshift(model, [options]) 在集合頭部添加一個模型。

var Book = Backbone.Model.extend({
    defaults:{
        title: 'backbone',
        author: 'Jeremy Ashkenas'
    }
})
var booklist = [
    {title:'ios',author:'apple'},
    {title:'android',author:'google'},
    {title:'Windows Phone',author:'microsoft'}
]
var books = new Backbone.Collection(booklist,{
    model: Book
})

books.add({title: 'Java', author: 'xxx'}) //添加1個模型 默認尾部
books.push({title: 'C++', author: 'ccc'}) //添加1個模型到尾部 
books.unshift({title: 'PHP', author: 'ppp'}) //添加1個模型到頭部 

books.each(function(book){
    console.log( book.toJSON() )
})

 　　查找集合中的模型

 　　get collection.get(id) 經過一個id，一個cid，或者傳遞一個model來 得到集合中 的模型。

　　 at collection.at(index) 得到集合中指定索引的模型。不論你是否對模型進行了從新排序， at 始終返回其在集合中插入時的索引值。

　　 where collection.where(attributes) 返回集合中全部匹配所傳遞 attributes（屬性）的模型數組。 對於簡單的filter（過濾）比較有用。

　　 findWhere collection.findWhere(attributes) 就像where， 不一樣的是findWhere直接返回匹配所傳遞 attributes（屬性）的第一個模型。

var Book = Backbone.Model.extend({
    defaults:{
        code: 0,
        title: 'backbone',
        author: 'Jeremy Ashkenas'
    },
    idAttribute: 'code'
})
var booklist = [
    {code:1,title:'ios',author:'apple'},
    {code:2,title:'android',author:'google'},
    {code:3,title:'Windows Phone',author:'microsoft'}
]
var books = new Backbone.Collection(booklist,{
    model: Book
})

//books.at(2) 

console.log( books.get(1).toJSON()  )  //Object {code: 1, title: "ios", author: "apple"}
console.log( books.at(1).toJSON()  )  //Object {code: 2, title: "android", author: "google"}
_.each( books.where({title:'Windows Phone'}),function(book){
    console.log( book.toJSON() ) 
})   //Object {code: 3, title: "Windows Phone", author: "microsoft"}
console.log( books.findWhere({title:'Windows Phone'}).toJSON() ) //Object {code: 3, title: "Windows Phone", author: "microsoft"}

 　　集合中模型的排序

 　　sort collection.sort([options]) 強制對集合進行重排序。通常狀況下不須要調用本函數，由於當一個模型被添加時，comparator 函數會實時排序。要禁用添加模型時的排序，能夠傳遞{sort: false}給add。 調用sort會觸發的集合的"sort"事件。

　　 comparator collection.comparator 默認狀況下，集合沒有聲明 comparator 函數。若是定義了該函數，集合中的模型會按照指定的算法進行排序。

var Book = Backbone.Model.extend({
    defaults:{
        code: 0,
        title: 'backbone',
        author: 'Jeremy Ashkenas'
    }
})
var booklist = [
    {code:7,title:'ios',author:'apple'},
    {code:5,title:'android',author:'google'},
    {code:6,title:'Windows Phone',author:'microsoft'}
]
var books = new Backbone.Collection(booklist,{
    model: Book,
    comparator: function(a,b){
        return a.get('code') > b.get('code') ? 1 : 0; //升序
        //return a.get('code') > b.get('code') ? 0 : 1; //降序
    }
})
books.sort()
books.each(function(book){
    console.log( book.toJSON() )
})
// Object {code: 5, title: "android", author: "google"}
// Object {code: 6, title: "Windows Phone", author: "microsoft"}
// Object {code: 7, title: "ios", author: "apple"} 

　　與服務器交互 　　

　　獲取服務器數據

　　fetch collection.fetch([options]) 從服務器拉取集合的默認模型設置 ，成功接收數據後會setting（設置）集合。

var Book = Backbone.Model.extend({
    defaults:{
        code: 0,
        title: 'backbone',
        author: 'Jeremy Ashkenas'
    }
})
var Books = Backbone.Collection.extend({
    url: 'backbone-test.php',
    model: Book,
    initialize: function(){
        //reset事件觸發
        this.on('reset',function(render){
            _.each(render.models,function(book){
                console.log( book.toJSON() )
            })
        })
    }
})
var books = new Books()
books.fetch({
    reset: true,
    success: function(collection, response){
        _.each(collection.models,function(book){
            console.log( book.toJSON() )
        })
    }
})

//php文件
$json = array(
    array('code'=> 1,'title'=> 'ios','author'=>'apple'),  
    array('code'=> 2,'title'=> 'android','author'=>'android'),  
    array('code'=> 3,'title'=> 'windows phone','author'=>'microsoft')
);
echo json_encode($json);

　　同步服務器數據

　　create collection.create(attributes, [options]) 方便的在集合中建立一個模型的新實例。 至關於使用屬性哈希（鍵值對象）實例化一個模型， 而後將該模型保存到服務器， 建立成功後將模型添加到集合中， 返回這個新模型。 

var Book = Backbone.Model.extend({
    defaults:{
        code: 0,
        title: 'backbone',
        author: 'Jeremy Ashkenas'
    }
})
var Books = Backbone.Collection.extend({
    url: 'backbone-test.php',
    model: Book,
    initialize: function(){
        this.on('add',function(model,response){
            console.log( model.toJSON() ) //Object {title: "ios", author: "apple", code: 0}
        })    
    }
})
var books = new Books()
books.create({title: "ios", author: "apple"})

//php文件

//設置接收數據的格式
header('Content-Type: application/json; charset=utf-8'); 
//獲取客戶端發送來的數據   
$data = json_decode(file_get_contents("php://input"));
/* 獲取各個屬性值，保存至服務器中 */
//返回更新成功的標誌
echo json_encode(array('code'=>'2'));