1

私はアプリケーション、backbone.jsとrequire.jsの使用を行っていますが、「backbone.router」関数による動的構成モジュールのナビゲーションを実現したいのですが、ここに私の質問がありますか？

これは私のベースルーターで定義されています。「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>
4

1 に答える 1

0

この方法で達成できますが、これがベストプラクティスであるかどうかはわかりません。誰がより良い方法を持っているでしょうか? 

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);
于 2012-06-08T12:39:14.507 に答える