Collection

Collection可以看成是Model的集合。以下是一个集合的例子:

var Song = Backbone.Model.extend({
defaults: {
name: "Not specified",
artist: "Not specified"
},
initialize: function(){
console.log("Music is the answer");
}
}); var Album = Backbone.Collection.extend({
model: Song
}); var song1 = new Song({ name: "How Bizarre", artist: "OMC" });
var song2 = new Song({ name: "Sexual Healing", artist: "Marvin Gaye" });
var song3 = new Song({ name: "Talk It Over In Bed", artist: "OMC" }); var myAlbum = new Album([ song1, song2, song3]);
console.log( myAlbum.models ); // [song1, song2, song3]

Router

Backbone.Router担任了一部分Controller的工作,他能将特定的URL或锚点与一个特定的方法绑定。

var AppRouter = Backbone.Router.extend({
routes : {
'' : 'main',
'topic' : 'renderList',
'topic/:id' : 'renderDetail',
'*error' : 'renderError'
},
main : function() {
console.log('应用入口方法');
},
renderList : function() {
console.log('渲染列表方法');
},
renderDetail : function(id) {
console.log('渲染详情方法, id为: ' + id);
},
renderError : function(error) {
console.log('URL错误, 错误信息: ' + error);
}
}); var router = new AppRouter();
Backbone.history.start();

将例子中的代码复制到你的页面中。假设你的页面地址为http://localhost/index.html,请依次访问下面的地址,并注意控制台的输出结果:

  • http://localhost/index.html // 输出:应用入口方法
  • http://localhost/index.html#topic // 输出:渲染列表方法
  • http://localhost/index.html#topic/1023 // 输出:渲染详情方法, id为:1023
  • http://localhost/index.html#about // 输出:URL错误, 错误信息: about

  然后再使用浏览器的“前进”、“返回”等按钮进行切换,你会看到当你的URL切换时,控制台输出了对应的结果,说明它已经调用了相应的方法。而在进行这些操时,页面并没有刷新。这个例子很好地解决了我们在一开始所说的两个问题。

参考:

http://yujianshenbing.iteye.com/blog/1749831

Backbone学习笔记 - Collection及Router篇的更多相关文章

  1. Backbone学习笔记一Backbone中的MVC

    原文章地址http://bigdots.github.io/2015/12/01/Backbone学习笔记(一)/#more Backbone.js为复杂WEB应用程序提供模型(models).集合( ...

  2. BZOJ 1061: [Noi2008]志愿者招募 [单纯形法]【学习笔记看另一篇吧】

    1061: [Noi2008]志愿者招募 Time Limit: 20 Sec  Memory Limit: 162 MBSubmit: 3975  Solved: 2421[Submit][Stat ...

  3. Backbone学习笔记 - View篇

    Backbone是一种Web端的MVC框架,这里纪录学习Model,View和Collection的笔记. 1 View initialize构造函数 Backbone.View 与jQuery库紧密 ...

  4. backbone学习笔记:集合(Collection)

    集合(Collection)是一个Backbone对象,用来组织和管理多个模型,它不仅仅是一个javascript数组,还提供了专门的方法来对集合进行排序.过滤和遍历,集合可以方便的与REST服务器进 ...

  5. Backbone学习笔记 - Model篇

    2 Model 在Backbone中,Model用于存储核心数据,可以将数据交互相关的逻辑代码放在这里.基本形式如下: var Human = Backbone.Model.extend({ init ...

  6. 学习笔记-CCS-MSP430F5529[快速入门篇二]

    由于2021的全国电赛延期了,从今天开始打算好好整理一下使用CCS编程的经验,本篇笔记会好好整理一下我备赛期间用CCS写的程序,包括外部中断,定时器部分的定时中断,定时器输入捕获,PWM波输出,UAR ...

  7. Backbone 学习笔记

    Backbone 是一款基于模型-视图-控制器 MVC 模式的轻量级javascript 框架 ,可以用来帮助开发人员创建单页Web应用. 借助Backbone 我们可以使用REST的方式来最小化客户 ...

  8. Backbone之旅——Collection and View篇

    上篇文章说了Model,这次说说Collection,collection就是model的集合,用来装载model对象的 定义方法 var Persons = new Backbone.Collect ...

  9. backbone学习笔记(一)

    因为工作的需要,从今天起对backbone的学习过程做下记录. 学习计划: 1.1周看基本知识(2014/1/18-2014/1/25) 2.基本知识总结(2014/1/26) 3.半周按教程写hel ...

随机推荐

  1. python笔记之str常用方法

    #Auther Bob#--*--conding:utf-8 --*--# s1 = 'aBcdE1d'# ============================================== ...

  2. swift 设置图片动画组 iOS11之前 默认图片 设置不成功

    在iOS 11 上, 1.先执行动画组 在设置图片执行帧动画,2.先设置图片在设置帧动画,执行帧动画  没有任何问题 在iOS 10和iOS9上,必须 执行 方法二(先设置图片在设置帧动画,执行帧动画 ...

  3. Ubuntu-18.04Python2与Python3自由切换

    一.配置ssh链接 安装openssh-server devops@devops-virtual-machine:~$ sudo apt-get install openssh-server 二.安装 ...

  4. Oracle 进入数据库 新增用户 修改密码方法

    1.以管理员身份进入 SQL plus 2.输入:sys/manager as sysdba 3.新增用户: 创建新用户: create user 用户名 identified by 密码; 解锁用户 ...

  5. Step1-有序顺序表

    #include<stdio.h> #define N 100 typedef struct jcb{ ]; int arrtime; int reqtime; }jcb; jcb job ...

  6. Spark设计思想浅析

    Spark is no rocket science!——博主 了解分布式计算的朋友,一定知道DAG这样一个概念.其实我接触DAG也是在学习MapReduce时了解到的.(具体可查阅<大数据日知 ...

  7. 主成分_CPA

    基本原理:方差最大原理 通过正交变换将原相关性变量转化为不相关的变量 第一主成分:线性组合  方差最大 第二主成分:线性组合,COV(F1,F2)=0 步骤: 原始数据标准化:DataAdjust(m ...

  8. [精彩] 关于DB2的内存分配

    这两天在看DB2的内存管理的内容,看的很是模糊,有以下问题不明白,请教 是不是数据库管理器的共享内存就是DB2能够使用的最大内容呢,然后数据库全局内存从管理器内存那里获得分配的内存,然后应用程序全局内 ...

  9. ajax序列化表单,再也不用通过data去一个个的传值了

    jQuery的serialize()方法通过序列化表单值,创建URL编码文本字符串,我们就可以选择一个或多个表单元素,也可以直接选择form将其序列化 这样,我们就可以把序列化的值传给ajax()作为 ...

  10. 2018.09.18 atcoder Many Formulas(搜索)

    传送门 感觉自己搜索能力退化了,这种弱智搜索写了整整5min,这样下去比赛会凉的. 看来得多练练题了. 代码: #include<bits/stdc++.h> #define ll lon ...