Question

根据Ember docs on loading substates，您可以选择为Promises创建加载路径和/或加载模板，这可能需要很长时间才能处理。

我遇到的情况是使用大量组件渲染大型模板，渲染时间平均超过2秒。

我确信有一个缓慢渲染时间的解决方案，但是当我处理它时，我想看看是否可以在加载慢速模板时调用加载模板来显示。

有办法做到这一点吗？

我设置了一个简单的加载页面（只是带有一些动画css的简单消息）并保存在我的模板根文件夹中（所以它可能在需要时随处可用）。

Ember应该会自动显示这个加载模板 - 只是因为它在那里 - 但是，默认情况下，它只在加载Promise时才会显示，而不是模板。

那么有一种解决方法（即黑客）可以让它发挥作用吗？

Answer 1

我认为你可能会在装载子状态下将自己带到这里。

我最好的猜测是，你需要在该模板中解决你的{{view Ember.Select}}助手问题。这些渲染速度非常慢。最近我在页面上的15-20个选项中呈现了几千个选项时遇到了这个问题。

不幸的是，DOM通常是大型SPA的瓶颈，如果你想在你的应用程序中到处都是那种快速的异步感觉，你可能需要发挥创意。

尝试减少渲染的选项数量，您将加快速度。或者，你可以尝试另一个表单库......或者，自己动手。

更新::

如果我是你，我会考虑向ArrayController添加一个方法，动态创建并以块的形式缓慢加载选项。这是一些伪代码：

App.CollectionController = Ember.ArrayController.extend({
  generatedOptions: null,
  generateOptions: function () {},
  destroyOptions: function () {
    this.set('generatedOptions', null);
  }
});

App.CollectionRoute = Ember.Route.extend({
  setupController: function (controller, model) {
    controller.generateOptions(); //slowly render
  },
  willTransition: function () {
    this.controllerFor('controller').destroyOptions(); //destroy so that when we return it will need to generate again
  }
});

{{#each generatedOptions}}
  {{partial 'collection_form'}}
{{else}}
  <p>loading, for kicks</p>
{{/else}}

Ember JS：触发加载子窗格，用于缓慢加载模板

1 个答案: