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
随机推荐
- XML复习笔记(复习资料为菜鸟教程里的XML教程)
XML 指可扩展标记语言(eXtensible Markup Language) XML 的设计宗旨是传输数据,而不是显示数据. XML 标签没有被预定义.您需要自行定义标签. XML 被设计为具有自 ...
- REST RPC HTTP vs 高性能二进制协议 序列化和通信协议
edisonchou https://mp.weixin.qq.com/s/-XZXqXawR-NxJMPCeiNsmg .NET Core微服务之服务间的调用方式(REST and RPC) Edi ...
- Erlang Garbage Collector
Erlang Garbage Collector | Erlang Solution blog https://www.erlang-solutions.com/blog/erlang-garbage ...
- mysql_proxy
mysql_proxy中间件实现:读写分离.负载均衡. mysql_proxy中间件实现:读写分离.负载均衡. 负载均衡:给多台数据库,看能不能均匀的分给不同的数据库. 客户端连的是proxy,此时的 ...
- POJ3080 Blue Jeans —— 暴力枚举 + KMP / strstr()
题目链接:https://vjudge.net/problem/POJ-3080 Blue Jeans Time Limit: 1000MS Memory Limit: 65536K Total ...
- import data from excel to sql server
https://www.c-sharpcorner.com/article/how-to-import-excel-data-in-sql-server-2014/ 需要注意的是,第一次是选择sour ...
- 在织梦dedecms中实现“文章标题-栏目名称-网站名”导航
本文介绍了在dedecms中,实现文章标题-栏目名称-网站名 导航的方法,有需要的朋友参考下. 在dedecms中实现“文章标题-栏目名称-网站名”导航的方法. 第一种: 在/include/in ...
- MYSQL进阶学习笔记三:MySQL流程控制语句!(视频序号:进阶_7-10)
知识点四:MySQL流程控制语句(7-10) 选择语句: (IF ELSE ELSE IF CASE 分支)IFNULL函数 IF语法: 语法规则: IF search_condition THEN ...
- poj 3461 Oulipo(kmp统计子串出现次数)
题意:统计子串出现在主串中的次数 思路:典型kmp #include<iostream> #include<stdio.h> #include<string.h> ...
- 【POJ 2411】 Mondriaan's Dream
[题目链接] 点击打开链接 [算法] 很明显,我们可以用状态压缩动态规划解决此题 f[n][m]表示n-1行已经放满,第n行状态为m的合法的方案数 状态转移方程很好推 注意这题时限较紧,注意加一些小优 ...