Backbone.Collection(集合)

   collection是model对象的一个有序的组合,我们可以在集合上绑定 "change" 事件,从而当集合中的模型发生变化时fetch(获得)通知,集合也可以监听 "add" 和 "remove" 事件, 从服务器更新,并能使用 Underscore.js 提供的方法。

  创建集合

//自定义集合对象
var Book = Backbone.Model.extend({
defaults:{
title: 'backbone',
author: 'Jeremy Ashkenas'
}
})
var Books = Backbone.Collection.extend({
model: Book
})
var booklist = [
{title:'ios',author:'apple'},
{title:'android',author:'google'},
{title:'Windows Phone',author:'microsoft'}
]
//自定义
var books = new Books(booklist)
//遍历集合中的模型
books.each(function(book){
console.log( book.toJSON() )
//console.log(book.get('title') +' / '+ book.get('author'))
}) //实例化集合对象
var Book = Backbone.Model.extend({
defaults:{
title: 'backbone',
author: 'Jeremy Ashkenas'
}
})
var booklist = [
{title:'ios',author:'apple'},
{title:'android',author:'google'},
{title:'Windows Phone',author:'microsoft'}
]
//实例化
var books = new Backbone.Collection(booklist,{
model: Book
})
//遍历集合中的模型
books.each(function(book){
console.log( book.toJSON() )
})

  操作集合

  移除集合中的模型

   remove collection.remove(models, [options]) 从集合中删除一个模型(或一个模型数组),并且返回他们。会触发 "remove" 事件,同样可以使用 silent 关闭。移除前该模型的index可用作options.index类监听。

   pop collection.pop([options]) 删除并且返回集合中最后一个模型。

   shift collection.shift([options]) 删除并且返回集合中第一个模型。

var Book = Backbone.Model.extend({
defaults:{
title: 'backbone',
author: 'Jeremy Ashkenas'
}
})
var booklist = [
{title:'ios',author:'apple'},
{title:'android',author:'google'},
{title:'Windows Phone',author:'microsoft'}
]
var books = new Backbone.Collection(booklist,{
model: Book
}) books.shift() //删除第1个模型
//books.remove(books.models[0])
books.pop() //删除徐最后1个模型 books.each(function(book){
console.log( book.toJSON() )
})

  添加模型到集合中

  add collection.add(models, [options]) 向集合中增加一个模型(或一个模型数组),触发"add"事件。  如果已经定义了model属性, 您也可以通过原始属性的对象让其看起来像一个模型实例。 返回已经添加的(或预先存在的,如果重复)模式。  传递{at: index}可以将模型插入集合中特定的index索引位置。 如果您要添加 集合中已经存在的模型 到集合,他们会被忽略, 除非你传递{merge: true}, 在这种情况下,它们的属性将被合并到相应的模型中, 触发任何适当的"change" 事件。

   push collection.push(model, [options]) 在集合尾部添加一个模型。

   unshift collection.unshift(model, [options]) 在集合头部添加一个模型。

var Book = Backbone.Model.extend({
defaults:{
title: 'backbone',
author: 'Jeremy Ashkenas'
}
})
var booklist = [
{title:'ios',author:'apple'},
{title:'android',author:'google'},
{title:'Windows Phone',author:'microsoft'}
]
var books = new Backbone.Collection(booklist,{
model: Book
}) books.add({title: 'Java', author: 'xxx'}) //添加1个模型 默认尾部
books.push({title: 'C++', author: 'ccc'}) //添加1个模型到尾部
books.unshift({title: 'PHP', author: 'ppp'}) //添加1个模型到头部 books.each(function(book){
console.log( book.toJSON() )
})

  查找集合中的模型

  get collection.get(id) 通过一个id,一个cid,或者传递一个model来 获得集合中 的模型。

   at collection.at(index) 获得集合中指定索引的模型。不论你是否对模型进行了重新排序, at 始终返回其在集合中插入时的索引值。

   where collection.where(attributes) 返回集合中所有匹配所传递 attributes(属性)的模型数组。 对于简单的filter(过滤)比较有用。

   findWhere collection.findWhere(attributes) 就像where, 不同的是findWhere直接返回匹配所传递 attributes(属性)的第一个模型。

