认识Backbone (五)
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 (五)相关推荐
- YOLOv5白皮书-第Y3周:yolov5s.yaml文件解读
目录 一.课题背景和开发环境 开发环境 二.参数配置 三.anchors配置 四.backbone 五.head 六.调整模型 七.打印模型查看 一.课题背景和开发环境
- 汇总|目标检测中的数据增强、backbone、head、neck、损失函数
点击上方"3D视觉工坊",选择"星标" 干货第一时间送达 作者:Tom Hardy https://zhuanlan.zhihu.com/p/137769687 ...
- 推荐五篇论文| 轻量级的Transformer; 对比学习;ResNeSt;Shortcut Learning等
本文介绍了最近比较有意思的五篇文章: 轻量级的transformer 监督式的对比学习 shortcur learning ResNeSt Attention模块的分析 Lite Transforme ...
- 计算机科学导论第五版_五月份将开始提供438项免费在线编程和计算机科学课程
计算机科学导论第五版 Five years ago, universities like MIT and Stanford first opened up free online courses to ...
- 2021高通人工智能创新大赛垃圾分类赛题第五次研讨会
GT第五次研讨会 一.几点注意事项: 自动测试(OLD) 为了能得到全面公正的竞赛/项目结果,平台通过获取训练得到的模型,以及运行开发者的测试代码进行结果的输出,最后根据输出结果计算评价指标的值,对所 ...
- 转:从框架看PHP的五种境界及各自的薪资待遇(仅限于二三线城市,一线除外)...
在撰写此文前首先必须申明的是本人不鄙视任何一种框架,也无意于挑起PHP框架间的战争,更没有贬低某个框架使用者的用意,本文纯粹个人的看法.你可以认为我无知也好,或者装逼也好,请不要试着在任何情况下,随便 ...
- 深度学习之图像分类(二十五)-- S2MLPv2 网络详解
深度学习之图像分类(二十五)S2MLPv2 网络详解 目录 深度学习之图像分类(二十五)S2MLPv2 网络详解 1. 前言 2. S2MLPv2 2.1 S2MLPv2 Block 2.2 Spat ...
- 李沐论文精读系列五: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 ...
- Tensorflow2.0 实现 YOLOv3(二):网络结构(common.py + backbone.py)
文章目录 文章说明 总体结构 common.py Convolutional 结构 Residual 残差模块 Upsample 结构 backbone.py Darknet53 结构 yolov3. ...
最新文章
- 体绘制(Volume Rendering)概述之4:光线投射算法(Ray Casting)实现流程和代码(基于CPU的实现)...
- leetcode 10 Regular Expression Matching
- 安装使用vmware及vsphere流程介绍
- 百度智能云大数据全景架构图如何赋能企业数字化
- 敏捷开发方法学及应用
- Vue文件在VsCode工具中红色波浪线的问题解决方法
- Eureka Server启动源码分析
- iOS 使用UILocalizedIndexedCollation实现区域索引标题(Section Indexed Title)即拼音排序...
- idea主题颜色Linux,intellij idea 主题大全,看不惯idea 那2种主题的来这里了
- 移植qt5.3.1到arm
- acm模板 java_java 之acm模板
- react根据中文获取拼音_react下将输入的汉字转化为拼音
- 竞品分析:网易云音乐和QQ音乐,音乐类app的战场
- 正版rust30005_预算大概在3000以内可以买猫吗?
- ubuntu18.04 分辨率突然变小,添加1920x1080分辨率,转完变卡默认成集显llvmpipe改独显方法
- 计算机基础和photoshop的应用,一级计算机基础与Photoshop应用真题
- 什么是「区块高度」?
- 初来乍到,springboot入门项目
- 终于找到了ubuntu卡的原因!
- php path separator,php_DIRECTORY_SEPARATOR 和 PATH_SEPARATOR
热门文章
- Hadoop集群的基本操作(四:Hive的基本操作)
- Python 数据库操作 psycopg2
- 联想e580没有声音_现在你可以购买通过 Linux 认证的联想 ThinkPad 和 ThinkStation
- (C++)1041 考试座位号
- python和idl_有前辈对比过IDL和Python的速度吗,哪个会快点?
- MySQL数据库高可用集群搭建-PXC集群部署
- SQL快速入门 ( MySQL快速入门, MySQL参考, MySQL快速回顾 )
- 组策略 从入门到精通(二) 如何区别跨越WAN网的计算机对组策略的套用
- android上line-height的问题
- MyEclipse10中导入的jquery文件报错(出现红叉叉,提示语法错误)