4

我对 Backbone.js / Marionette.js 中的路由有三个问题：

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

例如对于 Express.js（在 Node.js 中），它将是app.routes.

我正在尝试对 Backbone.js / Marionette.js 做同样的事情，但找不到任何这样做的属性或方法。

  • 2）我想清理我的网址并删除它们前面的主题标签“#”，我知道它们会触发路由器，那么我该如何做到这一点？

我找到了以下原型的主干路由器的脚本，但它更像是一个黑客而不是一个稳定的解决方案：没有哈希 URL 的简单主干路由

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

我所说的子路由器是指只处理部分 url 的路由器，例如：

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

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

这将通过让我在 AppRouter 中定义主要路由和在特定类别的子路由器中定义所有子路由（第二个斜杠“/”之后的部分）来对我的 URL 进行更多分类。

因此，对于以下 URL：“hostname/articles/science”，路由过程将如下所示：

  • 1）将“/articles/science”传递给AppRouter
  • 2）AppRouter拆分URI，取“/articles”部分
  • 3) AppRouter 找到注册的“/articles”路由
  • 4) AppRouter 识别出 MyArticleRouter 绑定到那个 URI 元素
  • 5) AppRouter 将路由转发到该路由器，并且仅将“/science”元素作为路由传递
  • 6) MyArticleRouter 将“/science”路由到 someMethod() 并运行它

先感谢您 ！

4

1 回答 1

9

＃1的答案：

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

＃2的答案：

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

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：

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

最后一个片段必须在您初始化所有路由器后运行。

＃3的答案：

这可能有助于拆分您的路线：

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;
});
于 2013-08-16T14:43:14.337 回答