标签:
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‘));
标签:
原文地址:http://www.cnblogs.com/rainbowcode/p/4698936.html