Function

sort (itemsKey, sortDefinitionOrDependentKeys, sortDefinition) ComputedProperty public

Module: @ember/object

Defined in packages/@ember/object/lib/computed/reduce_computed_macros.js:1263 

import { sort } from '@ember/object/computed';
itemsKey
String
sortDefinitionOrDependentKeys
String|Function|Array
The key of the sort definition (an array of sort properties), the sort function, or an array of additional dependent keys
sortDefinition
Function?
the sort function (when used with additional dependent keys)
returns
ComputedProperty
computes a new sorted array based on the sort property array or callback function

A computed property which returns a new array with all the properties from the first dependent array sorted based on a property or sort function. The sort macro can be used in two different ways:

  1. By providing a sort callback function
  2. By providing an array of keys to sort the array

In the first form, the callback method you provide should have the following signature:

1

function sortCallback(itemA, itemB);
  • itemA the first item to compare.
  • itemB the second item to compare.

This function should return negative number (e.g. -1) when itemA should come before itemB. It should return positive number (e.g. 1) when itemA should come after itemB. If the itemA and itemB are equal this function should return 0.

Therefore, if this function is comparing some numeric values, simple itemA - itemB or itemA.get( 'foo' ) - itemB.get( 'foo' ) can be used instead of series of if.

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

import { set } from '@ember/object';
import { sort } from '@ember/object/computed';

class ToDoList {
  constructor(todos) {
    set(this, 'todos', todos);
  }

  // using a custom sort function
  @sort('todos', function(a, b){
    if (a.priority > b.priority) {
      return 1;
    } else if (a.priority < b.priority) {
      return -1;
    }

    return 0;
  })
  priorityTodos;
}

let todoList = new ToDoList([
  { name: 'Unit Test', priority: 2 },
  { name: 'Documentation', priority: 3 },
  { name: 'Release', priority: 1 }
]);

todoList.priorityTodos; // [{ name:'Release', priority:1 }, { name:'Unit Test', priority:2 }, { name:'Documentation', priority:3 }]

Classic Class Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

import EmberObject from '@ember/object';
import { sort } from '@ember/object/computed';

let ToDoList = EmberObject.extend({
  // using a custom sort function
  priorityTodos: sort('todos', function(a, b){
    if (a.priority > b.priority) {
      return 1;
    } else if (a.priority < b.priority) {
      return -1;
    }

    return 0;
  })
});

let todoList = ToDoList.create({
  todos: [
    { name: 'Unit Test', priority: 2 },
    { name: 'Documentation', priority: 3 },
    { name: 'Release', priority: 1 }
  ]
});

todoList.priorityTodos; // [{ name:'Release', priority:1 }, { name:'Unit Test', priority:2 }, { name:'Documentation', priority:3 }]

You can also optionally pass an array of additional dependent keys as the second parameter, if your sort function is dependent on additional values that could changes:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

import EmberObject, { set } from '@ember/object';
import { sort } from '@ember/object/computed';

class ToDoList {
  sortKey = 'priority';

  constructor(todos) {
    set(this, 'todos', todos);
  }

  // using a custom sort function
  @sort('todos', ['sortKey'], function(a, b){
    if (a[this.sortKey] > b[this.sortKey]) {
      return 1;
    } else if (a[this.sortKey] < b[this.sortKey]) {
      return -1;
    }

    return 0;
  })
  sortedTodos;
});

let todoList = new ToDoList([
  { name: 'Unit Test', priority: 2 },
  { name: 'Documentation', priority: 3 },
  { name: 'Release', priority: 1 }
]);

todoList.priorityTodos; // [{ name:'Release', priority:1 }, { name:'Unit Test', priority:2 }, { name:'Documentation', priority:3 }]

In the second form, you should provide the key of the array of sort values as the second parameter:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

import { set } from '@ember/object';
import { sort } from '@ember/object/computed';

class ToDoList {
  constructor(todos) {
    set(this, 'todos', todos);
  }

  // using standard ascending sort
  todosSorting = ['name'];
  @sort('todos', 'todosSorting') sortedTodos;

  // using descending sort
  todosSortingDesc = ['name:desc'];
  @sort('todos', 'todosSortingDesc') sortedTodosDesc;
}

let todoList = new ToDoList([
  { name: 'Unit Test', priority: 2 },
  { name: 'Documentation', priority: 3 },
  { name: 'Release', priority: 1 }
]);

todoList.sortedTodos; // [{ name:'Documentation', priority:3 }, { name:'Release', priority:1 }, { name:'Unit Test', priority:2 }]
todoList.sortedTodosDesc; // [{ name:'Unit Test', priority:2 }, { name:'Release', priority:1 }, { name:'Documentation', priority:3 }]