Ember.js 中的延迟加载路由定义答案

【问题标题】：Lazy loading route definitions in Ember.jsEmber.js 中的延迟加载路由定义
【发布时间】：2014-12-21 05:06:19
【问题描述】：

我正在尝试在 Ember.js 应用程序中实现延迟加载。理想情况下，我希望将每个模块的所有相关代码（包括任何控制器和路由定义）放在一个单独的 .js 文件中，该文件会延迟加载。

现在，当我转换到路由时，js 文件会正确加载，但是因为 Ember 隐式生成路由定义，所以使用隐式生成的路由对象而不是我延迟加载的 js 文件中的路由。

在我延迟加载的 js 文件中，我有一个路由 App.UsersManagerRoute 应该链接到 users.manager 路由。在 Ember Inspector 中，我可以看到正在使用隐式生成的路由，即使在我加载了 js 文件之后也是如此。

为了解决这个问题，我尝试在加载 js 文件后手动注册路由，但它似乎不起作用。这是我执行延迟加载的代码：

Ember.Router.reopen({
  _doTransition: function (_targetRouteName, models, _queryParams) {
    var resourceName = _targetRouteName.split('.')[0];
    var self = this;
    var transition = self._super(_targetRouteName, models, _queryParams);
    transition.abort();
    var fullRouteName = 'route:' + camelizeRouteName(_targetRouteName);
    self.container.unregister(fullRouteName);
    App.lazyLoad(resourceName, function() {
      self.container.register(fullRouteName, App[sentenceCasedRouteName(_targetRouteName) + 'Route']);
      transition.retry();
    });
    return transition;
  }
});

在我取消注册隐式生成的路由并注册我的延迟加载路由后，路由定义似乎使用正确，但由于某种原因，我看到一个空白页面而不是正确的模板。我不太确定我在这里缺少什么，或者我正在尝试做的是推荐的方法。

到目前为止，我在 Ember 中看到的所有延迟加载示例都将 Route 放置在延迟加载文件之外。这是唯一可行的选择吗？

【问题讨论】：

除了路由，延迟加载也会给控制器上的queryParams带来问题。

标签： ember.js

【解决方案1】：

ember 路由的自动生成是由link-to 组件通过href 计算属性引起的。永远不要与之抗争。 Ember 将无法正常工作，您会松动。但是你应该深入了解它才能理解机制。

href LinkToComponent 方法请求一个 URL。在回答之前，Ember 会寻找路线。如果它不存在，Ember 从route:basic 创建一个。

Container和Registry有一些有用的方法：reset和lookup前者，register和unregister后者。

register和unregister修改注册表。

lookup 如果实例不存在则创建实例，在factoryCache 中查找工厂，并将它们存储在cache 中。如果工厂在那里不存在，它会询问Registry。

reset 清除指定成员的cache 和factoryCache。

也就是说，为了实现延迟加载，正确的顺序应该是：

unregister(fullName);
reset(fullName);
register(fullName, factory);
lookup(fullName);

对于初始解决方案，请查看https://github.com/ricottatosta/ember-wiz

【讨论】：

【解决方案2】：

ember 对象的自动生成是由通过 href 计算属性链接到组件引起的。为了避免这种行为（它可能导致空白页），我建议更改 href 以避免调用计算自动生成丢失对象的所谓“意图”的函数。

【讨论】：