var Book = Backbone.Model.extend({
defaults:{
code: 0,
title: 'backbone',
author: 'Jeremy Ashkenas'
},
idAttribute: 'code'
})
var booklist = [
{code:1,title:'ios',author:'apple'},
{code:2,title:'android',author:'google'},
{code:3,title:'Windows Phone',author:'microsoft'}
]
var books = new Backbone.Collection(booklist,{
model: Book
}) //books.at(2) console.log( books.get(1).toJSON() ) //Object {code: 1, title: "ios", author: "apple"}
console.log( books.at(1).toJSON() ) //Object {code: 2, title: "android", author: "google"}
_.each( books.where({title:'Windows Phone'}),function(book){
console.log( book.toJSON() )
}) //Object {code: 3, title: "Windows Phone", author: "microsoft"}
console.log( books.findWhere({title:'Windows Phone'}).toJSON() ) //Object {code: 3, title: "Windows Phone", author: "microsoft"}

  集合中模型排序

  sort collection.sort([options]) 强制对集合进行重排序。一般情况下不需要调用本函数,因为当一个模型被添加时,comparator 函数会实时排序。要禁用添加模型时的排序,可以传递{sort: false}add。 调用sort会触发的集合的"sort"事件。

   comparator collection.comparator 默认情况下,集合没有声明 comparator 函数。如果定义了该函数,集合中的模型会按照指定的算法进行排序。

var Book = Backbone.Model.extend({
defaults:{
code: 0,
title: 'backbone',
author: 'Jeremy Ashkenas'
}
})
var booklist = [
{code:7,title:'ios',author:'apple'},
{code:5,title:'android',author:'google'},
{code:6,title:'Windows Phone',author:'microsoft'}
]
var books = new Backbone.Collection(booklist,{
model: Book,
comparator: function(a,b){
return a.get('code') > b.get('code') ? 1 : 0; //升序
//return a.get('code') > b.get('code') ? 0 : 1; //降序
}
})
books.sort()
books.each(function(book){
console.log( book.toJSON() )
})
// Object {code: 5, title: "android", author: "google"}
// Object {code: 6, title: "Windows Phone", author: "microsoft"}
// Object {code: 7, title: "ios", author: "apple"}

  与服务器交互   

  获取服务器数据

  fetch collection.fetch([options]) 从服务器拉取集合的默认模型设置 ,成功接收数据后会setting(设置)集合。

var Book = Backbone.Model.extend({
defaults:{
code: 0,
title: 'backbone',
author: 'Jeremy Ashkenas'
}
})
var Books = Backbone.Collection.extend({
url: 'backbone-test.php',
model: Book,
initialize: function(){
//reset事件触发
this.on('reset',function(render){
_.each(render.models,function(book){
console.log( book.toJSON() )
})
})
}
})
var books = new Books()
books.fetch({
reset: true,
success: function(collection, response){
_.each(collection.models,function(book){
console.log( book.toJSON() )
})
}
}) //php文件
$json = array(
array('code'=> 1,'title'=> 'ios','author'=>'apple'),
array('code'=> 2,'title'=> 'android','author'=>'android'),
array('code'=> 3,'title'=> 'windows phone','author'=>'microsoft')
);
echo json_encode($json);

  同步服务器数据

  create collection.create(attributes, [options]) 方便的在集合中创建一个模型的新实例。 相当于使用属性哈希(键值对象)实例化一个模型, 然后将该模型保存到服务器, 创建成功后将模型添加到集合中, 返回这个新模型。

var Book = Backbone.Model.extend({
defaults:{
code: 0,
title: 'backbone',
author: 'Jeremy Ashkenas'
}
})
var Books = Backbone.Collection.extend({
url: 'backbone-test.php',
model: Book,
initialize: function(){
this.on('add',function(model,response){
console.log( model.toJSON() ) //Object {title: "ios", author: "apple", code: 0}
})
}
})
var books = new Books()
books.create({title: "ios", author: "apple"}) //php文件 //设置接收数据的格式
header('Content-Type: application/json; charset=utf-8');
//获取客户端发送来的数据
$data = json_decode(file_get_contents("php://input"));
/* 获取各个属性值,保存至服务器中 */
//返回更新成功的标志
echo json_encode(array('code'=>'2'));

