Sorting select

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  	queryParams: ['sort'],
    sort: "",
  
    sortedUsers: Ember.computed.sort('model', 'sortDefinition'),
    sortDefinition: Ember.computed('sort', function() {
      return [ this.get('sort') ];
    }),
  
  sortingOptions: [
      {
        displayValue: 'Hourly Rate',
        value: 'rate'
      },
      {
        displayValue: 'User Rating',
        value: 'rating'
      }
    ]
  
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    return [{
      firstName: 'John',
      rate: '10',
      rating: '5'
    }, {
      firstName: 'Tom',
      rate: '20',
      rating: '3'
    }, {
      firstName: 'Jack',
      rate: '30',
      rating: '4'
    }];
  }
});

templates.application.hbs

Sort by
<select onchange={{action (mut sort) value="target.value"}}>
	{{#each sortingOptions as |option|}}
  	<option value={{option.value}} selected={{sort}}>{{option.displayValue}}</option>
  {{/each}}
</select>
<br>
<br>
<hr>
<br>

{{#each sortedUsers as |user|}}
	<li>{{user.firstName}}
    <ul>
      <li>Rate: {{user.rate}}</li>
      <li>Rating: {{user.rating}}</li>
    </ul> 
  </li>
{{/each}}
    
    

twiddle.json

{
  "version": "0.7.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "1.13.13",
    "ember-data": "1.13.15",
    "ember-template-compiler": "1.13.13"
  }
}