Backbone-03集合和路由

原创 2016年06月01日 16:25:04

一、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数据,并以列表的形式渲染到界面上。
这里写图片描述

五、路由

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Backbone之路由Router初探

在设计单页面WEB应用时如果只选用ajax进行异步数据请求,那么用户的体验是相当不好的。对于用户来说,点击了相关的按钮或者链接之后,相应的界面发生了变化,虽然这里使用到ajax的异步请求但是对于用户来...

接口篇(5.4) 03. 交换机连接(单臂路由) ❀ 飞塔 (Fortinet) 防火墙

我们知道交换机划分VLAN可以将大型网络划分为多个小网络,以使广播和组播流量不会占据更多的带宽。因为广播域缩小了,可以提供更高的网络段间安全性。划分VLAN后各VLAN之间的访问,就需要路由来完成,如...

Golang Web 框架 Beego 路由设置 - 03

项目路由设置前面我们已经创建了 beego 项目,而且我们也看到它已经运行起来了,那么是如何运行起来的呢?让我们从入口文件先分析起来吧:package mainimport ( _ “qui...

ThinkPHP5 批量注册路由 - 03

批量注册 GET POST PUT DELETE路由

J-03. 远程设置并访问内网中二层路由的小米路由器

当小米路由器在内网中当作二层路由时,我们希望能远程管理内网中的小米路由器,并能访问小米路由器的硬盘。

ARouter源码解析03-路由跳转

上篇文章中,我们分析了如何将路由表单加载到内存中,这篇文章我们将分析如何根据这些路由表单,进行相应的跳转。 通过Class跳转HelloService service = ARouter.getIn...

Backbone.js的集合详解(下)

《Backbone.js的集合详解(下)》作者:chszs,转载需注明。博客主页:http://blog.csdn.net/chszs四、构造器与初始化当我们创建一个集合时,我们可以传递模型的初始化数...
  • chszs
  • chszs
  • 2014-04-24 16:51
  • 5233
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)