关闭

[置顶] Backbone-03集合和路由

标签: BackboneCollection集合和路由
303人阅读 评论(0) 收藏 举报
分类:

一、Backbone集合

Backbone.Collection是Backbone.Model的集合,集合中每一个元素都是一个Model。Collection是集合的基类。

1.创建和实例化

var list =[{
                'title':'titel1',
                'description':'description1'
            },{
                'title':'titel2',
                'description':'description2'
            },{
                'title':'titel3',
                'description':'description3'
            }];
            //一个Model的集合
            var MyList = Backbone.Collection.extend({
            });
            var aList = new MyList(list);

浏览器测试:
这里写图片描述

2.获取集合的长度

aList.length
aList.models.length
aList.size()

浏览器测试:
这里写图片描述

二、集合的常用方法

1.查询

1.1.单个查询-find

// //查找title=title1的单个元素
             var foo1 = aList.find(function(model){
                 return model.get('title') == 'title1';
            });

1.2.多个查询-filter过滤查询

    //查找title=title1的所有元素
            var foo2 = aList.filter(function(model){
                 return model.get('title') == 'title1';
            });

1.3.条件查询-where

var foo3 = aList.where({
                description:'description1'
            },true);

2.遍历-each

aList.each(function(model){
                console.log(model.get('title'));
            });

浏览器测试:
这里写图片描述

3.修改-add/remove/pop/push

4.其它方法-every/some/pluck/map/reduce

every:判断集合的每一个元素是否都满足某个条件
some:只要有一个满足
pluck:取出属性,组成一个新的数组
map:遍历取出属性,组成新的数组
……

var foo1 = aList.every(function(model){
                return model.get('title') !=null;
            });
var foo2 = aList.some(function(model){
                return model.get('title') !=null;
            });
var foo3 = aList.pluck('title');
var foo4 = aList.map(function(model){
                    return model.get('title');
            });         

三、集合事件

集合的常用事件如下:
add:集合添加一条或多条数据
remove:
change
reset:更换集合的数据源
sort:排序

四、服务器交互示例

下面的实例,讲解如何从服务器拉取数据,渲染到界面上。

<html>
    <head>
        <script src="underscore.js"></script>
        <script src="jquery.js"></script>
        <script src="backbone.js"></script>
    </head>
    <body>
        <ul id="aView">
        </ul>
        <script type="text/javascript">
            //每一个View以及Model
            var MyItem = Backbone.Model.extend();
            var MyCollection = Backbone.Collection.extend({
                url:'http://rapit.sinaapp.com/api/task?identify=p_chou',
                model:MyItem    
            });

            var MyItemView = Backbone.View.extend({
                tagName:'li',
                render:function () {
                    this.$el.html(this.model.get('title'));
                    return this;
                }
            });

            //管理所有的View
            var MyCollectionView  = Backbone.View.extend({
                initialize:function(){
                    //重置数据
                    this.listenTo(this.collection, 'reset',this.render);
                    this.views = [];    //创建一个数组存放ul下的views
                },
                render:function(){
                    var that = this;//在清空前保存一下对象
                    //遍历数组,清空数组
                    _.each(this.views, function(){
                        view.remove();
                    }),
                    //this.$el.empty();//清空ul下中的数据
                    //遍历集合,集合的每一个元素都是一个model
                    this.collection.each(function(model){
                        //每一个条目是一个View
                        var view = new MyItemView({
                            model:model
                        });
                        //添加到数组
                        that.views.push(view);
                        //渲染到界面
                        that.$el.append(view.render().$el);
                    });
                }
            });
            var myCollection = new MyCollection();
            var myColelctionView = new MyCollectionView({
                collection: myCollection,
                el:'#aView'
            });
            myCollection.fetch({reset:true});
        </script>
    </body>
</html>

浏览器测试:
服务器返回JSON格式数据
这里写图片描述

取出JSON数据,并以列表的形式渲染到界面上。
这里写图片描述

五、路由

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:120608次
    • 积分:2269
    • 等级:
    • 排名:第16563名
    • 原创:108篇
    • 转载:8篇
    • 译文:1篇
    • 评论:15条
    最新评论