Backbone.js/Marionette.js中的路由-没有主题标签，路由列表和子路由器 [英] Routing in Backbone.js / Marionette.js - no hashtags, route list and sub-routers

问题描述

关于Backbone.js/Marionette.js中的路由，我有三个问题:

I have three questions about routing in Backbone.js / Marionette.js :

• 1)如何获取应用程序路由器已注册的所有路由的列表?

例如，对于Express.js(在Node.js中)，它将为app.routes.

For example for Express.js (in Node.js) it would be app.routes.

我正在尝试对Backbone.js/Marionette.js进行同样的操作，但是找不到执行此操作的任何属性或方法.

I'm trying to do the same with Backbone.js / Marionette.js but couldn't find any property or method that did this.

• 2)我想清理URL并删除它们前面的#号，我知道它们会触发路由器，所以我该如何做到这一点?

我发现以下脚本是Backbone路由器的原型，但它比稳定的解决方案更像是黑客:没有哈希URL的简单主干路由

I found the following script that prototypes the Backbone router, but it's more of a hack than a stable solution : Simple backbone routing without hash URLs

• 3)Backbone.js/Marionette.js中是否可以有子路由器?

我所说的子路由器是只处理一部分网址的路由器，例如:

What I mean by sub-router is a router which only handles a part of a url, e.g :

var AppRouter = Backbone.Router.extend({
    routes: {
        'articles' : 'MyArticleRouter'
    }
});

var MyArticleRouter = Backbone.Router.extend({
    routes: {
        'science' : 'someMethod',
        'literrature' : 'someOtherMethod'
    }
});

通过让我在AppRouter中定义主要路由以及特定于类别的子路由器中的所有子路由(在第二个斜杠"/"之后的部分)，可以对URL进行更多分类.

This would categorise my URLs a little bit more by letting me define the main routes in AppRouter and all the subroutes (part after the second slash "/") in category-specific sub-routers.

因此对于以下URL:主机名/文章/科学"，路由过程如下所示:

So for the following URL : "hostname/articles/science", the routing process would look something like this :

• 1)将"/articles/science"传递给AppRouter
• 2)AppRouter拆分URI，并使用"/articles"部分
• 3)AppRouter找到已注册的"/articles"路线
• 4)AppRouter识别MyArticleRouter绑定到该URI元素
• 5)AppRouter将路由转发到该路由器，并且仅将"/science"元素作为路由传递
• 6)MyArticleRouter将"/science"路由到someMethod()并运行

提前谢谢！

推荐答案

回答#1:

所有路线都在Backbone.history.handlers中注册.

#2的答案:

您可以为网站中的每个链接添加处理程序:

You can add a handler to every link in your site:

var application = new Backbone.Marionette.Application();

application.addInitializer(function(options) {
    // Add class to target a browser, not as standalone app.
    if(window.navigator.standalone != true) {
        $('body').addClass('no-standalone');
    }

    // Prevent internal links from causing a page refresh.
    $(document).on('click', 'a', function(event) {
        var fragment = Backbone.history.getFragment($(this).attr('href'));
        var matched = _.any(Backbone.history.handlers, function(handler) {
            return handler.route.test(fragment);
        });
        if (matched) {
            event.preventDefault();
            Backbone.history.navigate(fragment, { trigger: true });
        }
    });
});

当然要确保使用pushState:

Of course make sure you use pushState:

    if (!Backbone.history.started) {
        Backbone.history.start({ pushState: true });
    }

最后一个代码段必须在初始化所有路由器后运行.

That last snippet must be run after you have initialized all your routers.

#3的答案:

这可能会稍微分散您的路线:

This may work a little to split your routes:

define([
    'backbone',
    'underscore',
    'routers/dashboard',
    'routers/anotherroute1',
    'routers/anotherroute2'
],

function(Backbone, _, DashboardRouter, AnotherRoute1, AnotherRoute2) {
    'use strict';

    var application = new Backbone.Marionette.Application();

    application.addInitializer(function () {

        _.each([DashboardRouter, AnotherRoute1, AnotherRoute2], function(router) {
            new router();
        });

        if (!Backbone.history.started) {
            Backbone.history.start({ pushState: true });
        }
    });

    return application;
});

这篇关于Backbone.js/Marionette.js中的路由-没有主题标签，路由列表和子路由器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！