Backbone学习笔记 - Collection及Router篇
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篇的更多相关文章
- Backbone学习笔记一Backbone中的MVC
原文章地址http://bigdots.github.io/2015/12/01/Backbone学习笔记(一)/#more Backbone.js为复杂WEB应用程序提供模型(models).集合( ...
- BZOJ 1061: [Noi2008]志愿者招募 [单纯形法]【学习笔记看另一篇吧】
1061: [Noi2008]志愿者招募 Time Limit: 20 Sec Memory Limit: 162 MBSubmit: 3975 Solved: 2421[Submit][Stat ...
- Backbone学习笔记 - View篇
Backbone是一种Web端的MVC框架,这里纪录学习Model,View和Collection的笔记. 1 View initialize构造函数 Backbone.View 与jQuery库紧密 ...
- backbone学习笔记:集合(Collection)
集合(Collection)是一个Backbone对象,用来组织和管理多个模型,它不仅仅是一个javascript数组,还提供了专门的方法来对集合进行排序.过滤和遍历,集合可以方便的与REST服务器进 ...
- Backbone学习笔记 - Model篇
2 Model 在Backbone中,Model用于存储核心数据,可以将数据交互相关的逻辑代码放在这里.基本形式如下: var Human = Backbone.Model.extend({ init ...
- 学习笔记-CCS-MSP430F5529[快速入门篇二]
由于2021的全国电赛延期了,从今天开始打算好好整理一下使用CCS编程的经验,本篇笔记会好好整理一下我备赛期间用CCS写的程序,包括外部中断,定时器部分的定时中断,定时器输入捕获,PWM波输出,UAR ...
- Backbone 学习笔记
Backbone 是一款基于模型-视图-控制器 MVC 模式的轻量级javascript 框架 ,可以用来帮助开发人员创建单页Web应用. 借助Backbone 我们可以使用REST的方式来最小化客户 ...
- Backbone之旅——Collection and View篇
上篇文章说了Model,这次说说Collection,collection就是model的集合,用来装载model对象的 定义方法 var Persons = new Backbone.Collect ...
- backbone学习笔记(一)
因为工作的需要,从今天起对backbone的学习过程做下记录. 学习计划: 1.1周看基本知识(2014/1/18-2014/1/25) 2.基本知识总结(2014/1/26) 3.半周按教程写hel ...
随机推荐
- python笔记之str常用方法
#Auther Bob#--*--conding:utf-8 --*--# s1 = 'aBcdE1d'# ============================================== ...
- swift 设置图片动画组 iOS11之前 默认图片 设置不成功
在iOS 11 上, 1.先执行动画组 在设置图片执行帧动画,2.先设置图片在设置帧动画,执行帧动画 没有任何问题 在iOS 10和iOS9上,必须 执行 方法二(先设置图片在设置帧动画,执行帧动画 ...
- Ubuntu-18.04Python2与Python3自由切换
一.配置ssh链接 安装openssh-server devops@devops-virtual-machine:~$ sudo apt-get install openssh-server 二.安装 ...
- Oracle 进入数据库 新增用户 修改密码方法
1.以管理员身份进入 SQL plus 2.输入:sys/manager as sysdba 3.新增用户: 创建新用户: create user 用户名 identified by 密码; 解锁用户 ...
- Step1-有序顺序表
#include<stdio.h> #define N 100 typedef struct jcb{ ]; int arrtime; int reqtime; }jcb; jcb job ...
- Spark设计思想浅析
Spark is no rocket science!——博主 了解分布式计算的朋友,一定知道DAG这样一个概念.其实我接触DAG也是在学习MapReduce时了解到的.(具体可查阅<大数据日知 ...
- 主成分_CPA
基本原理:方差最大原理 通过正交变换将原相关性变量转化为不相关的变量 第一主成分:线性组合 方差最大 第二主成分:线性组合,COV(F1,F2)=0 步骤: 原始数据标准化:DataAdjust(m ...
- [精彩] 关于DB2的内存分配
这两天在看DB2的内存管理的内容,看的很是模糊,有以下问题不明白,请教 是不是数据库管理器的共享内存就是DB2能够使用的最大内容呢,然后数据库全局内存从管理器内存那里获得分配的内存,然后应用程序全局内 ...
- ajax序列化表单,再也不用通过data去一个个的传值了
jQuery的serialize()方法通过序列化表单值,创建URL编码文本字符串,我们就可以选择一个或多个表单元素,也可以直接选择form将其序列化 这样,我们就可以把序列化的值传给ajax()作为 ...
- 2018.09.18 atcoder Many Formulas(搜索)
传送门 感觉自己搜索能力退化了,这种弱智搜索写了整整5min,这样下去比赛会凉的. 看来得多练练题了. 代码: #include<bits/stdc++.h> #define ll lon ...