How to use EMBER.SORTABLEMIXIN?

Question

My FIXTURES contains array of products which i want to sort based on ID.

Astcart.Application.FIXTURES=[
{
    "name" : "astr",
    "home_products": [
        {
            "id": 3,
            "name": "Mobiles & Accessories"
        },
        {
            "id": 2,
            "name": "Mobiles & Accessories"
        },
        {
            "id": 1,
            "name": "Mobiles & Accessories"
        }
    ]
}
];

I am not getting complete example of EMBER.SORTABLEMIXIN.I don't have any idea about sorting in ember.

Can anyone explain me how to do sorting in ember using my this example(Not working)?

Answer 1

The sortable feature is provided by Ember.SortableMixin. This mixin expose two properties: sortAscending and sortProperties.

• The sortAscending accepts a boolean value determining if the sort is ascendant or not.

• And the sortProperties expect an array with the properties to sort.

For instance:

Controller

App.IndexController = Ember.Controller.extend(Ember.SortableMixin, {
    sortAscending: false,
    sortProperties: ['id'],
});

These properties can be changed and the order will be updated, here is a sample with dynamic sort:

Controller

App.IndexController = Ember.Controller.extend(Ember.SortableMixin, {
    sortProperties: ['firstName'], // or whatever property you want to initially sort the data by
    sortAscending: false, // defaults to "true"
    actions: {
        sortBy: function(property) {            
            this.set('sortProperties', [property]);
        }
    }
});

To access the arranged content, you should refer to arrangedContent in your template instead of the regular model property. Like this:

Template

<script type="text/x-handlebars" data-template-name="index">
    <h2>Index Content:</h2>
    <table>
      <thead>
        <th {{action "sortBy" "id"}}>ID</th>
        <th {{action "sortBy" "firstName"}}>First Name</th>
        <th {{action "sortBy" "lastName"}}>Last Name</th>
      </thead>
      <tbody>
        {{#each arrangedContent as |prop|}}
        <tr>
          <td>{{prop.id}}</td>
          <td>{{prop.firstName}}</td>
          <td>{{prop.lastName}}</td>
         </tr>
        {{/each}}
      </tbody>
    </table>
  </script>

You can see this working here http://emberjs.jsbin.com/gunagoceyu/1/edit?html,js,output

I hope it helps