backbone之路由锚点的替换
1、需求
由于项目一开始做的时候不甚完善,所有的网页没有路由功能,导致一些搜索结果在页面跳转之后,没有被记录下来,在页面跳转之后回退,得到的是页面最原始的结果,没有指定的搜索条件。最近项目的在完善这些小的细节,所以在此记录一下。
2、操作
由于项目的所有传参都是使用 '?' 来标识的,而Backbone的路由是使用锚点 '#' 来的,为了兼容以前的做法,不得不去修改Backbone的源码,还好路由部分的源码不多
2.1 修改Backbone的源码,版本1.3.3
1)修改标识 '#' -> '?'
把源代码中的字符串中的'#'修改为'?',把单个的'#'修改为'?'
例:
var pathStripper = /#.*$/;
修改为:
var pathStripper = /\?.*$/;
例:
this.location.replace(rootPath + '#' + this.getPath());
修改为:
this.location.replace(rootPath + '?' + this.getPath());
注:字符串中的?需要\来转义,字符不需要
2)修改锚点的路由设置
_updateHash: function(location, fragment, replace) {
if (replace) {
var href = location.href.replace(/(javascript:|\?).*$/, '');
location.replace(href + '?' + fragment);
} else {
// Some browsers require that `hash` contains a leading #.
// location.hash = '?' + fragment;
var href = location.href.replace(/(javascript:|\?).*$/, '');
// window.history.pushState({}, 0, href + '?' + fragment);
window.history.replaceState({}, 0, href + '?' + fragment);
}
}
注:
location.hash是原始的修改参数方法,会替换url中'#'以及后的所有内容
window.history.pushState可选目标方法,会增加一次历史记录,刷新页面
window.history.replaceState可选目标方法,会替换掉当前的页面记录,不刷新页面(目前选用方案)
2.2 写一个Util
写一个工具类用于Router的快速使用,和统一修改
/**
* RouterUtil.js
*/
var RouterUtil = (function() {
// Backbone Router with a custom parameter extractor
var Router = Backbone.Router.extend({
params : "",
routes : {
"*actions": "defaultRoute" // 匹配 http://example.com/#anything-here
},
defaultRoute : function(params) {
Router.params = params;
},
});
var routerUtil = {
web_router : null,
init(){
// 初始化
if(!routerUtil.web_router){
routerUtil.web_router = new Router;
Backbone.history.start();
}
},
getParam(cbFn){
routerUtil.init();
// 获取#之后的参数
if(cbFn){
cbFn(Router.params);
}
},
route(returnUrl, cbFn){
// 动态的调整 路由规则 例:topic/:pageno/:pagesize
routerUtil.web_router.route(returnUrl,"page", cbFn)
},
start(){
// 启用路由
if(!Backbone.History.started){
Backbone.history.start();
}
},
stop(){
// 关闭路由
if(Backbone.History.started){
Backbone.history.stop();
}
},
navigate(returnUrl){
/**
* 重构 ,路由导向
*/
//此处根据自己的需求去构建参数拼接
//returnUrl为'?'之后的内容
if(returnUrl){
}else{
returnUrl = "searchType=" + SearchBoxUtil.searchType + "&" + SearchBoxUtil.formData;
}
routerUtil.web_router.navigate(returnUrl, {
trigger: true
});
}
}
return routerUtil;
})();
2.3 使用
在js中引用的一些方法
// 页面的初始化
initPagi : function(){
RouterUtil.getParam(function(params){
if(!params){
params = "";
}
//处理参数
...
});
},
//查询函数
queryData : function(returnUrl,isInitSearchBox){
if(!returnUrl){
returnUrl = "";
}
if(isInitSearchBox){
//第一次初始化查询
}else{
//非第一次初始化查询
RouterUtil.navigate(returnUrl);
}
...
},
菜鸟一枚,随便弄弄的一点代码,有更好的方案请赐教
backbone之路由锚点的替换的更多相关文章
- Router和History (路由控制)-backbone
Router和History (路由控制) Backbone.Router担任了一部分Controller(控制器)的工作,它一般运行在单页应用中,能将特定的URL或锚点规则绑定到一个指定的方法(后文 ...
- 全面解析JavaScript的Backbone.js框架中的Router路由
这篇文章主要介绍了Backbone.js框架中的Router路由功能,Router在Backbone中相当于一个MVC框架中的Controller控制器功能,需要的朋友可以参考下. Backbone ...
- BackBone结合ASP.NET MVC实现页面路由操作
1. 问题的背景 什么是页面路由操作,就是通过浏览器地址栏的标记来实现页面内部的一些操作,这些操作具有异步性和持久性.应用场景主要有页面操作过程中的添加收藏夹的操作.后退操作等过程中能完全恢复界面. ...
- backbone.Router History源码笔记
Backbone.History和Backbone.Router history和router都是控制路由的,做一个单页应用,要控制前进后退,就可以用到他们了. History类用于监听URL的变化, ...
- Backbone源码阅读手记
Backbone.js是前端的MVC框架,它通过提供模型Models.集合Collection.视图Veiew赋予了Web应用程序分层结构.从源码中可以知道,Backbone主要分了以下几个模块: ( ...
- Backbone框架浅析
Backbone是前端mvc开发模式的框架.它能够让view和model相分离,让代码结构更清晰简答,开发进度加快,维护代码方便.但是,现在出了一种mvvm框架,它是下一代前端mvc开发模式的框架,代 ...
- backbone库学习-Router
backbone库的结构http://www.cnblogs.com/nuysoft/archive/2012/03/19/2404274.html 本文的例子来自http://blog.csdn.n ...
- Backbone笔记(续)
Backbone Bockbone 总览 Backbone 与 MVC 模式:解决某一类问题的通用方案 - 套路 MVC:一种架构模式,解耦代码,分离关注点 M(Model) - 数据模型 V(Vie ...
- Backbone源码分析-Backbone架构+流程图
作者:nuysoft/高云/nuysoft@gmail.com 声明:本文为原创文章,如需转载,请注明来源并保留原文链接. Backbone0.9.1源码分析分析系列 jQuery1.6.1源码分析系 ...
随机推荐
- PHP trait 特性在 Laravel 中的使用个人心得
trait 是在PHP5.4中为了方便代码复用的一种实现方式,但目前我在看的的PHP项目中较少看的有程序员去主动使用这个实现方式,在laravel中有很多 trait 的使用,关于trait 在 la ...
- Flot Reference flot参考文档
Consider a call to the plot function:下面是对绘图函数plot的调用: var plot = $.plot(placeholder, data, options) ...
- Virtualbox使用点滴(共享USB设备,Linux下我的用户没有加到vboxuser中去)
由于网银客户端的问题,只能够在windows环境下支付,所以一直保存着一个激活的virtualbox下的windows,用来完成在线支付. 过去这个激活的windows是安装在ubuntu 10.10 ...
- c# 文本超长截断
根据控件大小进行截断 private void SetStringTruncat(Static.LabelEx lbl) { string oldStr = lbl.Text; if (string. ...
- Android开发环境搭建(原创)
1,我的环境: win8 64位 2,软件安装: 1) jdk-7u40-windows-i586.exe 下载合适的版本,我下载的是 jdk7u40 32位 for windows 安装JDK,配置 ...
- python-监控服务
最近写了一个web测试程序,因为部署在其他地方,所以想弄个监控的进程去看服务是不是还在,要是不在好发邮件,就用python简单的写了一个. 想法是这样的,单独运行一个monitor的脚本,每隔一段时间 ...
- 宜信开源|数据库审核软件Themis的规则解析与部署攻略
一.介绍 Themis是宜信公司DBA团队开发的一款数据库审核产品,可帮助DBA.开发人员快速发现数据库质量问题,提升工作效率.其名称源自希腊神话中的正义与法律女神.项目取此名称,寓意此平台对数据库质 ...
- jQuery-ajax-.load方法
使用jQuery封装的ajax是非常好用的,这个里面提供了几个比较好用的方法. load(url[,data, callback])方法: 说明:这个是jQuery中的最底层方法$.ajax()封装的 ...
- Mac上使用ssh连接服务器title显示服务器的ip
Mac上使用ssh连接服务器title显示服务器的ip 使用Mac开发时,管理的服务器过多时,会搞混乱.可能有时啪啪啪一顿操作,最后发现操作错了机器. 解决方案 在远程服务器上,编辑vim /etc/ ...
- centos crontab用法详解 定时任务的设置
crontab 是用来让使用者在固定时间或固定间隔执行程序之用,类似于windows的计划任务 安装: yum -y install vixie-cron yum -y install crontab ...