- EmberJS Tutorial
- EmberJS - Home
- EmberJS - Overview
- EmberJS - Installation
- EmberJS - Core Concepts
- Creating and Running Application
- EmberJS - Object Model
- EmberJS - Router
- EmberJS - Templates
- EmberJS - Components
- EmberJS - Models
- EmberJS - Managing Dependencies
- EmberJS - Application Concerns
- EmberJS - Configuring Ember.js
- EmberJS - Ember Inspector
- EmberJS Useful Resources
- EmberJS - Quick Guide
- EmberJS - Useful Resources
- EmberJS - Discussion
EmberJS-Controllers Sorting
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.
Advertisements
To Continue Learning Please Login
Login with Google