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 ...
随机推荐
- css学习-css引入&css选择
一.引入css的方式,一共有4种,我们只需要掌握三种就可以了,@import的方法我们不做掌握 1.第一种引入的方法 <!--1.第一种引入css的方法--> <h1 style=& ...
- The valid characters are defined in RFC 7230 and RFC 3986
网上大都说什么发送格式与协议定义的不兼容,改tomcat版本或改编码之类的. 本人测试的时候换了个浏览器,不用IE就好了 如果坚持用ie,也有解决方式 @参考文章 成功的方法 在请求地址var url ...
- 对FPKM/RPKM以及TPM的理解
对FPKM/RPKM以及TPM的理解 2018年07月03日 16:05:53 sixu_9days 阅读数:559 标签: FPKM/RPKMTPMRNA-Seq 更多 个人分类: RNA-Seq ...
- TYVJ 1940 创世纪
Description: 上帝手中有着 N 种被称作“世界元素”的东西,现在他要把它们中的一部分投放到一个新的空间中去以建造世界.每 种世界元素都可以限制另外一种世界元素,所以说上帝希望所有被投放的世 ...
- 11月11日光棍节考试总结hhh
好吧,第一题字符串裸栈就能A 第二题字典序没调完,先写的第一题和第三题暴力,第二题读题感觉自己不会写,其实也能写出来,浪费了好多时间 第三题DP大概是写的暴力,原本可以搞到20分,要交的时候发现自己少 ...
- PS抠发丝技巧 「选择并遮住…」
PS抠发丝技巧 「选择并遮住…」 现在的海报设计,大多数都有模特MM,然而MM的头发实用太多了,有的还飘起来…… 对于设计师(特别是淘宝美工)没有一个强大.快速.实用的抠发丝技巧真的混不去哦.而PS ...
- easyui-从数据库读取创建无极菜单
easyui-tree基础必须知道这个如下: 树控件使用<ul>元素定义.标签能够定义分支和子节点.节点都定义在<ul>列表内的<li>元素中.以下显示的元素将被用 ...
- web札记
url中不能是#号,struts不读取#之后的字符串.
- Oracle 输出树形结构
Oracle 输出树形结构 树形结构,根 select connect_by_root(cat.parentid) root,cat.id,cat.parentid,cat.name,cat.code ...
- 2018.10.12 NOIP模拟 字符处理(模拟)
传送门 sb模拟,考试跟着sb了90分. 代码