Sort by Property

by ethan_selzer

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <h1>ember-latest jsfiddle</h1>
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
  <h2>Index Content:</h2>
    Sort by: 
    <a href="#" {{action "sortBy" "id"}} >Id</a>
    <a href="#" {{action "sortBy" "firstName"}} >First Name</a>
    <a href="#" {{action "sortBy" "lastName"}} >Last Name</a><br/>
    Direction:
    <a href="#" {{action "toggleProperty" "sortAscending"}} >
        {{#if sortAscending}}
            Ascending
        {{else}}
            Descending
        {{/if}}
    </a>
    <br/>
  <ul>
  {{#each}}
      <li>#{{id}} - {{firstName}} {{lastName}}</li>
  {{/each}}
   </ul>
</script>

CSS

h1 { font-size: 1.6em; padding-bottom: 10px; }
h2 { font-size: 1.4em; }
ul { padding: 15px; font-size: 1.4em; color: green; }

JavaScript

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

App.IndexRoute = Ember.Route.extend({
  model: function(){
      return [
          {id: 1, firstName: 'Kris', lastName: 'Selden'},
          {id: 2, firstName: 'Luke', lastName: 'Melia'},
          {id: 3, firstName: 'Formerly Alex', lastName: 'Matchneer'}
      ];
  }
});

App.IndexController = Ember.ArrayController.extend({    
    actions: {
        sortBy: function(property) {            
            this.set('sortProperties', [property]);
        }
    }
});