Backbone.Router实践

摘要:
简单示例varAppRouter=Backone。路由器。延伸varapp_ router=新应用路由器;Backbone.history.start();路由器需要通过调用Backone来初始化。历史start()方法。varAppRouter=Backbone.Router.extend;varapp_ router=新应用路由器;Backbone.history.start();上述手动启动路由器的示例是通过单击页面将路由器触发到相应的方法。在实际使用中,也有一种场景需要在特定逻辑中触发事件,就像jQuery中的触发器一样。以下代码显示了如何手动触发路由器。

前面介绍了Model和Collection,基本上属于程序中静态的数据部分。这一节介绍Backbone中的router,属于动态的部分,见名知意,router——路由的意思,显然是能够控制url指向哪个函数的。具体是怎么做的一会通过几个实例来看看。

在现在的单页应用中,所有的操作、内容都在一个页面上呈现,这意味着浏览器的url始终要定位到当前页面。那么一个页面中的所有的操作总不能都通过事件监听来完成,尤其是对于需要切换页面的场景以及需要分享、收藏固定链接的情况。因此就有了router,通过hash的方式(即#page)来完成。不过随着浏览器发展,大多数的浏览器已经可以通过history api来操控url的改变,可以直接使用 /page 来完成之前需要hash来完成的操作,这种方式看起来更为直观一些。下面提供过几个demo来切实体会一番。

简单例子

var AppRouter = Backbone.Router.extend({
    routes: {
        "*actions" : "defaultRoute"
    },

    defaultRoute : function(actions){
        alert(actions);
    }
});

var app_router = new AppRouter;

Backbone.history.start();

需要通过调用Backbone.history.start()方法来初始化这个Router。

在页面上需要有这样的a标签:

<a href="#actions">testActions</a>

点击该链接时,便会触发defaultRouter这个方法。

Routers映射如何传参数

看如下例子:

var AppRouter = Backbone.Router.extend({

    routes: {
        "posts/:id" : "getPost",
        "*actions" : "defaultRoute"
    },

    getPost: function(id) {
        alert(id);
    },

    defaultRoute : function(actions){
        alert(actions);
    }
});

var app_router = new AppRouter;
Backbone.history.start();

对应的页面上应该有一个超链接:

<a href="#/posts/120">Post 120</a>

从上面已经可以看到匹配#标签之后内容的方法,有两种:一种是用“:”来把#后面的对应的位置作为参数;还有一种是“*”,它可以匹配所有的url,下面再来演练一下。

var AppRouter = Backbone.Router.extend({

    routes: {大专栏  Backbone.Router实践>
        "posts/:id" : "getPost",
        //下面对应的链接为<a href="http://t.zoukankan.com/lijianming180-p-12389539.html#/download/user/images/hey.gif">download gif</a>
        "download/*path": "downloadFile",
        //下面对应的链接为<a href="http://t.zoukankan.com/lijianming180-p-12389539.html#/dashboard/graph">Load Route/Action View</a>
        ":route/:action": "loadView",
        "*actions" : "defaultRoute"
    },

    getPost: function(id) {
        alert(id);
    },

    defaultRoute : function(actions){
        alert(actions);
    },

    downloadFile: function( path ){
        alert(path); // user/images/hey.gif
    },

    loadView: function( route, action ){
        alert(route + "_" + action); // dashboard_graph
    }

});

var app_router = new AppRouter;
Backbone.history.start();

手动出发Router

上面的例子都是通过页面点击触发router到对应的方法上,在实际的使用中,还存在一种场景就是需要在某一个逻辑中触发某一个事件,就像是jQuery中得trigger一样,下面的代码展示怎么手动触发router。

routes: {
    "posts/:id" : "getPost",
    "manual": "manual",
    "*actions": "defaultRoute",
},
// 省略部分代码
loadView: function( route, action ){
    alert(route + "_" + action); // dashboard_graph
},
manual: function() {
    alert("call manual");
    app_router.navigate("/posts/" + 404, {trigger: true, replace: true});
}

对应着在页面添加一个a标签: <a href="http://t.zoukankan.com/lijianming180-p-12389539.html#/manual">manual</a> 然后点击这个链接,便会触发posts/:id对应的方法。

这里需要解释的是navigate后面的两个参数。trigger表示触发事件,如果为false,则只是url变化,并不会触发事件,replace表示url替换,而不是前进到这个url,意味着启用该参数,浏览器的history不会记录这个变动。

完整代码依然在 code 中可以找到。

免责声明:文章转载自《Backbone.Router实践》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Linux xen 网桥配置软件测试理论1下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

PHP 自定义 alert 跳转方法

/** * 跳转方法 * @param $msg * @param null $path * @param null $parent */ public function alert($msg,$path=NULL,$parent=NULL){ if($parent ===...

软件测试学习随笔(3) 等价类划分之三个输入框

     在上一篇博客中使用了一个例子来说明等价类划分的方法,今天将在这篇博客中对这个程序的改进版进行测试。首先先来看一下改进版的截图:                     在原来一个输入框的基础上增加了为三个输入框,每个输入框的输入要求和原来的一样,即允许输入1-6个英文字符或数字。然后我们将对它进行测试            等价类划分如下:...

this.$alert 方法

this.$alert('确认删除吗', '提示', { confirmButtonText: '确定', callback: action => { this.function() } });...

javaScript 基础知识汇总(六)

1、基本类型与对象的区别   基本类型:是原始类型的中的一种值。        在JavaScript中有6中基本类型:string number  boolean  symbol  null  undefined   对象类型:能够存储多个值作为属性        可以使用大括号{}创建对象,例如:{name:"xiao",age:23}.。JavaSc...

WPF使用Webbrowser操作网页的主要代码

1,引用mshtml.dll using mshtml; 2,获取元素属性值 IHTMLDocument2 doc2=(IHTMLDocument)webbrowser1.Document; IHTMLElement img=(IHTMLElement)doc2.all.item("regimg",0); string imgUrl=(string)i...

前端不为人知的一面--前端冷知识集锦 前端已经被玩儿坏了!像console.log()可以向控制台输出图片

前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前端技能,一些属于技巧,一些则是闻所未闻的冷知识,一时间还消化不过来。现分类整理出来分享给大家,也补充了一些平时的积累和扩展了一些内容。 HTML篇 浏览器地址...