Ember.SortableMixin is a mixin that provides support for sorting lists of items in Ember.js applications. If you have a list of items that you want to display to your users in a specific order, Ember.SortableMixin can help you accomplish this task.
One of the main features of the mixin is the ability to define a sort function that determines the order in which the items in the list are displayed. This sort function can be based on any property or combination of properties of the items in the list and can be specified using a sortProperties property.
The mixin also provides support for sorting the list in ascending or descending order, and for reversing the order of the items in the list. It also provides support for filtering the list of items based on a given set of filter criteria.
In addition to these features, the mixin provides several methods and properties that can be used to control the sorting and filtering of the list, including methods for sorting and filtering the list, properties for accessing the current sort properties and order, and the current filter criteria.
Features of SortableMixin: One of the main features of Ember.SortableMixin is the ability to define a sort function that determines the order in which the items in the list are displayed. This sort function can be based on any property or combination of properties of the items in the list, and can be specified using a sortProperties property. In addition to this, Ember.SortableMixin also provides support for sorting the list in ascending or descending order, and for reversing the order of the items in the list. It also provides support for filtering the list of items based on a given set of filter criteria.
Methods and Properties: Ember.SortableMixin provides several methods and properties that can be used to control the sorting and filtering of the list. These include methods for sorting and filtering the list, properties for accessing the current sort properties and order, and the current filter criteria. Here are some examples of methods and properties provided by Ember.SortableMixin, along with their syntax:
Methods:
-
sort(sortProperties, sortAscending): This method sorts the list of items based on the specified sortProperties and sortAscending arguments. Example: this.get(‘model’).sort(‘name’, true)
-
filter(filterProperties, filterValue): This method filters the list of items based on the specified filterProperties and filterValue arguments. Example: this.get(‘model’).filter(‘location’, ‘Seattle’)
-
reverseObjects(): This method reverses the order of the items in the list. Example: this.get(‘model’).reverseObjects()
Properties:
- sortProperties: This property specifies the properties that the list should be sorted by. Example: this.set(‘sortProperties’, [‘price’, ‘name’]
- sortAscending: This property specifies whether the list should be sorted in ascending or descending order. Example: this.set(‘sortAscending’, false)
- filterProperties: This property specifies the properties that the list should be filtered by. Example: this.set(‘filterProperties’, [‘location’, ‘name’])
- filterValue: This property specifies the value that the list should be filtered by. Example: this.set(‘filterValue’, ‘Seattle’)
Example: This example allows the user to sort a list of items by different properties. The list of items is displayed in a table, and each column of the table has a button that the user can click to sort the list by the corresponding property (ID, first name, or last name). When the user clicks one of these buttons, the list is sorted by the corresponding property in ascending order. If the user clicks the button again, the list is sorted in descending order.
Here is a more detailed explanation of the code:
- The application is created using App = Ember.Application.create().
- The router is defined using App.Router.map(function() {}). In this case, no routes are defined, so the router will only have a default route.
- The IndexRoute is defined using App.IndexRoute = Ember.Route.extend({}). This route is responsible for returning the list of items that will be displayed in the table. In this case, the list is hardcoded as an array of objects.
- The IndexController is defined using App.IndexController = Ember.Controller.extend(Ember.SortableMixin, {}). This controller extends Ember.SortableMixin, which means it has access to the sorting and filtering functionality provided by the mixin. The controller also defines an action called sortBy that is triggered when the user clicks one of the buttons in the table. This action sets the sortProperties property to the property specified by the user and toggles the sortAscending property between true and false if the property specified by the user is already the current sort property.
- The main template is defined using a script tag with the type “text/x-handlebars”. This template displays a welcome message and an outlet, which will be replaced with the content of the index template when the user navigates to the default route.
- The index template is defined using a script tag with the type “text/x-handlebars” and the data-template-name attribute set to “index”. This template displays a table with the list of items. Each column of the table has a button that the user can click to sort the list by the corresponding property. The list of items is displayed using the each helper, which iterates over the arrangedContent property of the controller. This property is provided by Ember.SortableMixin and represents the sorted and filtered version of the original list of items.
Controller:
Javascript
App = Ember.Application.create(); App.Router.map(function () { // put your routes here }); App.IndexRoute = Ember.Route.extend({ model: function () { return Ember.A([ { id: 1, firstName: 'Kris', lastName: 'Zelon' }, { id: 10, firstName: 'Luke', lastName: 'andrew' }, { id: 3, firstName: 'Devendra', lastName: 'Salunke' } ]); } }); App.IndexController = Ember.Controller.extend(Ember.SortableMixin, { sortProperties: ['firstName'], actions: { sortBy: function (property) { if (property == this.get('sortProperties')[0]) { this.toggleProperty('sortAscending'); } else { this.set('sortAscending', true); } this.set('sortProperties', [property]); } } }); |
Template
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ember SortMixin</title> <link rel="stylesheet" href= <script src= </script> <script src= </script> <script src= </script> </head> <body> <script type="text/x-handlebars"> <h2>Welcome to Geeksforneveropen</h2> {{outlet}} </script> <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> </body> </html> |
Output :
