EmberJS How to load multiple models on the same route inside a single sorted array

Question

I would like to display a merged list of item from different models.

I found out here that using Ember.RSVP.hash is the trick to load multiple models. It's not enough for me since I want to have all of them in a single list.

How can I merge all the model together and sort them?

Answer 1

I recommend using a Computed.property which monitors the models that are changing and combines them into the array you need in your template .

When modelA or modelB changes your computed property will update with those results.

myList: Ember.computed('modelA', 'modelB', function() {
    let combinedModels = [];
    this.get('modelA').forEach( item => {
        // pull out what you need from each model item
        combinedModels.push(item);
    });
    this.get('modelB').forEach( item => {
        // pull out what you need from each model item
        combinedModels.push(item);
    });
    return combinedModels;
});