认识Backbone (三)的更多相关文章

  1. RequireJS与Backbone简单整合

    前言 昨天我们一起学习了Backbone,最后做了一个备忘录的例子,说是做了不如说是看了下官方提供的例子,所以最终我感觉我们还是没能掌握Backbone,今天还得做个其它例子先. 然后前面也只是草草学 ...

  2. Backbone事件机制核心源码(仅包含Events、Model模块)

    一.应用场景 为了改善酷版139邮箱的代码结构,引入backbone的事件机制,按照MVC的分层思想搭建酷版云邮局的代码框架.力求在保持酷版轻量级的基础上提高代码的可维护性.   二.遗留问题 1.b ...

  3. Yeoman 学习笔记

    yoeman 简介:http://www.infoq.com/cn/news/2012/09/yeoman yeoman 官网: http://yeoman.io/ yeoman 是快速创建骨架应用程 ...

  4. Javascript 的模块化编程及加载模块【转载+整理】

    http://www.ruanyifeng.com/blog/2012/10/javascript_module.html 本文内容 引入 模块化 最初写法 对象写法 立即执行函数写法 放大模式 宽放 ...

  5. Backbone源码分析(三)

    Backbone源码分析(一) Backbone源码分析(二) Backbone中主要的业务逻辑位于Model和Collection,上一篇介绍了Backbone中的Model,这篇文章中将主要探讨C ...

  6. 【 js 基础 】【 源码学习 】backbone 源码阅读(三)浅谈 REST 和 CRUD

    最近看完了 backbone.js 的源码,这里对于源码的细节就不再赘述了,大家可以 star 我的源码阅读项目(https://github.com/JiayiLi/source-code-stud ...

  7. 【 js 基础 】【 源码学习 】backbone 源码阅读(三)

    最近看完了 backbone.js 的源码,这里对于源码的细节就不再赘述了,大家可以 star 我的源码阅读项目(https://github.com/JiayiLi/source-code-stud ...

  8. 用Backbone.js创建一个联系人管理系统(三)

    原文: Build a Contacts Manager Using Backbone.js: Part 3 欢迎回到这系列的教程,关注使用Backbone.js构建应用程序. 如果你还没看过第一,二 ...

  9. Backbone源码解析(三):Collection模块

    Collection模块式是对分散在项目中model的收集,他可以存储所有的model,构成一个集合,并且通过自身的方法统一操作model.Collection模块包装着若干对象,对象本身不具有一些方 ...

随机推荐

  1. 百度map android sdk3.5实现定位 并跳转的指定坐标,加入标记

    前几天又下载了新的百度地图sdk,3.5版本号.发现百度地图api有了较大变化 定位和3.0版本号差点儿相同 可是设置地图中心和加入maker标记有较大变化 设置地图中心点 // 定义地图状态zoom ...

  2. VC++6.0版本号程序转成VS2010版

    直接转换的时候遇到两个问题: 1.预编译头文件*.PCH找不到 2.static_cast": 无法从"void (__thiscall CView2::* )(void)&quo ...

  3. sys_refcursor的使用方法实例

    --创建过程,參数为sys_refcursor,为out型 create or replace procedure aabbsys_refcursor(o out sys_refcursor) is ...

  4. SE 2014年4月8日

    1.路由引入的作用? 当网络中运行多种路由协议的时候,由于不同协议的路由算法和度量值等均不相同,路由引入可以将不同协议的路由引入到当前的路由协议中,保证网络的互通. 对比单向入和双向入 单向引入是只将 ...

  5. hdu1255(线段树——矩形面积交)

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=1255 题意:求N个矩形中,求被覆盖至少俩次的面积和 分析:覆盖两次即col[rt]>=2就好.一 ...

  6. zoj3201(树形dp)

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3201 题意:给一棵树, n结点<=1000, 和K < ...

  7. 网络安全之IP伪造

    眼下非常多站点的涉及存在一些安全漏洞,黑客easy使用ip伪造.session劫持.xss攻击.session注入等手段危害站点安全.在纪录片<互联网之子>(建议搞IT的都要看下)中.亚伦 ...

  8. JDBC与反射

    什么是JDBC Java定义了一套关于连接使用数据库的规范(接口)叫做JDBC,许多数据库厂商实现了这个规范,所以我们可以通过Java提供的接口编程,使得我们更换数据库的时候不用修改原来的代码,只需要 ...

  9. WPF遮蔽层的实现

    在一些项目中,难免会有耗时的加载,如果加载时没有提示,给人一种假死的感觉,很不友好,那么现在福利来啦,WPF版的模态窗体,先上效果图 实际效果指针是转动的,话不多说,一大批干货来袭 XMAL的代码 W ...

  10. android 图片浏览器 demo

    先上效果图,本demo 会逐步完好 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYTU2NTczMDE2NjEz/font/5a6L5L2T/fontsi ...