异步添加骨干路由。答案

【问题标题】：Adding backbone routes asynchronously.异步添加骨干路由。
【发布时间】：2012-10-17 11:10:15
【问题描述】：

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

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

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

这会大大降低应用程序的运行速度，并且完全没有效率。

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

【问题讨论】：

标签： backbone.js requirejs backbone-routing

【解决方案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>

【讨论】：

【解决方案2】：

我编写了一个带有路由器的小 .js 文件。它应该可用于不同的目的，因此您可以在 init 上传递所需的回调（路由）。 init 接受一个参数 routes（一个数组），其中包含以下信息：

routeId:"book/:id",
routeName:"routeBooks",
routeCallback: $.proxy(function(id){ 
 // $.proxy() is a jQuery function that ensures you call the callback in the right context
      // do fandy stuff here.
})

为了解析路由，我使用以下代码：

for( route in routes ){
    routesFromConfig[routes[route].routeId.toString()] = routes[route].routeName;
}
var ModalRouter = Backbone.Router.extend({
    routes:routesFromConfig
});
router = new ModalRouter();
for( route in routes ){
    // test if the callback is a function
    if(_.isFunction(routes[route].routeCallback)){
        router.on('route:'+routes[route].routeName.toString(), routes[route].routeCallback);
    }
}

Backbone.history.start();

我希望这有助于根据从您应用中其他位置传递的路由设置路由器

【讨论】：