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

五、路由

启用Windows 路由和远程访问实现 PPTP 的 VPN 虚拟拨号

Windows 服务器版自带“路由和远程访问”经常出门在外办公的企业可以安全的通过该功能实时存取企业内部信息,极大的提高了移动办公的效率。   概述: 启用了“路由和远程访问”无论身处何处,只要能接入...
  • joyous
  • joyous
  • 2013年09月26日 21:49
  • 19280

路由的几个基本概念-直连路由/网关路由/主机路由/网络路由/动态路由/静态路由/默认路由

1.动态路由/静态路由 动态路由 路由选择器自动共享路由信息 自动构造路由表,需要一个路由协议,如RIP或OSPF 静态路由 路由选择器不共享路由信息(单方向路由) 手工构造路由表 ...
  • u011456940
  • u011456940
  • 2016年05月08日 17:28
  • 3246

NAT模式、路由模式、桥接模式 区别对比

http://rickie622.blog.163.com/blog/static/21238811201122794240546/
  • bytxl
  • bytxl
  • 2014年06月28日 16:12
  • 4811

Windows 2008 R2之一安装和启用路由和远程服务

 关于路由的原理在此我不在描述了。各位可以参考相关资料 正常情况下,在没有部署路由和远程服务器的,以及没有硬件路由设备的支持,两个网络互ping情况如下: 其中10.205.7.18...
  • gulijiang2008
  • gulijiang2008
  • 2015年01月19日 10:56
  • 11167

WinServer2012搭VPN(二)配置路由和远程访问

WinServer2012搭VPN(二)配置路由和远程访问 服务功能添加请参见WinServer2012搭VPN(一) 打开服务器管理器--仪表板 工具一栏选择“路由和远程访问” ...
  • only06
  • only06
  • 2017年02月03日 00:03
  • 3482

[Ruby On Rails] Rails 路由学习笔记

文/零小白(简书作者) 原文链接:http://www.jianshu.com/p/Ro4HZT 参考 RailsGuides中的Rails Routing from the Ou...
  • Xunzi229
  • Xunzi229
  • 2016年05月21日 15:00
  • 2375

服务器的路由与负载均衡

《大型分布式网站架构设计与实践》服务化的演变对于负载较高的服务来说,往往对应着由多台服务器组成的集群。在请求到来时,为了将请求均衡的分配到后端服务器,负载均衡程序将从服务对应的地址列表中,通过响应的负...
  • YEN_CSDN
  • YEN_CSDN
  • 2017年02月17日 16:20
  • 988

前端路由与后端路由

后端路由 意味着 浏览器刷新页面。显然很多 webapp 的需求上是不希望这样的体验的。网速慢的话说不定屏幕全白再有新内容。 前端路由就不会有这样的问题了。随意控制,逻辑也可以都放在前端。前端慢慢复...
  • chanda_yang
  • chanda_yang
  • 2016年09月03日 10:03
  • 4322

静态路由和动态路由的区别

静态路由   是在路由器中设置的固定的路由表。除非网络管理员干预,否则静态路由不会发生变化由于静态路由不能对网络的改变作出反映,一般用于网络规模不大、拓扑结构固定的网络中。静态路由的优点是简单、高效...
  • bxyill
  • bxyill
  • 2012年10月17日 08:22
  • 12847

路由器和交换的本质区别解析

面试中经常遇到此类问题,首先我们遇到此类问题必须明白题目所要考察我们的目的是什么: 1:考察点:这类问题主要考察面试者对路由器和交换机的基本概念和工作原理的掌握程度,面试官主要是想了解面试者基础知识是...
  • zqixiao_09
  • zqixiao_09
  • 2016年04月02日 16:30
  • 3821
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Backbone-03集合和路由
举报原因:
原因补充:

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