Backbone系列：Collection的学习

本章通过Collection与View的配合，渲染出多个view

在线demo：Collection的学习

构建一个Model类

首先我们需要构建一个Model类，可以有对应的默认属性

var Book = Backbone.Model.extend({
    defaluts: {
        name: '名字',
        rank: '排名',
        price: '价格'
    }
});

再构建一个Collection类

通过定义Collection中的model，来指定集合中包含的模型类。然后在实例化的时候传入一组model即可

var Books = Backbone.Collection.extend({
    model: Book,
});
var book1 = new Book({name: '高程', rank: 2, price: 10});
var book2 = new Book({name: '权威', rank: 1, price: 20});
var book3 = new Book({name: '精粹', rank: 3, price: 5});

var books = new Books([book1, book2, book3]);

如果我们希望Collection中的Model是有序的，可以通过定义Collection的comparator属性来排序

var Books = Backbone.Collection.extend({
    model: Book,
    // comparator为对象属性，就会根据该属性为model排序
    comparator: 'rank'
});
var book1 = new Book({name: '高程', rank: 2, price: 10});
var book2 = new Book({name: '权威', rank: 1, price: 20});
var book3 = new Book({name: '精粹', rank: 3, price: 5});

var books = new Books([book1, book2, book3]);

定义View类

在View类中定义关联的集合的实例，并且通过toJSON()方法获得model对象（比自定义对象，再定义属性方便）。最后实例化View类

var View = Backbone.View.extend({
    el: $('.list'),
    // 在collection属性中指定集合的实例books，注意是实例不是类
    collection: books,
    initialize: function() {
        this.render();
    },
    render: function() {
        var template = _.template($('.template').html());
        // Collection里的underScore对应的方法，更便利
        // 用each遍历Collection中的model
        this.collection.each(function(book) {
            // Model.toJSON()返回的是浅拷贝的对象，而不是JSON
            // 用toJSON()能直接传入对象，更方便
            this.$el.append(template(book.toJSON()));
        }, this);
    }
});
var view = new View();

总结：

1. Collection类的comparator属性能指定其Model的排序
2. 通过在View中定义或传递collection属性，值为集合的实例来关联
3. model.toJSON()方法更快捷的获得model的所有属性