如何嵌套使用“Require.js”和“backbone.js”？答案

【问题标题】：How to Nested use “Require.js” with "backbone.js"？如何嵌套使用“Require.js”和“backbone.js”？
【发布时间】：2012-06-11 14:37:47
【问题描述】：

我在做应用，使用backbone.js和require.js，我想通过“backbone.router”功能实现动态配置模块导航，这是我的问题吗？

这是我定义的baserouter，我想根据“viewPath”参数实现动态加载“backbone.view”，请问怎么办？

define(['require', 'underscore', 'backbone'], function(require, _, Backbone) {
  var BaseRouter = Backbone.Router.extend({
    container: "#page",
    loadView: function(viewPath) {

      **//Here require lazy loading "base/people/view.js", **
      **//I do not know how to achieve it?**
      var view = require(viewPath);//viewPath = "base/people/view";

      this._currentView = new view();
      this._currentView.render();
      $(this.container).html(this._currentView.el);
    }
  });

  return BaseRouter;
});

这是路由器的定义，它与“baserouter”一起动态设置导航菜单。

define(['baserouter'], function(baserouter) {
  //The JSON data should come from the database,
  //These data define the navigation information for all modules.
  var navs = JSON.parse('[{"name": "people","title": "peoplemanage","view": "base/people/view"},{"name": "test","title": "testmanage","view": "pub/test/view"}]');
  var AppRouter = baserouter.extend();

  for (var i = 0, l = navs.length; i < l; i++) {
    var nav = navs[i];
    AppRouter.prototype["loadView_" + nav.name] = function() {
      var path = nav.view;
      return function() {
        AppRouter.prototype.loadView(path);
      }
    }();
  }

  var initialize = function() {
      var routes = {}
      for (var i = 0, l = navs.length; i < l; i++) {
        var nav = navs[i];
        routes[nav.name] = "loadView_" + nav.name;
      }

      var app_router = new AppRouter({
        "routes": routes
      });

      Backbone.history.start();
    };
  return {
    initialize: initialize
  };
});

这里是导航菜单的html代码：

<ul class="dropdown-menu">
    <li><a href="#people">people</a></li>
    <li><a href="#test">test</a></li>
</ul>

【问题讨论】：

标签： backbone.js require

【解决方案1】：

这种方法可以实现。但我不确定这是最好的做法，谁有更好的方法？

loadView: function(viewPath) {
var _this = this;
if (this._currentView) {
    this._currentView.dispose();
}

//var view = require(viewPath);
//**This method can achieve.But I'm not sure this is the best practice, and who has a better way?**
//setTimeout(function() {
    require([viewPath], function(view) {
        _this._currentView = new view();
        _this._currentView.render();
        $("#page").html(_this._currentView.el);
    });
//}, 100);

【讨论】：