I have an EmberJS ArrayController. I want to have a puted property on this controller, neurons, that is a subset of the model property. The subset is puted based on a toggle button in the sidebar which is bound to currentDataset. Another puted property, activePlots then depends on neurons; the Neuron model has a hasMany relationship to Plot, and activePlots loads all the plot objects associated with each neuron object in neurons.

Currently I'm trying to do this with mapBy, but I'm running into a problem. Each retrieval of a Neuron object's plots returns a PromiseArray. I need to manipulate all the returned plots at once. I understand I can call then on the promise result of an individual call get('plots'), but how do I execute code only after the get('plots') call has returned for ALL neurons?

neurons: ( ->
    @get('model').filterBy('dataset', @get('currentDataset'))
).property('model', 'currentDataset'),

activePlots: ( ->
  plots = @get('neurons').mapBy('plots')
  # ...code to execute after all plots have loaded
).property('neurons')

UPDATE: Picture of console output from console.log(plotSets) inside the then callback to

Ember.RSVP.all(@get('neurons').mapBy('plots')).then (plotSets) -> 
  console.log(plotSets)

I have an EmberJS ArrayController. I want to have a puted property on this controller, neurons, that is a subset of the model property. The subset is puted based on a toggle button in the sidebar which is bound to currentDataset. Another puted property, activePlots then depends on neurons; the Neuron model has a hasMany relationship to Plot, and activePlots loads all the plot objects associated with each neuron object in neurons.

Currently I'm trying to do this with mapBy, but I'm running into a problem. Each retrieval of a Neuron object's plots returns a PromiseArray. I need to manipulate all the returned plots at once. I understand I can call then on the promise result of an individual call get('plots'), but how do I execute code only after the get('plots') call has returned for ALL neurons?

neurons: ( ->
    @get('model').filterBy('dataset', @get('currentDataset'))
).property('model', 'currentDataset'),

activePlots: ( ->
  plots = @get('neurons').mapBy('plots')
  # ...code to execute after all plots have loaded
).property('neurons')

UPDATE: Picture of console output from console.log(plotSets) inside the then callback to

Ember.RSVP.all(@get('neurons').mapBy('plots')).then (plotSets) -> 
  console.log(plotSets)

• javascript
• ember.js

2 Answers 2

There is a handy method for bining promises: Ember.RSVP.all(ary) takes an array of promises and bees a promise that is resolved when all the promises in the input array are resolved. If one is rejected, the all() promise is rejected.

This is very handy, for example, when firing off multiple parallel network requests and continuing when all of them are done.

In addition to what Steve said you can watch the nuerons.length and use Ember.scheduleOnce to schedule an update (guessed coffeescript below)

activePlots: [],

watchNuerons: ( ->
  Ember.run.scheduleOnce('afterRender', this, @updatePlots); 
).observes('nueron.length'),

updatePlots: ( ->
  plots = @get('neurons').mapBy('plots')
  # ...code to execute after all plots have loaded
  @set('activePlots', plots)
)