首页 > 代码库 > Backbone Collection——数据模型集合

Backbone Collection——数据模型集合

2024-07-04 04:43:19   247人阅读

如果将一个Model对象比喻成数据库中的一条记录，那么Collection就是一张数据表。它表示为一个模型集合类，用于存储和管理一系列相同类型的模型对象。

1、创建集合
集合用于组织和管理多个模型，但它并不是必须的，如果你的某个模型对象是唯一的（单例），那么你没必要将它放到集合中。

我们来看一个创建集合的例子：

// 定义模型类
var Book = Backbone.Model.extend({
        defaults: {
                name: ‘‘
        }
});

// 定义集合类
var BookList = Backbone.Collection.extend({
        model: Book
});

// 创建一系列模型对象
var book1 = new Book({
        name: ‘Effective Java中文版(第2版)‘
});
var book2 = new Book({
        name: ‘JAVA核心技术卷II：高级特性（原书第8版）‘
});
var book3 = new Book({
        name: ‘精通Hibernate：Java对象持久化技术详解（第2版）‘
});

在这个例子中，我们定义了模型类Book和集合类BookList，然后创建了3个模型对象，并将它们放到一个集合对象中。（你可以在控制台输出books.models属性，用来查看集合中包含的模型对象列表）

我们为了创建3个Book模型对象，对Book类显式实例化了3次，其实Model本身已经提供了更简单的方法来复制一个模型，例如：

var book1 = new Book({
        name: ‘Effective Java中文版(第2版)‘
});

var book2 = book1.clone();
book2.set(‘name‘, ‘JAVA核心技术卷II：高级特性（原书第8版）‘);

var book3 = book1.clone();
book3.set(‘name‘, ‘精通Hibernate：Java对象持久化技术详解（第2版）‘);

在这段代码中，我们使用模型的clone()方法来复制一个和当前对象相同（包括数据）的新对象，这可以简化我们创建模型的流程。

在实例化集合对象时，除了可以向构造函数中添加已经创建好的模型列表（就像上面的例子那样），我们还可以直接传递模型数据，集合会自动将这些数据转换为模型对象，例如：

// 定义模型类
var Book = Backbone.Model.extend({
        defaults: {
                name: ‘‘
        }
});

// 定义集合类
var BookList = Backbone.Collection.extend({
        model: Book
});

var models = [{
        name: ‘Effective Java中文版(第2版)‘
},
{
        name: ‘JAVA核心技术卷II：高级特性（原书第8版）‘
},
{
        name: ‘精通Hibernate：Java对象持久化技术详解（第2版）‘
}];

// 创建集合对象
var books = new BookList(models);

运行这个例子，并在控制台输出books.models属性，你可以看到集合中存储的是Book模型类的实例，而并非我们在models数组中声明的原始数据。

这是因为我们在声明BookList集合类的时候，就已经设置了model属性，该属性指向集合中存储的模型对象的构造函数，当我们传递原始数据时，集合会自动创建model中定义的模型类，并将原始数据传递给它。
（如果你在定义集合类的时候没有设置model，那么集合会默认将原始数据转换为Backbone.Model类的实例）

我们之所以要使用extend来继承Backbone.Collection类，是因为我们希望定义一个自己的集合类，并向其中扩展更多的自定义方法。如果你的集合类仅仅是用于简单地存储和管理模型对象，且Backbone.Collection类所提供的方法已经可以满足你的要求，那么你可以直接实例化一个Backbone.Collection，同时也可以像上面一样实现原始数据和模型对象的自动转换，例如：

// 定义模型类
var Book = Backbone.Model.extend({
        defaults: {
                name: ‘‘
        }
});

var models = [{
        name: ‘Effective Java中文版(第2版)‘
},
{
        name: ‘JAVA核心技术卷II：高级特性（原书第8版）‘
},
{
        name: ‘精通Hibernate：Java对象持久化技术详解（第2版）‘
}];

// 创建集合对象
var books = new Backbone.Collection(models, {
        model: Book
});

在本例中，我们没有通过extend定义自己的集合类，而是直接实例化Collection类。我们依然传入了原始数据，但同时我们在构造函数的第2个参数（配置对象）中设置了model属性，Collection通过它就能知道要将原始数据转换为哪个模型类的实例。

2、向集合中添加模型
集合提供了3个方法允许我们动态地向集合中动态插入模型：

add()：向集合中的指定位置插入模型，如果没有指定位置，默认追加到集合尾部
push()：将模型追加到集合尾部（与add方法的实现相同）
unshift()：将模型插入到集合头部

