关于手动触发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. positive 相对其正常位置,那什么是正常位置: 请问调试,请问浏览器

    [问题代码 <!DOCTYPE html><html><head> <title></title> <meta charset=&qu ...

  2. JavaScript and ActionScript3

    接触JavaScript和ActionScript3也有一段时间了,它们都是应用比较广泛的脚本语言,经过这几年的工作和学习,静下来的时候想总结一些东西,作为技术上的沉淀以及培训所用,所以就有了这篇文章 ...

  3. js中字符串函数indexOf与search的区别

    IndexOf()方法是用来判断一个字符串是否存在于一个更长的字符串中.从长字符串左端到右端来搜索,如果存在该子字符串就返回它所处的位置(即索引).如果在被搜索的字符串没有找到要查找的字符串返回-1. ...

  4. 20170223 遇到自建表里面相同key值数据不唯一

     我怎么发现这个表里 key值相同数据不唯一, 这两条看起来是完全相同的, 其实排序不能能合并已经说明问题.

  5. mysql---列的选取原则

    列选择原则: :字段类型优先级 整型 > date,整型>浮点型,time > enum,char>varchar > blob 列的特点分析: 整型: 定长,没有国家/ ...

  6. miller_rabin模板

    miller_rabin素数测试法 #include <iostream> #include <cstdlib> #include <stdio.h> #inclu ...

  7. Android Studio 3.0.1模拟器启动报错Emulator: glClear:466 GL err 0x502

    启动模拟器时,报了一大堆以上错误 启动起来之后, Emulator的画面没有正常显示, 点击鼠标会闪烁, 有时还会上下颠倒 有可能是驱动版本太低不支持一些特性,因此就下载个驱动精灵.升级了显卡驱动,结 ...

  8. 为什么越来越多公链项目将WASM拥入怀中?

    最近越来越多的项目开始转向VNT使用的WASM,像EOS.Ontology,包括最初引入虚拟机EVM运行智能合约环境的以太坊,最近也开始转向使用WASM. 什么是WASM? WASM ,全称:WebA ...

  9. Pycharm中如何安装python库

    1首先打开pycharm工具,选择File中的Setting选项,如下图所示 2在打开的setting界面中我们点击python的解释器,你会看到很多导入的第三方库,如下图所示,点击最右边的加号 3在 ...

  10. Asp与Asp.Net

    1.Asp是什么? ASP是动态服务器页面(Active Server Page)的英文缩写.是微软公司开发的代替CGI脚本程序的一种应用,它可以与数据库和其它程序进行交互,是一种简单.方便的编程工具 ...