延迟加载Ember.js中的路由定义 [英] Lazy loading route definitions in Ember.js

问题描述

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

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

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

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

  Ember.Router.reopen（{
 _doTransition：function（_targetRouteName ，model，_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放在延迟加载的文件之外。这是唯一可以工作的选项吗？

解决方案

自动生成垃圾路由是由 link-到组件通过 href 计算属性。不要打击它。 Ember将无法正常工作，您将会松动。但是您应该深入了解这个机制。

href LinkToComponent方法请求一个URL。在回答之前，Ember寻找路线。如果不存在，Ember将从路由中创建一个路由：basic 。

容器和注册表有一些有用的方法：重置和查找前者注册和注销后者。

注册和注销修改注册表。

查找创建实例，如果它们不存在，在 factoryCache 中查找工厂，并存储它们在缓存中。如果工厂不在那里，它会询问注册表。

重置清除指定成员的缓存和 factoryCache 。

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

  unregister（fullName）; 
重置（fullName）; 
注册（fullName，factory）; 
 lookup（fullName）; 
  

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

I'm trying to implement lazy loading in an Ember.js application. Ideally, I'd prefer to have all the relevant code for each module, including any controller and route definitions, in a separate .js file that gets lazy loaded.

Right now, the js file gets loaded correctly when I transition to the route, but because Ember implicitly generates a route definition, the implicitly-generated route object is used instead of the route in my lazy-loaded js file.

In my lazy-loaded js file, I've got a route App.UsersManagerRoute that should be linked to the users.manager route. In the Ember Inspector, I can see that an implicitly generated route is being used instead, even after I've loaded the js file.

To try to fix this, I've tried to manually register the route after loading the js file, but it doesn't seem to be working. This is my code that does the lazy loading:

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

After I unregister the implicitly generated route and register my lazy-loaded route, the route definition seems to be used correctly, but for some reason, I see a blank page instead of the right template. I'm not too sure what I'm missing here, or if what I'm trying to do is the recommended approach.

All the examples of lazy loading in Ember I've seen so far place the Route outside the lazy-loaded file. Is that the only option that would work?

解决方案

Auto generation of ember routes is caused by link-to component through href computed property. Never fight against it. Ember will not work properly and you will loose. But you should know it deeply in order to understand the mechanism.

href LinkToComponent method ask for a URL. Before answer, Ember looks for the route. If it doesn't exist, Ember creates one from route:basic.

Container and Registry have some useful method: reset and lookup the former, register and unregister the latter.

register and unregister modify the registry.

lookup creates instances if they don't exist, looking for the factory in factoryCache, and storing them in cache. If the factory doesn't exist there, it asks the Registry.

reset clears cache and factoryCache of the specified member.

That said, the right sequence in order to achieve lazy loading should be:

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

For an initial solution, have a look at https://github.com/ricottatosta/ember-wiz

这篇关于延迟加载Ember.js中的路由定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！