Backbone.js的集合详解(下)

简介: 《Backbone.js的集合详解(下)》 四、构造器与初始化 当我们创建一个集合时,我们可以传递模型的初始化数组。集合的比较器可以作为一个选项被加入。如果传递的比较器选项是false,那么会阻止排序。
《Backbone.js的集合详解(下)》

四、构造器与初始化

当我们创建一个集合时,我们可以传递模型的初始化数组。集合的比较器可以作为一个选项被加入。如果传递的比较器选项是false,那么会阻止排序。如果我们定义了一个初始化函数,那么此函数会在集合创建时被调用。下面说明了几个选项,如果提供了,会直接加到集合上:模型和比较器。

var tabs = new TabSet([tab1, tab2, tab3]);
var spaces = new Backbone.Collection([], {
  model: Space
});

五、toJSON
toJSO方法返回集合中包含哈每个模型哈希属性的数组。此方法通常用于对集合整体做序列化和持久化。
var song = new Backbone.Collection([
  {name: "Flatts"},
  {name: "OMC"},
  {name: "Jackson"}
]);
alert(JSON.stringify(song));

六、比较器Comparator
默认情况下,集合是不带比较器的。如果我们定义了一个比较器,它可以用于让集合维持某种排序。这意味着在添加模型时,模型会被插入到集合中适合的位置。比较器可以用sortBy定义,或以字符串的方式指示排序的属性。
sortBy比较器函数得到一个模型,并返回一个数字或字符串。
sort比较器函数得到两个模型,如果第一个模型先于第二个模型,那么返回-1;如果两个模型同级,那么返回0;如果第二个模型先于第一个模型,那么返回1。
下面我们来看看例子:
var student  = Backbone.Model;
var students = new Backbone.Collection;
students.comparator = 'name';
students.add(new student({name: "name1", roll: 9}));
students.add(new student({name: "name2", roll: 5}));
students.add(new student({name: "name3", roll: 1}));
alert(students.pluck('roll'));

待比较器的集合不会自动重排序,即使我们修改了模型的属性。因此我们应该在修改了模型属性后估计会影响到排序时,调用排序。

七、排序
当集合中添加模型时,应强制集合进行重新排序。当集合添加模型时要禁用排序,可以传递{sort: false}参数。调用排序的触发器会检查此参数。
sortByType: function(type) {
  this.sortKey = type;
  this.sort();
}

以及视图函数:
sortThingsByColumn: function(event) {
  var type = event.currentTarget.classList[0]
  this.collections.things.sortByType(type)
  this.render()
}

八、采摘
Pluck:从集合中的每个模型采摘一个属性,这等同于从迭代器调用Map并返回单一属性。
var song = new Backbone.Collection([
  {name: "Flatts"},
  {name: "OMC"},
  {name: "Jackson"}
]);
var names = songs.pluck("name");
alert(JSON.stringify(names));

九、Where
where:返回集合中所有匹配传递的属性的模型的数组,使用了过滤器。
var song = new Backbone.Collection([
  {name: "Yes I Do",      artist: "Flatts"},
  {name: "How Bizarre",    artist: "How Bizarre"},
  {name: "What Hurts the Most",     artist: "Flatts"},
  ]);
var artists = song.where({artist: "Flatts"});
alert(artists.length);

十、URL
在集合中设置URL属性,会引用服务器的位置。集合内的模型会使用此URL来构造自己的URL。
var Songs = Backbone.Collection.extend({
  url: '/songs'
});
var Songs = Backbone.Collection.extend({
  url: function() {
    return this.document.url() + '/songs';
  }
});

十一、解析
Parse:在提取fetch时被Backbone调用,无论服务器是否返回集合的模型。此函数会传递原始的响应对象,他应该返回被添加到集合的模型属性的数组。默认的实现是空操作no-op。简单的通过JSON响应传递,用先前存在的API覆盖此操作,或更好的命名空间响应。
var songs = Backbone.Collection.extend({
    parse: function(response) {
    return response.results;
  }
});

十二、提取
Fetch:从服务器提取集合默认的模型集,当取回后在集合中设置它们。此选项哈希接受success或错误回调,他传递(集合、响应、选项)三个参数。然后从服务器返回模型数据。它用于设置合并提取的模型。
Backbone.sync = function(method, model) {
  alert(method + ": " + model.url);
};
var songs = new Backbone.Collection;
songs.url = '/songs';
songs.fetch();

正如上面所看到的,仅仅是Backbone的集合就有那么多的方法,掌握它们才能提高代码的质量。



目录
相关文章
|
6月前
|
资源调度 JavaScript 前端开发
Day.js常用方法集合
Day.js常用方法集合
209 0
|
6月前
|
JavaScript 前端开发 定位技术
JavaScript 中如何代理 Set(集合) 和 Map(映射)
JavaScript 中如何代理 Set(集合) 和 Map(映射)
106 0
|
5月前
|
存储 JavaScript 前端开发
JavaScript进阶-Map与Set集合
【6月更文挑战第20天】JavaScript的ES6引入了`Map`和`Set`,它们是高效处理集合数据的工具。`Map`允许任何类型的键,提供唯一键值对;`Set`存储唯一值。使用`Map`时,注意键可以非字符串,用`has`检查键存在。`Set`常用于数组去重,如`[...new Set(array)]`。了解它们的高级应用,如结构转换和高效查询,能提升代码质量。别忘了`WeakMap`用于弱引用键,防止内存泄漏。实践使用以加深理解。
77 3
|
2月前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 集合(Collection)
JavaScript HTML DOM 集合(Collection)
28 4
|
4月前
|
JavaScript API 索引
JS【详解】Set 集合 (含 Set 集合和 Array 数组的区别,Set 的 API,Set 与 Array 的性能对比,Set 的应用场景)
JS【详解】Set 集合 (含 Set 集合和 Array 数组的区别,Set 的 API,Set 与 Array 的性能对比,Set 的应用场景)
64 0
|
4月前
|
存储 缓存 JavaScript
浅谈JS的映射和集合
浅谈JS的映射和集合
30 0
|
前端开发
前端学习笔记202306学习笔记第三十六天-js-对象是属性的无序集合1
前端学习笔记202306学习笔记第三十六天-js-对象是属性的无序集合1
50 0
|
6月前
|
缓存 JavaScript 前端开发
从0开始学习JavaScript--JavaScript中的集合类
JavaScript中的集合类是处理数据的关键,涵盖了数组、Set、Map等多种数据结构。本文将深入研究这些集合类的创建、操作,以及实际应用场景,并通过丰富的示例代码,帮助大家更全面地了解和应用这些概念。
|
11月前
|
存储 JavaScript 前端开发