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?
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.
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
});
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With