集合基本用法
[1] 基类Collection
1)实例化、初始化
var list=[
{
title: 'title1',
description: 'des1'
},
{
title: 'title2',
description: 'des2'
},
{
title: 'title3',
description: 'des3'
}
];
var MyList=Backbone.Collection.extend({
});
var aList= new MyList(list);
2)models数组
- 集合是管理backbone对象,不是原生的对象。
3)toJSON
- 把Backbone对象,打回到JS的原生对象
4)length/size
- 以下几种方式都可以获得collection长度,size()是underscore的方法。
[2] 查询 find/filter/where
1)find
- 在集合中遍历找到一个元素。
- 条件是以回调函数的方式来实现。find内部对集合有个迭代,并且每次迭代都调用回调方法。所以回调方法需要告诉迭代器,当前model是否满足查询条件。
var foo=aList.find(function(model){
return model.get('title') == 'title1';
});
2)filter
- 在集合中遍历找到多个元素。
var foo=aList.filter(function(model){
return model.get('description') == 'des1';
});
注意:集合提供的filter方法返回的是一个JS的原生数组,而非集合
3)where
- 是find和filter的快捷写法。
//相当于filter,不用写回调函数,只需要传目标属性参数对
var foo1=aList.where({
description : 'des1'
});
//相当于find,第二个参数为true,只查找一个参数
var foo2=aList.where({
description : 'des1'
},true);
4)Backbone.QueryCollection
[3] 遍历 each
aList.each(function(model){
console.log(model.get('title'));
});
[4] 其他方法
1)every
//是否每个都满足条件,foo_every为布尔型
var foo_every=aList.every(function(model){
return model.get('title') != null;
});
2)some
//只要有一个满足条件返回true,foo_some为布尔型
var foo_some=aList.some(function(model){
return model.get('title') != null;
});
3)pluck
//摘取某个属性,组成新的JS数组
var foo_pluck=aList.pluck('title’);
4)map
//遍历model,自定义内容,组成新数组
var foo_map=aList.map(function(model){
return model.get('title') +' '+ model.get('description');
});
5)reduce
//将集合中的内容变为一个值。memo表示上一次的结果,reduce的第二个参数代表初始值
var foo_map=aList.reduce(function(memo,model,index){
return memo + ',' + model.get('title');
},'');
集合事件
补充内容:
(1) cid是model内部的唯一ID
(2) Undercore的_.each()方法
_.each(list, iterator, [context])
list是要循环迭代的集合,iterator是迭代器,context是迭代器的上下文,也就是迭代器中this的指向,例如:
var obj = {name: "hello"};
_.each([1, 2, 3], function (i) {
console.log(this.name + ":" + i);
}, obj);
//--result--
hello:1
hello:2
hello:3
[1] add (可指定插入位置)
[2] remove
[3] reset
[4] sort (comparetor设置)
- 以上方法用实例展示
<ul id="aView">
</ul>
var list=[
{
title: 'atitle1',
description: 'des1'
},
{
title: 'ctitle2',
description: 'des2'
},
{
title: 'btitle3',
description: 'des1'
}
];
var MyList=Backbone.Collection.extend({
//-直接通过某个字段的ASCII排序-
//comparator: 'title'
//-复杂排序-
comparator: function(a,b){
return a.get('title').length > b.get('title').length
}
});
var aList= new MyList(list);
var ItemView = Backbone.View.extend({
tagName: 'li',
className: 'list-item',
render:function(){
this.$el.html(this.model.get('title'));
return this;
}
});
var ListView = Backbone.View.extend({
initialize: function(){
if(this.collection){
this.byId ={};
this.views=[];
this.collection.each(this.registerView,this);
this.listenTo(this.collection,'reset',this.resetView);
this.listenTo(this.collection,'add',this.addView);
this.listenTo(this.collection,'remove',this.removeview);
this.listenTo(this.collection,'change',this.updateView);
this.listenTo(this.collection,'sort',this.resetView);
}
},
registerView: function(model) {
var view = new ItemView({model: model});
this.byId[model.cid] = view;
this.views.push(view);
},
addView: function(model){
var view = new ItemView({model:model});
var at = this.collection.indexOf(model);
this.byId[model.cid] = view;
$before = this.views[at-1].$el;
$before.after(view.render().$el);
this.views.splice(at,0,view);
},
resetView:function(){
this.byId={};
this.views=[];
this.collection.each(this.registerView,this);
this.render();
},
updateView: function(model){
var view = this.byId[model.cid];
view.render();
},
render:function(){
var _this= this;
this.$el.empty();
_.each(this.views,function(view){
$_el = view.render().$el;
_this.$el.append($_el);
});
return this;
}
});
var aView= new ListView({
el:'#aView',
collection: aList
});
aView.render();
//--add--
aList.add({
title : 'title added',
description: 'des added'
},{at: 2});
var newDataSource = [
{
title: 'new_title1',
description: 'des1'
},
{
title: 'new_title2',
description: 'des2'
},
{
title: 'new_title3',
description: 'des1'
}
];
集合与服务器交互
<ul id="aView">
</ul>
var MyItem = Backbone.Model.extend();
var MyItemView = Backbone.View.extend({
tagName: 'li',
render: function(){
this.$el.html(this.model.get('title'));
return this;
}
});
var MyCollection = Backbone.Collection.extend({
url: 'js/package.json',
model: MyItem
});
var MyCollectionView = Backbone.View.extend({
initialize: function(){
this.listenTo(this.collection,'reset',this.render);
this.views=[];
},
render: function(){
var that= this;
_.each(this.views,function(view){
view.remove();
}),
this.collection.each(function(model){
var view= new MyItemView({model: model});
that.views.push(view);
that.$el.append(view.render().$el);
});
}
});
var myCollection = new MyCollection();
var myCollectionView=new MyCollectionView({
collection: myCollection,
el: '#aView'
});
myCollection.fetch({reset:true});
注:下图1可以实现功能,当时,会造成内存泄露,所以改为图2红框内容。