Ember.js Sort Example

by Aras Balali Moghaddam

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars">
  {{view App.PersonsView}}
</script>

<script type="text/x-handlebars" data-template-name="persons-view">
  {{view Ember.CollectionView
    contentBinding="App.personsController"
    itemViewClass="App.PersonView"
    tagName="ul"
  }}
</script>

<script type="text/x-handlebars" data-template-name="person-view">
    {{view.content.firstName}} - {{view.content.lastName}}
</script>

JavaScript

App = Ember.Application.create({});

App.Person = Ember.Object.extend({
    id: null, 
    firstName: null,
    name: null, 
    tId: null
});

App.PersonsView = Ember.View.extend({
    templateName: 'persons-view'
});

App.PersonView = Ember.View.extend({
    templateName: 'person-view',
});

App.set('personsController', Ember.ArrayController.create({
    sortProperties: ['firstName'],
    content: [
        App.Person.create({firstName:"tom", lastName: "dale"}),
        App.Person.create({firstName:"peter", lastName: "wagenet"}),
        App.Person.create({firstName:"yehuda", lastName: "katz"})
        ]
}));

Ember.run.later(function(){
    App.set('personsController.sortProperties', ['lastName']);
}, 2000);