Question

我希望在一个页面上有多个路由器以实现模块化。我在不同的js文件中初始化$(document).ready()上的路由器。当我只有一台路由器工作正常，因为我可以在初始化路由器后立即调用History.start()，但现在我有多个路由器可以从不同的文件初始化，我不知道何时调用{{1 }}

例如：

History.start()

在router1.js中：

<script src="router1.js" type="text/javascript"></script>
<script src="router2.js" type="text/javascript"></script>

同样适用于router2。

最好的解决方案是添加一个在页面末尾调用$(document).ready(function(){ new Core.Routers.Router1() });的新$(document).ready()吗？我不认为doc ready调用是阻塞的，所以不会引入竞争条件，其中所有路由器可能在History.start()被调用之前未被初始化。

Answer 1

您只需在应用中拨打Backbone.history.start()一次，并且调用它时的唯一标准是至少必须实例化一个路由器。

所以，你可以很容易地做到这一点：


$(function(){
  new MyRouter();
  Backbone.history.start();
});


$(function(){
  new AnotherRouter();
});


$(function(){
  new AndMoreRouters();
});

我定期对路由器做类似的事情，并且我经常在页面加载并且用户正在与页面交互后很长时间启动新的路由器。

FWIW，你可能对我在Backbone.Marionette插件中的初始化器的想法感兴趣，并记录在这篇博文中：http://lostechies.com/derickbailey/2011/12/16/composite-javascript-applications-with-backbone-and-backbone-marionette/

Answer 2

您也可以查看Backbone.History.started ...

    var Router = Backbone.Router.extend({
        routes: {
            '': 'load'
        },
        initialize: function () {

        },
        load: function () {

        }
    });

    $(function () {
        new Router();
        if (!Backbone.History.started) {
            Backbone.history.start();
        }
    });

最近在拉取请求中添加了它。

请务必查看Derick的Marionette插件，它非常棒。

骨干＆gt;多个路由器和History.start

2 个答案: