Question

与Backbone Router陷入困境。想象一下，我有2个Backbone路由器：

1）RootRouter - 只有一个路由，唯一的责任 - 用RequireJS加载子路由器并实例化它。

var RootRouter = Backbone.Router.extend({
    routes: {
        '*all': 'invokeSubModule'
    },
    invokeSubModule: function(route, args) {
        require(['SubRouter'], function(subRouter) {
            new subRouter()
        })
    }
});

2）SubRouter - 具有路由哈希和处理程序的标准BB路由器。

var SubRouter = Backbone.Router.extend({
    routes: {
        'some/bar': 'doBar',
        'some/foo': 'doFoo'
    },
    doBar: function() { ... },
    doFoo: function() { ... }
});

我从some/bar网址开始申请。在开始RootRouter实例化和Backbone.History开始时。按预期RootRouter - 匹配任何网址并触发invokeSubModule - 异步加载和SubRouter实例化按预期工作，但问题与some/bar SubRouter处理程序相关联因为页面网址从上一次route未发生更改而未触发。

寻找解决方案我只找到了在历史开始之前加载子路由器的情况的答案，但在我的情况下它没用。

所以经过一些挖掘后我找到了解决方案 - 扩展Backbone.Route并覆盖route方法，以便在Backbone.getHash()等于路由方法操作时调用处理程序。

Backbone.Router.extend({
     route: function(route, name, callback) {
        ...
        if (!callback) callback = this[name];

        /* run handler immediately if route we add is the current URL fragment */
        if(routeRegexp.test(Backbone.history.getHash()) ) {
            this.execute(callback, this._extractParameters(routeRegexp, routeStr));
        }

        Backbone.history.route(route, function(fragment) {
            ....
        });

        return this;
    }
})

所以我很困惑，这只是一个黑客，并可能导致未来可能的错误。所以寻找最佳实践如何解决这个问题并批评我的解决方案。

同时期望尽可能回答如何在没有RootRouter的情况下管理路由器延迟加载，因为在这种情况下，不会触发第一个route。

Answer 1

我能够复制你需要的行为，而不会破坏骨干路由的内部，但我必须在初始化中做一些事情。

首先我将使用silent option = true

创建主路由器并启动主干历史记录

var mainRouter = new RootRouter();
Backbone.history.start({silent: true});

这将启动骨干历史记录，但不会路由当前网址。然后我得到了当前片段并将其保存供以后使用，然后导航到基本网址，然后返回原始片段

var fragment = Backbone.history.fragment;
mainRouter.navigate('reset',true);
mainRouter.navigate(fragment, true);

这种方法的不好的一面是你需要在启动时进行2路由

更新：

低于完整样本

<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> sample </title>

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>
  <script type="text/javascript" src="http://backbonejs.org/backbone-min.js"></script>


  <style type="text/css">

  </style>

  <script>
    var RootRouter = Backbone.Router.extend({
    routes: {
        '*all': 'invokeSubModule',
        'reset': 'invokeSubModule',
    },
    invokeSubModule: function(route, args) {
        new SubRouter();
    },

    navigate: function () {
                Backbone.Router.prototype.navigate.apply(this, arguments);
            },

    execute: function(callback, args) {
                console.log('execute root');
                Backbone.Router.prototype.execute.apply(this, arguments);
                console.log ('current fragment ' + Backbone.history.fragment);
            }
    });

    var SubRouter = Backbone.Router.extend({
    routes: {
        'some/bar': 'doBar',
        'some/foo': 'doFoo'
    },

    navigate: function () {
                Backbone.Router.prototype.navigate.apply(this, arguments);
            },
    execute: function(callback, args) {
                console.log('execute sub');
                Backbone.Router.prototype.execute.apply(this, arguments);
                console.log ('current fragment ' + Backbone.history.fragment);
            },
    doBar: function() { 
        $('#content').html('').append('<p>BAR</p>'); 
    },
    doFoo: function() { 
        $('#content').html('').append('<p>FOO</p>'); 
    }
});

    $(document).ready(function(){
        var mainRouter = new RootRouter();
        Backbone.history.start({silent: true});
        var fragment = Backbone.history.fragment;
        mainRouter.navigate('#',true);
        mainRouter.navigate(fragment, true);

        $('a').click(function(){
            mainRouter.navigate($(this).attr('href'));
        });
    });
  </script>

</head>
<body>
    <a id='home' href="#">home</a></br>
    <a id='foo' href="#/some/foo">foo</a></br>
    <a id='bar' href="#/some/bar">bar</a></br>
    <div id='content'>HOME</div>
</body></html>

Backbone多路由器陷阱 - 子路由器处理程序doesent invoke

1 个答案: