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