javascript - 如何适应 EmberJS 中加载缓慢的 highcharts？

Question

我有一个 EmberJS 路线，根据各种选项，将 1-20 个 HighCharts 加载到单个模板中。我目前正在使用 Ember.RSVP.hash 以及每个图表的 AJAX 加载 promise 。我的路线或多或少看起来像:

model: function () {
    var promises = {};
    // forEach chart I wish to create (one promise per chart):
        promises[chartId] = Ember.$.getJSON(urlForChart).then(function (response) {
            // do some post-processing here
        });
    return Ember.RSVP.hash(promises);
}

这里的问题是，AJAX 调用可能需要一段时间，特别是如果有很多图表，并且 Ember.RSVP.hash 在渲染之前等待所有 promise 完成，所以我一直在看我的 loading.hbs 模板可能会持续一段时间。

那么是否可以重组我的路线/应用程序，以便每个图表都将在完成时呈现，而不是等待所有 promise 在渲染之前完成？这可能吗？

或者最初渲染所有没有数据的 HighCharts，然后单独获取每个数据源(基本上是延迟加载)会更好吗？如果是这样，我将如何在 HighCharts/EmberJS 中实现这一点？

顺便说一句，我正在使用 Ember 1.13.11 和 ember-cli-highcharts(如果有的话)。

Answer 1

您可以将 Promise 移至 setupController跳过等待 promise 解决。

import Ember from 'ember';

export default Ember.Route.extend({
  setupController(controller) {
    const promises = {};
    promises[0] = Ember.$.getJSON('example.com').then(response => {
      // do some post-processing here
    });
    this._super(controller, promises);
  }
});