Backbone.js入门教程第二版笔记(2)
关于手动触发router,之前看到的例子都是通过在url后面加上#xxx或者点击一个a链接方法来触发,
还有一种情况是通过触发一种规则,来触发另一种规则(表述无能),比如这个例子中,我在url后面加上#manual,url的地址就转变为xxxx/route/n ,这里由于只给navigate传了一个参数,url改变之后并没有触发getId事件。
var AppRouter=Backbone.Router.extend({
routes:{
"route/:id":"getId",
"manual":"manual"
},
getId:function(id){
console.log(id);
}
,manual:function(){//当此事件触发时,url会转为route/n (n表示1-9的随机数)
this.navigate("route/"+Math.floor(Math.random()*9+1));
}
}); var app_router = new AppRouter;
Backbone.history.start();
如果需要触发事件,必须设置trigger的值:
var AppRouter=Backbone.Router.extend({
routes:{
"route/:id":"getId",
"manual":"manual"
},
getId:function(id){
console.log(id);
}
,manual:function(){//当此事件触发时,url会转为route/n (n表示1-9的随机数)
this.navigate("route/"+Math.floor(Math.random()*9+1),{trigger:true,replace:false});
}
}); var app_router = new AppRouter;
Backbone.history.start(); //控制台会输出一个1-9的随机数
关于replace这个值,文章中提到“replace表示url替换,而不是前进到这个url,意味着启用该参数,浏览器的history不会记录这个变动。
这是说,如果replace的值为false,那么这个例子中的#manual也会作为历史记录,所以我在点击浏览器中的后退按钮时,url会不断的产生新的随机路径,因为后退到manual的
瞬间,url又变了。
而如果replace的值为true,则是url替换,比如
打开一个新窗口,输入http://www.baidu.com
,再连续三次file:///D:/wamp/www/backbone_test/test.html#manual 回车
按下后退按钮时,发现页面回到了百度首页。这说明url的变化没有被记录到历史记录中。
Backbone.js入门教程第二版笔记(2)的更多相关文章
- Backbone.js入门教程第二版笔记(3)
视图渲染 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- Backbone.js入门教程第二版笔记(1)
1.模块 集合 视图 和事件的一个综合例子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
- Backbone.js入门教程
原文: Getting Started with Backbone.js 不像其它的Web开发语言,过去Javascript很少可用的架构.令人感到高兴的是,最近几年这种情况得到非常大的改善. 今天我 ...
- D3.js 入门教程
最近需要用到d3, 记录下d3的教程 网上搜了几个关于d3的教程 D3.js 入门教程 http://wiki.jikexueyuan.com/project/d3wiki/author.h ...
- 【特别推荐】Node.js 入门教程和学习资源汇总
这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...
- python核心编程第二版笔记
python核心编程第二版笔记由网友提供:open168 python核心编程--笔记(很详细,建议收藏) 解释器options:1.1 –d 提供调试输出1.2 –O 生成优化的字节码(生成 ...
- Node.js 入门教程和学习资源汇总
这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...
- 【CC2530入门教程-增强版】基础技能综合实训案例(基础版)-上位机源码
[CC2530入门教程-增强版]基础技能综合实训案例(基础版)-上位机源码 广东职业技术学院 欧浩源 一.需求分析 按照指定参数打开串口,与测控终端建立数据传输通道,并根据应用要求实现程序逻辑,具体 ...
- Vue.js 入门教程
Vue.js 入门教程:https://cn.vuejs.org/v2/guide/index.html
随机推荐
- positive 相对其正常位置,那什么是正常位置: 请问调试,请问浏览器
[问题代码 <!DOCTYPE html><html><head> <title></title> <meta charset=&qu ...
- JavaScript and ActionScript3
接触JavaScript和ActionScript3也有一段时间了,它们都是应用比较广泛的脚本语言,经过这几年的工作和学习,静下来的时候想总结一些东西,作为技术上的沉淀以及培训所用,所以就有了这篇文章 ...
- js中字符串函数indexOf与search的区别
IndexOf()方法是用来判断一个字符串是否存在于一个更长的字符串中.从长字符串左端到右端来搜索,如果存在该子字符串就返回它所处的位置(即索引).如果在被搜索的字符串没有找到要查找的字符串返回-1. ...
- 20170223 遇到自建表里面相同key值数据不唯一
我怎么发现这个表里 key值相同数据不唯一, 这两条看起来是完全相同的, 其实排序不能能合并已经说明问题.
- mysql---列的选取原则
列选择原则: :字段类型优先级 整型 > date,整型>浮点型,time > enum,char>varchar > blob 列的特点分析: 整型: 定长,没有国家/ ...
- miller_rabin模板
miller_rabin素数测试法 #include <iostream> #include <cstdlib> #include <stdio.h> #inclu ...
- Android Studio 3.0.1模拟器启动报错Emulator: glClear:466 GL err 0x502
启动模拟器时,报了一大堆以上错误 启动起来之后, Emulator的画面没有正常显示, 点击鼠标会闪烁, 有时还会上下颠倒 有可能是驱动版本太低不支持一些特性,因此就下载个驱动精灵.升级了显卡驱动,结 ...
- 为什么越来越多公链项目将WASM拥入怀中?
最近越来越多的项目开始转向VNT使用的WASM,像EOS.Ontology,包括最初引入虚拟机EVM运行智能合约环境的以太坊,最近也开始转向使用WASM. 什么是WASM? WASM ,全称:WebA ...
- Pycharm中如何安装python库
1首先打开pycharm工具,选择File中的Setting选项,如下图所示 2在打开的setting界面中我们点击python的解释器,你会看到很多导入的第三方库,如下图所示,点击最右边的加号 3在 ...
- Asp与Asp.Net
1.Asp是什么? ASP是动态服务器页面(Active Server Page)的英文缩写.是微软公司开发的代替CGI脚本程序的一种应用,它可以与数据库和其它程序进行交互,是一种简单.方便的编程工具 ...