Computed.sort on models that have not been retrieved yet

ember.js version: 2.18.0

the route:

export default Route.extend({

    sortBy: computed(function() {
      return [
        'rating:desc',
        'title:asc'
      ];
    }),

    sortedSongs: computed.sort('model.songs', 'sortBy')
}

the template:

{{#each sortedSongs as |song|}}
    <li class="list-group-item song">
      {{song.title}}
      {{star-rating item=song rating=song.rating onclick=(action "updateRating")}}
    </li>
  {{/each}}

The template just doesn’t render anything.

I think the problem here is that ‘model.songs’ are not loaded from the server yet. So the first time the page is loaded the CP returns nothing. But because a CP can’t detect an object change, even after the object is fully loaded, it doesn’t refresh the page. Am I correct? If so, how can I make it work?

The CP need to be in controller, the template don’t reach the route properties.

Thank you. That worked.