lundi 25 janvier 2016

How do I adapt to slow-loading highcharts in EmberJS?

I have an EmberJS route that, depending on various options, loads anywhere from 1-20 HighCharts into a single template. I'm currently using Ember.RSVP.hash with a AJAX-loading promise for each chart. My route more or less looks like:

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

The problem here is, the AJAX call may take awhile, especially if a lot of charts, and Ember.RSVP.hash waits for all promises to complete before rendering, so I'm stuck seeing my loading.hbs template for possibly awhile.

So is it possible to restructure my route / application so that instead of waiting for all promises to complete before rendering, that each chart will render as they complete? Is this even possible?

Or would it be better to initially render all the HighCharts with no data and then fetch each datasource individually afterwards (basically lazy-loading)? If so, how would I go about that in HighCharts/EmberJS?

BTW, I'm using Ember 1.13.11 and ember-cli-highcharts, if that matters.




Aucun commentaire:

Enregistrer un commentaire