这些方法很容易理解，但我们还是通过一个例子来说明：

// 定义模型类
var Book = Backbone.Model.extend({
        defaults: {
                name: ‘‘,
                price: 0
        }
});

// 创建集合对象
var books = new Backbone.Collection(null, {
        model: Book
});

books.add({
        name: ‘构建高性能Web站点‘,
        price: 56.30
});

books.push({
        name: ‘深入分析Java Web技术内幕‘,
        price: 51.80
});

books.unshift({
        name: ‘编写高质量代码:Web前端开发修炼之道‘,
        price: 36.80
});

books.push({
        name: ‘基于MVC的JavaScript Web富应用开发‘,
        price: 42.50
},
{
        at: 1
});

books.unshift({
        name: ‘RESTful Web Services Cookbook中文版‘,
        price: 44.30

},
{
        at: 2
});

// 在控制台输出集合中的模型列表
console.dir(books.models);

在例子中，我们通过3个方法向集合中添加了多个模型，最后，我们在控制台输出了集合中的模型列表。请仔细观察和分析我们调用的方法，以及最终列表中模型的排列顺序：
a、这些方法的作用和上面介绍的一样，用于将模型添加到集合中不同的位置，但当我们设置了at配置之后，它们就变得完全一样了，因为它们会忽略自身的规则，将模型插入到at所指向的位置。
b、当数据被成功添加到集合中时，集合会触发add事件，执行所有监听add事件的方法。除非我们在调用add()方法时设置了silent配置项，则会忽略事件的触发。

3、操作集合中的模型
在Underscore中，提供了许多对对象和数组集合进行操作的方法，这些方法已经被Backbone添加到Collection类的原型中。这意味着你可以使用Underscore中的集合方法来操作Collection集合中的数据，例如each()、map()、find()等方法。

但有一些方法我们还是要单独介绍它们，因为Collection对这些方法进行了重写，它们和Underscore中的同名方法不完全相同。（这也是为什么我要在上面单独介绍模型的添加方法）

删除模型：
集合类提供了3个方法用于从集合中移除模型对象，分别是：
remove()：从集合中移除一个或多个指定的模型对象
pop()：移除集合尾部的一个模型对象
shift()：移除集合头部的一个模型对象

这些方法与添加的方法是对应的，而且当模型被移除成功后，会触发集合对象的remove事件，除非你在移除时使用了silent配置。
这些方法很容易理解，但还是让我们通过一个简单的例子来说明：

// 定义模型类
var Book = Backbone.Model.extend({
        defaults: {
                name: ‘‘,
                price: 0
        }
});

// 定义初始化数据
var data =http://www.mamicode.com/ [{
        name: ‘构建高性能Web站点‘,
        price: 56.30
},
{
        name: ‘深入分析Java Web技术内幕‘,
        price: 51.80
},
{
        name: ‘编写高质量代码:Web前端开发修炼之道‘,
        price: 36.80
},
{
        name: ‘基于MVC的JavaScript Web富应用开发‘,
        price: 42.50
},
{
        name: ‘RESTful Web Services Cookbook中文版‘,
        price: 44.30

}]

// 创建集合对象
var books = new Backbone.Collection(data, {
        model: Book
});

books.remove(books.models[2]);
books.pop();
books.shift();

// 在控制台输出集合中的模型列表
console.dir(books.models);

在本例中，我们分别调用了remove()方法移除了集合中第2个模型，调用pop()方法移除了最后一个模型，调用shift()方法移除了第一个模型。最后我们在控制台输出集合中剩下的模型列表，请查看控制台输出结果，它和你想象的结果是一致的。

在集合中查找模型：
Collection定义了一系列用于快速从集合中查找我们想要的模型的方法，包括：

get()：根据模型的唯一标识（id）查找模型对象
getByCid()：根据模型的cid查找模型对象
at()：查找集合中指定位置的模型对象
where()：根据数据对集合的模型进行筛选

前面介绍数据模型时我们提到，每个模型对象都有一个唯一标识（id），它与数据库中记录的id保持同步。实际上，每个模型对象内部还会自动创建一个cid，它用来标识每一个模型（请注意将id和cid区分开，它们没有任何关系）。

集合对象提供了两个方法用于根据id和cid来查找模型对象，分别是get()方法和getByCid()方法，例如：

// 定义模型类
var Book = Backbone.Model.extend({
        defaults: {
                name: ‘‘,
                price: 0
        }
});

