EmberJS-Controllers Sorting

Quiz

Description

You can sort an array of elements by using Ember.SortableMixin. The array property sortAscending is set to true for ascending order and false for descending order.

Syntax

Ember.ArrayController.create({
   model: ModelName,
   sortProperties: ['KeyNameOfSort'],
   sortAscending: true //false for descending
});

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Emberjs Sorting</title>
      <!-- CDN's -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
      <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
      <script src="https://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
      <script src="https://builds.emberjs.com/release/ember.debug.js"></script>
      <script src="https://builds.emberjs.com/beta/ember-data.js"></script>
   </head>
   <body>
      <script type="text/x-handlebars" data-template-name="index">
         <b>Sorting Numbers in Ascending order:</b>
         {{#each}}
            {{num}}
         {{/each}}
      </script>

      <script type="text/javascript">
         App = Ember.Application.create();

         App.IndexRoute = Ember.Route.extend({
            //model contains numbers as 1, 3, 2
            model: function(){
               return [
                  {num: 1},
                  {num: 3},
                  {num: 2}
               ];
            }
         });

         App.IndexController = Ember.ArrayController.extend({
            //passing the array values
            sortProperties: ['num'],
            //display elements of an array in the acsending order
            sortAscending: true // 'false' for descending order
         });
      </script>
   </body>
</html>

Output

Let's carry out the following steps to see how above code works −

Save above code in control_srtng_arry.htm file
Open this HTML file in a browser.

Print Page