如何使用嵌套“Require.js”与＆QUOT; Backbone.js的＆QUOT;？ [英] How to Nested use “Require.js” with "backbone.js"？

问题描述

我做的应用程序，使用Backbone.js的和require.js的，我想用backbone.router功能来实现动态配置模块导航，这里是我的问题吗？

这是我的baserouter定义，我想实现动态负载backbone.view据viewPathparameter.How我能做什么？

 定义（['要求'，'底线'，'骨干']，功能（需要，_，骨干）{
  VAR BaseRouter = Backbone.Router.extend（{
    集装箱：#page
    的loadView：功能（viewPath）{      ** //这里需要懒加载基地/人/ view.js**
      ** //我不知道该如何实现呢？**
      VAR视图=要求（viewPath）; // viewPath =基地/人/视图      this._currentView =新的视图（）;
      this._currentView.render（）;
      $（this.container）的.html（this._currentView.el）;
    }
  }）;  返回BaseRouter;
}）;
 

这是路由器的定义，它以baserouter工作动态设置导航菜单。

 定义（['baserouter']，功能（baserouter）{
  // JSON数据应该来自于数据库中，
  //这些数据定义了所有模块的导航信息。
  VAR资产净值= JSON.parse（'[{名：人，称号：peoplemanage，观：基地/人/视图}，{名：测试，称号：testmanage，观：酒吧/测试/视图}]'）;
  变种AppRouter = baserouter.extend（）;  对于（VAR I = 0,1 = navs.length; I＆LT;升;我++）{
    VAR资产净值=资产净值（I）;
    AppRouter.prototype [loadView_+ nav.name] =功能（）{
      VAR路径= nav.view;
      返回功能（）{
        AppRouter.prototype.loadView（路径）;
      }
    }（）;
  }  VAR初始化函数=（）{
      变种路由= {}
      对于（VAR I = 0,1 = navs.length; I＆LT;升;我++）{
        VAR资产净值=资产净值（I）;
        路线[nav.name] =loadView_+ nav.name;
      }      VAR app_router =新AppRouter（{
        路线：路线
      }）;      Backbone.history.start（）;
    };
  返回{
    初始化：初始化
  };
}）;
 

下面是HTML code的导航菜单：

 ＆LT; UL类=下拉菜单＆GT;
    ＆LT;立GT;＆LT; A HREF =＃人＆GT;与人LT; / A＆GT;＆LT; /李＆GT;
    ＆LT;立GT;＆LT; A HREF =＃测试＆GT;测试与LT; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
 

解决方案

此方法可achieve.But我不知道这是最好的做法，谁还有更好的办法？

 的loadView：功能（viewPath）{
VAR _this =这一点;
如果（this._currentView）{
    this._currentView.dispose（）;
}// VAR视图=要求（viewPath）;
// **这种方法可以achieve.But我不知道这是最好的做法，谁还有更好的办法？**
//的setTimeout（函数（）{
    需要（[viewPath]功能（视图）{
        _this._currentView =新的视图（）;
        _this._currentView.render（）;
        $（＃页）HTML（_this._currentView.el）。
    }）;
//}，100）;
 

I'm doing the application, the use of backbone.js and require.js, I would like to achieve dynamic configuration module navigation by the "backbone.router" function, here is my question?

This is my baserouter defined,I want to achieve dynamic load "backbone.view" according to "the viewPath" parameter.How can I do?

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;
});

This is the definition of the router, it work with "baserouter" to dynamically set the navigation menu.

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
  };
});

Here is the html code for the navigation menu:

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

解决方案

This method can achieve.But I'm not sure this is the best practice, and who has a better way?

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);

这篇关于如何使用嵌套“Require.js”与＆QUOT; Backbone.js的＆QUOT;？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！