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 相关文章推荐
js中将URL中的参数提取出来作为对象的实现代码
Aug 16 Javascript
iScroll中事件点击触发两次解决方案
Mar 11 Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
Oct 29 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
May 07 Javascript
Vue实现表格中对数据进行转换、处理的方法
Sep 06 Javascript
Vue异步组件处理路由组件加载状态的解决方案
Sep 07 Javascript
vue props传值失败 输出undefined的解决方法
Sep 11 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
Sep 27 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
Apr 10 Javascript
关于Vue中axios的封装实例详解
Oct 20 Javascript
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
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
adodb与adodb_lite之比较
2006/12/31 PHP
MySql中正则表达式的使用方法描述
2008/07/30 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
php时间戳转换代码详解
2019/08/04 PHP
js 操作select和option常用代码整理
2012/12/13 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
2015/05/06 Javascript
JS中递归函数
2016/06/17 Javascript
基于JS+Canves实现点击按钮水波纹效果
2016/09/15 Javascript
使用JSON作为函数的参数的优缺点
2016/10/27 Javascript
jQuery插件form-validation-engine正则表达式操作示例
2017/02/09 Javascript
浅谈Vue 数据响应式原理
2018/05/07 Javascript
jQuery选择器之层次选择器用法实例分析
2019/02/19 jQuery
详解Vue3 Composition API中的提取和重用逻辑
2020/04/29 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
[37:37]DAC2018 4.4 淘汰赛 Optic vs Mineski 第二场
2018/04/05 DOTA
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
Python制作数据导入导出工具
2015/07/31 Python
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
Python中异常重试的解决方案详解
2017/05/05 Python
Python编写一个闹钟功能
2017/07/11 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
解决django中form表单设置action后无法回到原页面的问题
2020/03/13 Python
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
2013/04/24 HTML / CSS
英国口碑最好的的维他命胶囊品牌:Myvitamins(有中文站)
2016/12/03 全球购物
PHP开发的一般流程
2013/08/13 面试题
励志演讲稿500字
2014/08/21 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
教学质量月活动总结
2015/05/11 职场文书
2015年高校教师个人工作总结
2015/05/25 职场文书
法律意见书范文
2015/06/04 职场文书
诚信教育主题班会
2015/08/13 职场文书
Vue3.0中Ref与Reactive的区别示例详析
2021/07/07 Vue.js
windows11怎么查看自己安装的版本号? win11版本号的查看方法
2021/11/21 数码科技
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL