How to sort model in Ember.js?

Question

I use a model in Ember.js like this:

App.SomethingRoute = Ember.Route.extend({
  model: function()
  {
      return App.MyData.find();
  }
});

It receives data from MyData. In my data i have a field called "NAME". I would like to display data from MyData in ascendant order by NAME.

I've added a controller (thx. Toran, intuitive) like this:

App.SomethingController = Ember.ArrayController.extend({
  sortProperties: ['NAME'],
  sortAscending: true
});

But my template that is like this:

{{#each model}}
 {{NAME}}
{{/each}}

Still shows unordered list. How to make it right?

Can you show the implementation of your find method? you need to be using ember objects (not plain JS objects) to get the binding behavior that will re-sort it on the fly — Toran Billups
– Toran Billups, Commented Jul 29, 2013 at 16:55

stephen.hanson · Accepted Answer · 2015-08-23 17:55:53Z

18

ArrayController has been removed from Ember (v2.0) since this question was asked. Here is how you would achieve the same without using an ArrayController:

export default Ember.Controller.extend({
  sortProperties: ['name:asc'],
  sortedModel: Ember.computed.sort('model', 'sortProperties')
});

And then:

{{#each sortedModel as |thing|}}
 {{thing.name}}
{{/each}}

And here is the documentation for Ember's computed sort macro.

answered Aug 23, 2015 at 17:55

stephen.hanson

9,7642 gold badges52 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Meliborn Over a year ago

what if I will change sorting order? How to rerender models?

intuitivepixel · Accepted Answer · 2013-07-29 12:01:17Z

15

Since the ArrayController includes the SortableMixin (already mentioned in the comment from @ianpetzer), you can set the properties you want to sort on in sortProperties.

App.SomethingController = Ember.ArrayController.extend({
  sortProperties: ['name'],
  sortAscending: true
});

answered Jul 29, 2013 at 12:01

intuitivepixel

23.3k3 gold badges59 silver badges51 bronze badges

5 Comments

Tom Smykowski Over a year ago

i've updated question because i can not make it work. Please help. thx.!

intuitivepixel Over a year ago

@tomaszs, there must be something else going on in your app that does not make it work, can you update you question with a jsbin/jsfiddle with your setup?

Tom Smykowski Over a year ago

your answer helped me, i needed only to change {{#each model}} to {{#each controller}} also. thx

Scott Fister Over a year ago

I had to change controller.content to controller.arrangedContent in my template in order for sorting to work.

stephen.hanson Over a year ago

ArrayController was removed in Ember 2. See my answer for an updated approach.

tim · Accepted Answer · 2014-05-13 16:11:06Z

6

Make sure you are using {{#each controller}}, not {{#each model}}, since the Controller will have it own copy of the model collection that it sorts and presents to the template.

<!-- ************************************************************************ -->
<script type="text/x-handlebars" data-template-name="tickets">  
<p>
<table id="tickets" class="table table-striped">
<thead>
  <tr>    
    <th {{action "sortByAttribute" "status"}}>Status</th>
  </tr>
</thead>
<tbody>
{{#each controller}}
    <tr>     
      <td>{{#link-to 'ticket' this.id}} {{status}} {{/link-to}} </td>
    </tr>
{{/each}}
</tbody>
</table>  
</p>
</script>

answered May 13, 2014 at 16:11

tim

611 silver badge1 bronze badge

Comments

Toran Billups · Accepted Answer · 2013-07-29 16:57:06Z

1

App.SomethingController = Ember.ArrayController.extend({
    sortProperties: ['name'],
    sortAscending: true 
});

Make sure your find method does something like this

App.Person.reopenClass({
    people: [],
    find: function() {
        var self = this;
        $.getJSON('/api/people', function(response) {
            response.forEach(function(hash) {
                var person = App.Person.create(hash);
                Ember.run(self.people, self.people.pushObject, person);
            });
        }, this);
        return this.people;
    }
});

Not this (this will not update the template via binding because it's a vanilla JS object instead of a full blown ember object)

App.Person.reopenClass({
    people: [],
    find: function() {
        var self = this;
        $.getJSON('/api/people', function(response) {
            response.forEach(function(hash) {
                Ember.run(self.people, self.people.pushObject, hash);
            });
        }, this);
        return this.people;
    }
});

edited Jul 29, 2013 at 16:57

answered Jul 29, 2013 at 11:59

Toran Billups

27.4k41 gold badges159 silver badges272 bronze badges

1 Comment

Tom Smykowski Over a year ago

i've updated question because i can not make it work. Please help. thx.

Collectives™ on Stack Overflow

How to sort model in Ember.js?

4 Answers 4

1 Comment

5 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related