Backbone.js中的集合详解_其它

Backbone.js的集合只是一个简单的有序集的模型。通过适应模型和集合,我们可以避免数据处理逻辑放到了我们的视图层。此外,模型和集合还提供了便利的与后端一起工作的方法,当数据发生变化时,可以自动化地标记Backbone.js视图。这样,它可以用于如下的情况:

复制代码 代码如下:

Model: Animal, Collection: Zoo

通常情况下你的集合只适应一种模型,但模型本身并不局限于集合的类型。

复制代码 代码如下:

Model: person, Collection: Office
Model: person, Collection: Home

下面是常见的模型/集合的例子:

复制代码 代码如下:

var Music = Backbone.Model.extend({
      initialize: function(){
          console.log("Welcome to the music world");
      }
});
var Album = Backbone.Collection.extend({
    model: Music
});

上面的代码告诉我们如何创建集合。但是它没有告诉我们用数据操纵集合的过程。因此,让我们探索这个过程:

复制代码 代码如下:

var Music = Backbone.Model.extend({
        defaults: {
            name: "Not specified",
            artist: "Not specified"
        },
        initialize: function(){
            console.log("Welcome to the music world ");    }
    });
    var Album = Backbone.Collection.extend({
        model: Music
    });
    var music1 = new Music ({ id: 1 ,name: "How Bizarre", artist: "OMC" });
    var music 2 = new Music ({id: 2,  name: "What Hurts the Most", artist: “Rascal Flatts" });
    var myAlbum = new Album([music 1, music 2]);
    console.log( myAlbum.models );

下面我们来看看Backbone.js的集合和其它组件的关系:

一、添加模型到集合

正如我们所知的那样,集合是模型的集合。因此,我们可以在集合上添加模型。要添加模型到集合,我们可以使用add方法。我们还可以添加模型到集合的开始——通过使用unshift方法。

复制代码 代码如下:

var music3 = new Music({ id: 3, name: "Yes I Do",artist:“Rascal Flatts"  });
Music.add(music3);
console.log('New Song Added');
console.log(JSON.stringify(Music));

二、从集合中移除模型

很多时候,我们会有从集合中移除一些指定的数据这样的需求。要从集合中移除模型,我们需要提供模型的id。如果我们想用一个完整的新数据集替换原集合,我们可以使用reset方法。

复制代码 代码如下:

Music.remove(1);
console.log('How Bizarre removed...');
console.log(JSON.stringify(Music));

三、Get和Set

如果我们需要从代码其它地方的集合中获取一个值,那么可以直接使用get方法。此时,我们向带检索的模型传递ID值。

复制代码 代码如下:

console.log(JSON.stringify(Music.get(2)));

集合的set方法有一个有趣的实现。set方法通过传递模型列表,执行集合的“智能”更新。如果列表中的模型还不在集合中,那么会添加到集合。如果模型已经在集合中,那么它的属性会被合并。如果集合包含了不属于列表的任意模型,那么这项模型会被移除。

复制代码 代码如下:

var Music = Backbone.Model.extend({
        // This attribute should be set as a default
        defaults: {
            Name: ''
        },
        // Set the id attribute so that the collection        
        idAttribute: 'id'
    });
    var song = Backbone.Collection.extend({
        model: Music
    });
    var models = [{
        Name: 'OMC',
        id: 1
    }, {
        Name: 'Flatts',
        id: 2
    }];
    var collection = new song(models);
    collection.bind('add', function (model) {
        alert('addb')
    });
    collection.bind('remove', function () {
        alert('add')
    });
    models = [{
        Name: 'OMC',
        id :1
    }, {
        Name: 'Flatts',
        id: 2
    }, {
        Name: ' Jackson ',
        id: 3
    }];
    collection.add(models);
});

正如我们在上面所看到的那样,事前我们已经有2个模型了,当我们添加第3个模型时,早先的模型保持不变。

四、构造器与初始化

当我们创建一个集合时,我们可以传递模型的初始化数组。集合的比较器可以作为一个选项被加入。如果传递的比较器选项是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的集合就有那么多的方法,掌握它们才能提高代码的质量。

时间: 2024-08-03 16:27:14

Backbone.js中的集合详解_其它的相关文章

js正则表达式常用函数详解_正则表达式

一.js正则表达式之replace函数用法: 函数功能:replace函数返回根据正则表达式进行文字替换后的字符串的复制. 函数格式:stringObj.replace(rgExp, replaceText) 参数:字符串stringObj,rgExp正则表达式,replaceText所替换的内容 本模块涉及的内容包括字符串创建,正则表达式隐式创建对象,创建正则表达式,进行replace方法的使用匹配 示例代码: <html> <script language="javascr

比较全面的C 、Java、JavaScript中的正则表达式详解_正则表达式

什么是正则表达式? 正则表达式(Regular Expression) 就是用某种模式去匹配一类字符串的公式.如你要在一篇文章中查找第一个字是"罗"最后一个字是"浩"的三个字的姓名,即"罗 * 浩":那么"罗 * 浩"就是公式,也称作 模式(Pattern) ,这篇文章就是 要匹配的串( 或叫文本 text) .再如,你要检查输入的一个字符串是否是 126 邮箱的格式,你得制定一个规则去查检,这种规则就是正则表达式. 从入门开

前端框架Vue.js中Directive知识详解_javascript技巧

Directive 看上去虽然和Angular中的定义类似,Directive 都是对DOM功能的一种拓展,但是 Vue 的 Directive 要弱的多.因为 Vue Component 其实本来就会包含对DOM的操作,所以大多数时候我们写一个通用组件都是一个Component 而不是一个 Directive,而 在 Angular 我们写一个通用的组件一般都是一个 Directive . 所以我说 Vue 的 Directive 相比于 Angular 要弱的多,也可以说纯粹的多,他就是对

javascript中this指向详解_基础知识

JavaScript 是一种脚本语言,支持函数式编程.闭包.基于原型的继承等高级功能.JavaScript一开始看起来感觉会很容易入门,但是随着使用的深入,你会发JavaScript其实很难掌握,有些基本概念让人匪夷所思.其中JavaScript 中的 this 关键字,就是一个比较容易混乱的概念,在不同的场景下,this会化身不同的对象.有一种观点认为,只有正确掌握了 JavaScript 中的 this 关键字,才算是迈入了 JavaScript 这门语言的门槛.在主流的面向对象的语言中(例

javascript中new关键字详解_基础知识

和其他高级语言一样javascript中也有new关键字,我们以前认知的new是用来创建一个类的实例对象,但在js中万物皆是对象,为何还要new关键字呢,其实js中new关键字不是用来创建一个类的实例对象,而是用于继承. 接下来,本文将带你一起来探索JS中new的奥秘... function Animal(name){ this.name = name; } Animal.color = "black"; Animal.prototype.say = function(){ conso

node.js中watch机制详解_node.js

几乎所有构建系统都选择使用watch机制来解决开发过程中需要反复生成构建后文件的问题,但在watch机制下,长期以来我们必须忍受修改完代码,保存完代码必须喝口茶才能刷新看看效果的问题.在这里我们尝试探讨为什么watch不是银弹,并尝试寻找一种更好的方案来解决这个问题. watch基于的事实 当一个文件修改,我们能知道其修改可能导致的文件修改,那么重新构建这些文件即可. 通常对于文件A,构建成文件B这种场景,这种对应关系是极好确定的.但现实场景下,构建过程往往不是那么简单.例如: 文件A + 文件

js闭包的用途详解_基础知识

我们来看看闭包的用途.事实上,通过使用闭包,我们可以做很多事情.比如模拟面向对象的代码风格:更优雅,更简洁的表达出代码:在某些方面提升代码的执行效率. 1 匿名自执行函数 我们知道所有的变量,如果不加上var关键字,则默认的会添加到全局对象的属性上去,这样的临时变量加入全局对象有很多坏处, 比如:别的函数可能误用这些变量:造成全局对象过于庞大,影响访问速度(因为变量的取值是需要从原型链上遍历的). 除了每次使用变量都是用var关键字外,我们在实际情况下经常遇到这样一种情况,即有的函数只需要执行一

JScript中正则表达式用法详解_正则表达式

呵呵,先罗嗦几句,去年用C#做了一个语法高亮的小东西,根据配制文件中的信息把所给代码格式化成HTML,使它能在网页上显示出和编辑器里一样的语法元素高亮的效果以及支持代码折叠.没错,就是和博客园上看到的类似啦.因为我当时使用的是MSN Space,它没有提供这项功能,只好自己写一个咯.     我使用的是C#进行编写,起初使用的是超级繁琐的for,while,switch,if等基本语句来判断关键字等等,大家莫笑话,本人愚笨当时还不知道正则表达式是何物,所以只能用这种土办法了,当然土办法还是有效果

一步步教你读懂NET中IL(图文详解)_实用技巧

接触NET也有1年左右的时间了,NET的内部实现对我产生了很大的吸引力.个人觉得:能对这些底部的实现进行了解和熟练的话,对以后自己写代码是有很大帮助的,好了,废话不多说,请看下边: .NET CLR 和 Java VM 都是堆叠式虚拟机器(Stack-Based VM),也就是說,它們的指令集(Instruction Set)都是採用堆叠运算的方式:执行时的资料都是先放在堆叠中,再进行运算.JavaVM 有約 200 個指令(Instruction),每個指令都是 1 byte 的 opcode