backbone.js - 异步添加主干路由。

Question

我被一个大型主干应用程序困住了。

它在主应用程序中运行不同的应用程序。我们希望将应用程序和路由异步添加到大型应用程序。

我现在要做的是在加载主要应用程序后使用 Require.JS 异步添加不同的应用程序。要将新路线添加到主路线，我会停止历史记录并添加新路线并重新开始历史记录。这是可行的，但它有一个主要缺点。每次我去 (app.navigate('x',true);) 一个新的现有路径都会触发路由，因为我有 history.started 它。还有所有 View 渲染。

这会大大降低应用程序的速度，而且效率极低。

有没有办法动态添加新路由而无需 history.stop/start？

Answer 1

每次添加新路由时，您不必停止/启动 Backbone.history，当您调用 router.route 或创建新路由时，Backbone 会修改其状态路由器。

因此，要么手动将路由添加到您的路由器:

var R = Backbone.Router.extend({
    routes: {
    }
});

var r = new R();
Backbone.history.start();

r.route('added', 'added', function() {
    console.log('added : '+window.location.hash);
});

或者实例化一个新的路由器

var R = Backbone.Router.extend({
  routes: {
  }
});

var r = new R();
Backbone.history.start();

var R2 = Backbone.Router.extend({
    routes: {
        'added': 'added'
    },
    added: function() {
        console.log('added: '+window.location.hash);
    }
});
var r2 = new R2();

和一个演示

var R = Backbone.Router.extend({
  routes: {
    "help": "help"
  },
  help: function() {
      console.log('help : '+window.location.hash);
  }
});


var r = new R();
Backbone.history.start();
r.navigate('help', {trigger: true});


var R2 = Backbone.Router.extend({
  routes: {
    "r2": "r2"
  },
  r2: function() {
    console.log('r2 : '+window.location.hash);
  }
});
var r2 = new R2();
r2.navigate('r2', {trigger: true});


r.route('added', 'added', function() {
    console.log('added : '+window.location.hash);
});

r.navigate('added', {trigger: true});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>

<a href='#help'>help</a>
<a href='#r2'>r2</a>
<a href='#added'>added</a>