本章通过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();
总结:
- Collection类的comparator属性能指定其Model的排序
- 通过在View中定义或传递collection属性,值为集合的实例来关联
- model.toJSON()方法更快捷的获得model的所有属性