Backbone.js中的集合详解


Posted in Javascript onJanuary 14, 2015

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的集合和其它组件的关系:

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的集合就有那么多的方法,掌握它们才能提高代码的质量。

Javascript 相关文章推荐
javascript中自定义对象的属性方法分享
Jul 12 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
Bootstrap 附加导航(Affix)插件实例详解
Jun 01 Javascript
Java  Spring 事务回滚详解
Oct 17 Javascript
微信小程序 配置文件详细介绍
Dec 14 Javascript
JS实现点击Radio动态更新table数据
Jul 18 Javascript
JavaScript判断浏览器和hack滚动条的写法
Jul 23 Javascript
微信小程序实现折叠面板
Jan 31 Javascript
简述JS控制台的使用
Jul 15 Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 Javascript
JavaScript格式化json和xml的方法示例
Jan 22 Javascript
vue实现购物车抛物线小球动画效果的方法详解
Feb 13 Javascript
jquery增加和删除元素的方法
Jan 14 #Javascript
Node.js开源应用框架HapiJS介绍
Jan 14 #Javascript
jQuery中Ajax的load方法详解
Jan 14 #Javascript
jquery获取当前日期的方法
Jan 14 #Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 #Javascript
jQuery 中DOM 操作详解
Jan 13 #Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
Jan 13 #Javascript
You might like
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
浅析application/x-www-form-urlencoded和multipart/form-data的区别
2014/06/22 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
PHP生成随机密码方法汇总
2015/08/27 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
使用Apache的rewrite
2021/03/09 Servers
JavaScript中使用replace结合正则实现replaceAll的效果
2010/06/04 Javascript
JavaScript获取多个数组的交集简单实例
2013/11/11 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/25 Javascript
深入理解angularjs过滤器
2016/05/25 Javascript
微信小程序 本地存储及登录页面处理实例详解
2017/01/11 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
webpack学习笔记之优化缓存、合并、懒加载
2017/08/24 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
2018/12/06 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
Python中字典(dict)和列表(list)的排序方法实例
2014/06/16 Python
python+opencv实现阈值分割
2018/12/26 Python
python 格式化输出百分号的方法
2019/01/20 Python
python函数局部变量、全局变量、递归知识点总结
2019/11/15 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
C#面试题问题集
2016/04/02 面试题
法院实习人员自我鉴定
2013/09/26 职场文书
最新的咖啡店创业计划书
2013/12/30 职场文书
工程业务员岗位职责
2013/12/31 职场文书
高二英语教学反思
2014/01/19 职场文书
公司授权委托书样本
2014/09/15 职场文书
2015年读书月活动总结
2015/03/26 职场文书
小学教师党员承诺书
2015/04/27 职场文书
青年志愿者服务活动总结
2015/05/06 职场文书
2015年保育员个人工作总结
2015/05/13 职场文书
运动会广播稿20字
2015/08/19 职场文书
古诗之感恩老师
2019/10/24 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS