How Can i order a model?

Question

I'm a newbie in ember and I don't know how to sort a list of movies by title. I have a route index with a model hook:

export default Route.extend(RealtimeRouteMixin,{
  model() {
    return this.store.findAll('movie');
  }
});

I render a component when this route is loaded. I set the model in the template

{{landing-page
  add=(action 'addMovie')
  movies=model
}}

Inside this component, there are other child's components. In one of them is a list of movie where I want to show the list of the movies sort by title.

//landing-page template
{{movie-list-header}}

{{movie-list
  movies=this.movies
}}

{{add-movie-form add=this.add
}}

//movive-list template
{{#each movies as |movie|}}
  {{movie-list/movie-list-item
    movie=movie
  }}
  <hr />
{{/each}}

I don't know what the best approach to do it. I've thought to sort the model in the route but I don't know If I have to do it something like this

export default Route.extend(RealtimeRouteMixin,{
  model() {
    return this.store.findAll('movie').then(funcion(data){
        // sort here ???
    });
  }
});

Answer 1

Your approach would work. Then sortBy would do the trick.

The other approach is to put it somewhere in your component hierarch starting with the controller. A simple computed property will do the trick. There is also a computed property macro.

Answer 2

I prefer to handle simple ordering in the template using ember-composable-helpers as it sorts strings well with the least amount of boilerplate. After installing that addon and restarting your ember server you can do this in your template with the sort-by helper.

//movie-list template
{{#each (sort-by "title" movies) as |movie|}}
  {{movie-list/movie-list-item
    movie=movie
  }}
  <hr />
{{/each}}

Answer 3

In the controller/component where your model you want to sort with property, you can mention following computed property:

sortedModel: sort('model', 'title:desc'),

you can import sort as follows: import { sort } from '@ember/object/computed';

Now use sortedModel instead of model in templates/handlebars. I hope that make sense. Please let me know if you have any query?