Backbone.Router(路由)/ Backbone.history(历史)

   Backbone.Router 为客户端路由提供了许多方法,并能连接到指定的动作(actions)和事件(events)。 对于不支持 History API 的旧浏览器,路由提供了优雅的回调函数并可以透明的进行 URL 片段的转换。 

  页面加载期间,当应用已经创建了所有的路由,需要调用 Backbone.history.start(),或Backbone.history.start({pushState: true}) 来确保驱动初始化 URL 的路由。想要停止监听URL的路由,使用 Backbone.history.stop().

  History 作为全局路由服务用于处理 hashchange 事件或 pushState,匹配适合的路由,并触发回调函数。 我们不需要自己去做这些事情 — 如果使用带有键值对的 路由,Backbone.history 会被自动创建。

<div><a href="#help">help</a><a href="#search/list">list</a><a href="#search/list/p6">list page6</a><a href="#file/image/logo.png">image logo</a><a href="#account/total">account total</a>
</div>

//action方式绑定URL
var PageRoute = Backbone.Router.extend({routes: {"help":                 "help",     //1 #help"search/:query":        "search",   //2 #search/list"search/:query/p:page": "search",   //3 #search/list/p6"file/*path":            "file",  //4 #file/image/logo.png":path/:action":       "view"       //5 #account/total},help: function() {console.log('help')},search: function(query, page) {console.log(query +'/'+ page)},file: function(path){console.log(path)},view: function(path,action){console.log(path +'/'+ action)}
});
var route = new PageRoute();
Backbone.history.start();//event方式绑定URL
var PageRoute = Backbone.Router.extend({routes: {"help":                 "help",     //1 #help"search/:query":        "search",   //2 #search/list"search/:query/p:page": "search",   //3 #search/list/p6"file/*path":            "file",    //4 #file/image/logo.png":path/:action":         "view"     //5 #account/total}
});
var route = new PageRoute();
route.on('route:help',function(){console.log('help')
});
route.on('route:search',function(query,page){console.log(query +'/'+ page)
});
route.on('route:file',function(path){console.log(path)
});
route.on('route:view',function(path,action){console.log(path +'/'+ action)
});
Backbone.history.start();

  route router.route(route, name, [callback])  动态修改URL的hash属性的匹配规则和动作函数。为路由对象手动创建路由,route 参数可以是 routing string(路由字符串) 或 正则表达式。 每个捕捉到的被传入的路由或正则表达式,都将作为参数传入回调函数(callback)。 一旦路由匹配, name 参数会触发 "route:name" 事件。如果callback参数省略 router[name]将被用来代替。 后来添加的路由可以覆盖先前声明的路由。

var PageRoute = Backbone.Router.extend({routes: {"help":                 "help",     //1 #help"search/:query":        "search",   //2 #search/list"search/:query/p:page": "search",   //3 #search/list/p6"file/*path":            "file",    //4 #file/image/logo.png":path/:action":         "view"     //5 #account/total},initialize: function () {this.route("help", 'help', function () {console.log('oo, help');});},help: function() {console.log('help')},search: function(query,page) {console.log(query +'/'+ page)},file: function(path){console.log(path)},view: function(path,action){console.log(path +'/'+ action)}
});
var route = new PageRoute();
route.route("search/:query/p:page", 'search', function(query,page){console.log('oo, '+ query +'/'+ page)
});
Backbone.history.start();

  navigate router.navigate(fragment, [options]) 每当你达到你的应用的一个点时,你想保存为一个URL,  可以调用navigate以更新的URL。 如果您也想调用路由功能, 设置trigger选项设置为true。 无需在浏览器的历史记录创建条目来更新URL,  设置 replace选项设置为true。 

var PageRoute = Backbone.Router.extend({routes: {"help":                 "help",     //1 #help"search/:query":        "search",   //2 #search/list"search/:query/p:page": "search",   //3 #search/list/p6"file/*path":            "file",    //4 #file/image/logo.png":path/:action":         "view"     //5 #account/total},help: function() {console.log('help')},search: function(query,page) {console.log(query +'/'+ page)},file: function(path){console.log(path)},view: function(path,action){console.log(path +'/'+ action)}
});
var route = new PageRoute();
setTimeout(function(){route.navigate("search/list/p5",{trigger: true});
},2000);
setTimeout(function(){route.navigate("help",{trigger: true});
},4000);
Backbone.history.start();

转载于:https://www.cnblogs.com/eyeear/p/4701910.html

认识Backbone (五)相关推荐

  1. YOLOv5白皮书-第Y3周:yolov5s.yaml文件解读

    目录 一.课题背景和开发环境 开发环境 二.参数配置 三.anchors配置 四.backbone 五.head 六.调整模型 七.打印模型查看 一.课题背景和开发环境

  2. 汇总|目标检测中的数据增强、backbone、head、neck、损失函数

    点击上方"3D视觉工坊",选择"星标" 干货第一时间送达 作者:Tom Hardy https://zhuanlan.zhihu.com/p/137769687 ...

  3. 推荐五篇论文| 轻量级的Transformer; 对比学习;ResNeSt;Shortcut Learning等

    本文介绍了最近比较有意思的五篇文章: 轻量级的transformer 监督式的对比学习 shortcur learning ResNeSt Attention模块的分析 Lite Transforme ...

  4. 计算机科学导论第五版_五月份将开始提供438项免费在线编程和计算机科学课程

    计算机科学导论第五版 Five years ago, universities like MIT and Stanford first opened up free online courses to ...

  5. 2021高通人工智能创新大赛垃圾分类赛题第五次研讨会

    GT第五次研讨会 一.几点注意事项: 自动测试(OLD) 为了能得到全面公正的竞赛/项目结果,平台通过获取训练得到的模型,以及运行开发者的测试代码进行结果的输出,最后根据输出结果计算评价指标的值,对所 ...

  6. 转:从框架看PHP的五种境界及各自的薪资待遇(仅限于二三线城市,一线除外)...

    在撰写此文前首先必须申明的是本人不鄙视任何一种框架,也无意于挑起PHP框架间的战争,更没有贬低某个框架使用者的用意,本文纯粹个人的看法.你可以认为我无知也好,或者装逼也好,请不要试着在任何情况下,随便 ...

  7. 深度学习之图像分类(二十五)-- S2MLPv2 网络详解

    深度学习之图像分类(二十五)S2MLPv2 网络详解 目录 深度学习之图像分类(二十五)S2MLPv2 网络详解 1. 前言 2. S2MLPv2 2.1 S2MLPv2 Block 2.2 Spat ...

  8. 李沐论文精读系列五:DALL·E2(生成模型串讲,从GANs、VE/VAE/VQ-VAE/DALL·E到扩散模型DDPM/ADM)

    文章目录 一. 前言 1.1 DALL·E简介 1.2 DALL·E2简介 1.3 文生图模型进展 二. 引言 2.1 摘要 2.2 引言&模型结构 三. 算法铺垫 3.1 GANs 3.2 ...

  9. Tensorflow2.0 实现 YOLOv3(二):网络结构(common.py + backbone.py)

    文章目录 文章说明 总体结构 common.py Convolutional 结构 Residual 残差模块 Upsample 结构 backbone.py Darknet53 结构 yolov3. ...

最新文章

  1. 体绘制(Volume Rendering)概述之4:光线投射算法(Ray Casting)实现流程和代码(基于CPU的实现)...
  2. leetcode 10 Regular Expression Matching
  3. 安装使用vmware及vsphere流程介绍
  4. 百度智能云大数据全景架构图如何赋能企业数字化
  5. 敏捷开发方法学及应用
  6. Vue文件在VsCode工具中红色波浪线的问题解决方法
  7. Eureka Server启动源码分析
  8. iOS 使用UILocalizedIndexedCollation实现区域索引标题(Section Indexed Title)即拼音排序...
  9. idea主题颜色Linux,intellij idea 主题大全,看不惯idea 那2种主题的来这里了
  10. 移植qt5.3.1到arm
  11. acm模板 java_java 之acm模板
  12. react根据中文获取拼音_react下将输入的汉字转化为拼音
  13. 竞品分析:网易云音乐和QQ音乐,音乐类app的战场
  14. 正版rust30005_预算大概在3000以内可以买猫吗?
  15. ubuntu18.04 分辨率突然变小,添加1920x1080分辨率,转完变卡默认成集显llvmpipe改独显方法
  16. 计算机基础和photoshop的应用,一级计算机基础与Photoshop应用真题
  17. 什么是「区块高度」?
  18. 初来乍到,springboot入门项目
  19. 终于找到了ubuntu卡的原因!
  20. php path separator,php_DIRECTORY_SEPARATOR 和 PATH_SEPARATOR

热门文章

  1. Hadoop集群的基本操作(四:Hive的基本操作)
  2. Python 数据库操作 psycopg2
  3. 联想e580没有声音_现在你可以购买通过 Linux 认证的联想 ThinkPad 和 ThinkStation
  4. (C++)1041 考试座位号
  5. python和idl_有前辈对比过IDL和Python的速度吗,哪个会快点?
  6. MySQL数据库高可用集群搭建-PXC集群部署
  7. SQL快速入门 ( MySQL快速入门, MySQL参考, MySQL快速回顾 )
  8. 组策略 从入门到精通(二) 如何区别跨越WAN网的计算机对组策略的套用
  9. android上line-height的问题
  10. MyEclipse10中导入的jquery文件报错(出现红叉叉,提示语法错误)