Sort Ember Object Array with Promises

I have a model model/person

{

  firstName: DS.attr( 'string'),
  lastName: DS.attr( 'string'),
  email: DS.attr( 'string' ),
}

and another model model/project

{

  name:            DS.attr( 'string' ),
  code:            DS.attr( 'string' ),
  startDate:       DS.attr( 'date' ),
  endDate:         DS.attr( 'date' ),
  users : DS.hasMany('person', {async: true}),

}

then i'm retrieving all the projects with as an array which contains ember objects. since the project -> users is async its a promise. and i want to sort that array using the first name of the person. when the data is arrived accordingly and re render the hbs that is using the list

i have a computed property called

renderProjects = computed ('model.projects.[]')
{
 // trying to sort in here but data is not avaiable so its not getting sorted
}

The solution is simply to use .@each:

renderProjects: computed ('model.projects.@each.firstName', function() {
  return this.users.sortBy('firstName');
})

this will recompute the renderProjects CP whenever the list of projects change or any firstName on any of the projects changes and then automagically update your view.

One important notice: You can not do .@each.foo.bar. This is what you did in your twiddle with model.@each.myUser.name.

In your twiddle the easiest fix is to add a computed.alias to the video model:

username: computed.alias('myUser.name'),

Then you can do this:

sortedVideos: computed('model.@each.username', function() {
  return this.get('model').sortBy('username');
})

Here is a fixed twiddle.