用于使用路由历史 API 的 Backbone.js 通用引导模式

Question

我有一个单页 Web 应用程序是在backbonejs 上编写的。我使用不同的路线，每条路线对应一个控制器。当我加载我的应用程序根 URL (myapp.com/) 或任何没有参数的非根 URL (myapp.com/somelocation) 时，它可以正常工作。但是，当我尝试使用查询参数（即 myapp.com/somelocation?z=search）将我的应用程序直接加载到任何位置时，我遇到了一些麻烦。应用呈现两次 - 第一次使用对应于 myapp.com/somelocation?z=search 的正确控制器，第二次使用对应于 myapp.com/somelocation 的控制器。

路由表如下所示：

routes: {
        'login': 'login',
        'home': 'home',
        'timeline?*query': 'timelineWithQuery',
        'timeline': 'timeline',
         ...
        '*path': 'defaultRoute'
    }, ...

控制器如下所示：

defaultRoute: function() {
    router.navigate('home', {trigger: true});        
},

login: function(args) {
    var controller = new App.PageController.Mobile.AuthPageController($('body'));
    controller.executeLogin(args);
},

timeline: function(args) {
    var controller = new App.PageController.Mobile.TimelinePageController($('body'));
    controller.executeTimeline(args);
}, ...

Document.ready 脚本如下所示：

// ...
router.navigate(window.location, {trigger: true});
// ...

如果我不调用 router.navigate(window.location, {trigger: true});明确地没有一个控制器呈现我的应用程序起始页。当我调用它时，应用程序正常工作，直到我尝试从 myapp.com/timeline?foo=bar URL 开始。如果我这样做，我的应用程序会呈现两次（无需重新加载页面）。

有什么建议吗？具有丰富路由场景的主干js驱动的单页应用程序的常见 document.ready 引导模式是什么？

Answer 1

导航使用location.pathname（通过pushState）或location.hash，因此location.queryString不是导航过程的一部分。我不确定这一行：'timeline?*query': 'timelineWithQuery', 是如何转换为正则表达式的，顺便说一句，这并不重要，因为您每次都会在 my/path 上运行该正则表达式，而不是在 my/path?queryString 上。

您必须在Backbone.history.start({pushState: true}) 之前定义每条路线。当您调用它时，它应该运行当前路线，因此您不必在此之后手动调用导航。