关于手动触发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)的更多相关文章

  1. Backbone.js入门教程第二版笔记(3)

    视图渲染 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  2. Backbone.js入门教程第二版笔记(1)

    1.模块 集合 视图 和事件的一个综合例子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  3. Backbone.js入门教程

    原文: Getting Started with Backbone.js 不像其它的Web开发语言,过去Javascript很少可用的架构.令人感到高兴的是,最近几年这种情况得到非常大的改善. 今天我 ...

  4. D3.js 入门教程

    最近需要用到d3, 记录下d3的教程 网上搜了几个关于d3的教程 D3.js 入门教程      http://wiki.jikexueyuan.com/project/d3wiki/author.h ...

  5. 【特别推荐】Node.js 入门教程和学习资源汇总

    这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...

  6. python核心编程第二版笔记

    python核心编程第二版笔记由网友提供:open168 python核心编程--笔记(很详细,建议收藏) 解释器options:1.1 –d   提供调试输出1.2 –O   生成优化的字节码(生成 ...

  7. Node.js 入门教程和学习资源汇总

    这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...

  8. 【CC2530入门教程-增强版】基础技能综合实训案例(基础版)-上位机源码

    [CC2530入门教程-增强版]基础技能综合实训案例(基础版)-上位机源码 广东职业技术学院  欧浩源 一.需求分析 按照指定参数打开串口,与测控终端建立数据传输通道,并根据应用要求实现程序逻辑,具体 ...

  9. Vue.js 入门教程

    Vue.js 入门教程:https://cn.vuejs.org/v2/guide/index.html

随机推荐

  1. Netty实现时间服务演示样例

    相关知识点: [1] ChannelGroup是一个容纳打开的通道实例的线程安全的集合,方便我们统一施加操作.所以在使用的过程中能够将一些相关的Channel归类为一个有意义的集合.关闭的通道会自己主 ...

  2. CUE 文件格式说明

    CUE 文件,即 CUESheets ,光盘镜像辅助文件.通常用于光盘刻录.音乐播放等等. 比如用 EAC 刻录CD光盘,或者用 Foobar2000 播放整轨音乐文件. CUE 文件是非常好的音乐专 ...

  3. vue 数组和对象渲染问题

    vue 数组和对象渲染问题 最近项目有点忙碌,遇到好多问题都没有总结(╥﹏╥),在开发过程中,取vuex中的数组渲染完成之后,再次修改数组的值,数据更新了,但是视图并没有更新.以为是数组更新的问题,后 ...

  4. POJ3621 Sightseeing Cows 最优比率环 二分法

    题目链接:http://poj.org/problem?id=3621 Sightseeing Cows Time Limit: 1000MS   Memory Limit: 65536K Total ...

  5. 关于苹果iPhone手机对页面margin属性无效的解决方法一(如有错误,请留言批评)

    这个问题,是在给商城网站底部footer设置margin属性的时候发现的,先把出现问题的截图发出来看一下 ​安卓手机,打开正常 ​iphone6 p 打开出现的问题(无视margin-bottom:6 ...

  6. WPF 之Converter

    WPF  之Converter Leo 在我们做项目的时候,经常会遇见这样的事情: 在数据中我们定义的是true,false 而在现实的时候则可能要求男,女 我们还得能定义成了0,1,2,3,4,5, ...

  7. Android隐藏Activity和图标

    今天发现4.0以后如果不写Activity只写BroadcastReceiver的话,这个广播接收器是不能运行的.经过查询,好像是HoneyComb之后添加了安全机制,规定必须运行一次Activity ...

  8. maven之setting.xml的配置详解

    文件存放位置 全局配置: ${M2_HOME}/conf/settings.xml 用户配置: ${user.home}/.m2/settings.xml note:用户配置优先于全局配置.${use ...

  9. 单片机和Linux都想学_换个两全的方法学习单片机

    本节教你如何学习单片机,如何选择合适的开发板和开发工具. 现在我们知道单片机是要学习的,那么怎么去学习单片机?在上一课我们说不要使用老一套的方法学习,实际上是指的两个问题. 第一:选择什么开发板: 第 ...

  10. Gearman1.1.12安装与启动

    1)安装 a)安装gcc4.4环境: i.  yum install gcc44 gcc44-c++ libstdc++44-devel gcc-c++ -y ii. 在/etc/profile中添加 ...