// 定义初始化数据
var data =http://www.mamicode.com/ [{
        id: 1001,
        name: ‘构建高性能Web站点‘,
        price: 56.30
},
{
        id: 1002,
        name: ‘深入分析Java Web技术内幕‘,
        price: 51.80
},
{
        id: 1003,
        name: ‘编写高质量代码:Web前端开发修炼之道‘,
        price: 36.80
},
{
        id: 1004,
        name: ‘基于MVC的JavaScript Web富应用开发‘,
        price: 42.50
},
{
        id: 1005,
        name: ‘RESTful Web Services Cookbook中文版‘,
        price: 44.30
}]

// 创建集合对象
var books = new Backbone.Collection(data, {
        model: Book
});

// 根据id和cid查找模型对象
var book1 = books.get(1001);
var book2 = books.getByCid(‘c2‘);

// 在控制台输出模型
console.dir(book1);
console.dir(book2);

本例中，我们从集合中根据模型的id和cid查找出2个模型对象，但实际开发中我们不会直接在代码中写出模型的id和cid。

id应该是从服务器接口进行同步获取到的。
cid应该是在之前已经记录下某个模型的cid，再根据它从集合中查找的。

at()方法根据我们给定的索引，从集合中查找对应位置的模型，我们在上面的例子中追加以下代码：
// 根据索引查找模型对象
var book3 = books.at(1);

// 在控制台输出模型
console.dir(book3);

最后，我们还可以通过where()方法，实现相对复杂的查找规则，例如：
// 根据price从集合中查找模型
var book4 = books.where({
price: 51.80
});

// 在控制台输出模型
console.dir(book4);
请查看控制台输出的结果：where()方法用于给定一个或多个数据，查找并返回集合中匹配数据的模型。该方法返回一个数组，因此能够包含一个或多个结果。

当我们调用get()、getByCid()和at()方法没有找到到匹配对象时，会返回undefined，而where()方法在没有找到匹配对象时会返回一个空数组。你可以使用Underscore中的isEmpty()方法检查返回值是否为空，因为它能检查到空数组和空对象。

4、自动排序
我们常常使用数组的sort()方法对元素进行排序，Underscore也提供了sortBy()方法实现更为复杂的集合排序。但在Backbone的集合对象中，为我们提供了集合元素的实时排序，当任何模型对象被插入到集合中时，都会按照预定的排序规则放到对应的位置。

// 定义模型类
var Book = Backbone.Model.extend({
        defaults: {
                name: ‘‘,
                price: 0
        }
});

// 创建集合对象
var books = new Backbone.Collection(null, {
        model: Book,
        comparator: function(m1, m2) {
                var price1 = m1.get(‘price‘);
                var price2 = m2.get(‘price‘);

                if (price1 > price2) {
                        return 1;
                } else {
                        return 0;
                }
        }
});

books.add({
        name: ‘构建高性能Web站点‘,
        price: 56.30
});

books.push({
        name: ‘深入分析Java Web技术内幕‘,
        price: 51.80
});

books.unshift({
        name: ‘编写高质量代码:Web前端开发修炼之道‘,
        price: 36.80
});


books.push({
        name: ‘基于MVC的JavaScript Web富应用开发‘,
        price: 42.50
},
{
        at: 1
});

books.unshift({
        name: ‘RESTful Web Services Cookbook中文版‘,
        price: 44.30

},
{
        at: 2
});

// 在控制台输出集合中的模型列表
console.dir(books.models);

这个例子和我们前面介绍添加方法时的例子相同，但集合中存储的模型顺序却不一样，因为我们在创建集合对象时设置了comparator方法。我们不需要手动调用该方法，因为它会在新模型被添加到集合中时自动被调用，并按照方法中定义的规则对集合中的数据进行重新排序。

comparator方法接收两个参数，表示临近的两个模型对象，你需要通过返回值表示它们的排序规则，这和JavaScript中原生的sort()方法是一样的。

当我们设置了comparator方法后，所有关于元素位置的方法和参数都会失效，例如push()、unshift()方法和at参数等。

需要注意的是：comparator方法在很多时候都是非常有用的（例如显示动态数据列表时），因为它能保证我们获取到的数据始终都是按规则排列的，但在集合中的数据量太多时，它可能会耗费很多的资源和事件来实时确保数据的排序规则。这时，你可以手动调用集合对象的sort()方法在需要的进行手动排序。
xxxxxxxxxxxxxx


联系
我们