博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
BackbOne移动端框架学习(4):backbone中的 Router
阅读量:5138 次
发布时间:2019-06-13

本文共 2449 字,大约阅读时间需要 8 分钟。

声明:

前言:

  话说,我是开发hybrid APP,使用Backbone真的好吗?在Hybrid里碰不到路由的问题。

1,History pushState/replaceSate

   在学习BackbOne之前,我们要先了解下 H5 最新的 API -- pushState,这个功能解决了什么问题?

  众所周知 Ajax的出现,使得我们的页面变得更加的友好和丰富,但是也同样带来了一些问题,比如 浏览器中前进和后退。而 pushState 的出现,就是解决这一问题的方法。

  具体用法:

  /*            ajax载入~~        */                // history处理        var title = "上海3月开盘项目汇总-" + $(this).text().replace(/\d+$/, "");        document.title = title;        if (event && /\d/.test(event.button)) {                        history.pushState({ title: title }, title, location.href.split("?")[0] + "?" + query     );

  history.replaceSate的方法,是在页面刚初始化的时候,也要对历史记录进行初始化操作,就使用 replaceSate()方法。

2,Backbone.Router

  Router 的意思是 路由,在Backbone是控制 Url。

  一个简单的代码如下:

var AppRouter = Backbone.Router.extend({                                //设置默认的路由规则                routes:{                    "*actions":"defaultRoute" //#actions                },                defaultRoute:function(actions){                    console.log(actions);                }        });        var app_router = new AppRouter;        Backbone.history.start(); //确保驱动初始化URL路由

  以上的代码意思是:创建一个路由类,设置其默认路由规则,创建自定义方法,声明一个实例并启动URL路由功能,

  routes将带参数的URLs映射到路由实例的方法上,简单的说就是为url绑定事件,其中"*actions" 等于 url(http://xx.html?a=1#ss)#右边的字符。

3,Routes映射传参数
var AppRouter = Backbone.Router.extend({                                //设置默认的路由规则                routes:{                    "*actions"                :    "defaultRoute",                    "search/:query/p:page"    :    "search",                    "/getPost/:id"            :    "getPostId"                },                defaultRoute:function(actions){                    console.log(actions);                },                search:function(query,page){                    console.log(page); //search/软件随想录/p2                 },                getPostId:function(id){                    cosnole.log(id);  //getPost/2                 }        });        var app_router = new AppRouter;        Backbone.history.start(); //确保驱动初始化URL路由

  从上面已经可以看出来匹配 # 标签之后内容的方法有两种:

    第一种:用“:”来把 # 后面对应位置作为参数;

    第二种:用“*”,它可以匹配所有的url;

 

4,看完整的例子

  有两个HTML文件,Router.html 和 router_new.html。

  Router.html代码如下:

 

   router_new.html代码如下:

  

       

 

 至此,Backbone的Route讲解完毕,其中我也碰到过不明白的地方,比如由 Route.html带动参数传入到router_new.html的时候,应该输出带过的值才对,但是输出的却是完整的路径?

  

转载于:https://www.cnblogs.com/zhiyuan-2011/articles/3939187.html

你可能感兴趣的文章
23种设计模式 视频教程
查看>>
ST公司三轴加速度计LIS3DH应用
查看>>
Dell V5460 安装Winxp成功总结
查看>>
python 数据类型
查看>>
双网卡绑定一个IP,bond,捆绑
查看>>
流程控制
查看>>
Ze_Min Tree 主席树
查看>>
WinForm"仿js星形评分效果"控件制作经验分享(原创) 之配餐系统的开发
查看>>
Linux目录
查看>>
mysql命令总结
查看>>
Linux内核驱动模块【转】
查看>>
ListOperations
查看>>
[湖南集训] 谈笑风生 (主席树)
查看>>
oj 2026 首字母变大写
查看>>
Ext.net TreeGrid
查看>>
26、Oracle(二)
查看>>
BZOJ2402: 陶陶的难题II(树链剖分,0/1分数规划,斜率优化Dp)
查看>>
wget: unable to resolve host address的解决方法
查看>>
Ubuntu安装nodejs
查看>>
[凯立德]升级时如何保留上个版本的地址薄和轨迹
查看>>