Backbone入门基础 - 集合

集合基本用法

[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红框内容。