Ember.computed Namespace packages/ember-metal/lib/computed.js:458


PUBLIC

This helper returns a new property descriptor that wraps the passed computed property function. You can use this helper to define properties with mixins or via Ember.defineProperty().

If you pass a function as an argument, it will be used as a getter. A computed property defined in this way might look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let Person = Ember.Object.extend({
  init() {
    this._super(...arguments);

    this.firstName = 'Betty';
    this.lastName = 'Jones';
  },

  fullName: Ember.computed('firstName', 'lastName', function() {
    return `${this.get('firstName')} ${this.get('lastName')}`;
  })
});

let client = Person.create();

client.get('fullName'); // 'Betty Jones'

client.set('lastName', 'Fuller');
client.get('fullName'); // 'Betty Fuller'

You can pass a hash with two functions, get and set, as an argument to provide both a getter and setter:

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
let Person = Ember.Object.extend({
  init() {
    this._super(...arguments);

    this.firstName = 'Betty';
    this.lastName = 'Jones';
  },

  fullName: Ember.computed('firstName', 'lastName', {
    get(key) {
      return `${this.get('firstName')} ${this.get('lastName')}`;
    },
    set(key, value) {
      let [firstName, lastName] = value.split(/\s+/);
      this.setProperties({ firstName, lastName });
      return value;
    }
  });
})

let client = Person.create();
client.get('firstName'); // 'Betty'

client.set('fullName', 'Carroll Fuller');
client.get('firstName'); // 'Carroll'

The set function should accept two parameters, key and value. The value returned from set will be the new value of the property.

Note: This is the preferred way to define computed properties when writing third-party libraries that depend on or use Ember, since there is no guarantee that the user will have prototype Extensions enabled.

The alternative syntax, with prototype extensions, might look like:

1
2
3
fullName() {
  return this.get('firstName') + ' ' + this.get('lastName');
}.property('firstName', 'lastName')
Show:

alias

(dependentKey) Ember.ComputedProperty public

Creates a new property that is an alias for another property on an object. Calls to get or set this property behave as though they were called on the original property.

1
2
3
4
5
6
7
8
9
10
11
12
var Person = Ember.Object.extend({
  name: 'Alex Matchneer',
  nomen: Ember.computed.alias('name')
});

var alex = Person.create();

alex.get('nomen'); // 'Alex Matchneer'
alex.get('name');  // 'Alex Matchneer'

alex.set('nomen', '@machty');
alex.get('name');  // '@machty'

Parameters:

dependentKey String

Returns:

Ember.ComputedProperty
computed property which creates an alias to the original value for property.

and

(dependentKey) Ember.ComputedProperty public

A computed property that performs a logical and on the original values for the provided dependent properties.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
var Hamster = Ember.Object.extend({
  readyForCamp: Ember.computed.and('hasTent', 'hasBackpack')
});

var hamster = Hamster.create();

hamster.get('readyForCamp'); // false
hamster.set('hasTent', true);
hamster.get('readyForCamp'); // false
hamster.set('hasBackpack', true);
hamster.get('readyForCamp'); // true
hamster.set('hasBackpack', 'Yes');
hamster.get('readyForCamp'); // 'Yes'

Parameters:

dependentKey String

Returns:

Ember.ComputedProperty
computed property which performs a logical `and` on the values of all the original values for properties.

bool

(dependentKey) Ember.ComputedProperty public

A computed property that converts the provided dependent property into a boolean value.

1
2
3
4
5
6
7
8
9
10
11
12
13
var Hamster = Ember.Object.extend({
  hasBananas: Ember.computed.bool('numBananas')
});

var hamster = Hamster.create();

hamster.get('hasBananas'); // false
hamster.set('numBananas', 0);
hamster.get('hasBananas'); // false
hamster.set('numBananas', 1);
hamster.get('hasBananas'); // true
hamster.set('numBananas', null);
hamster.get('hasBananas'); // false

Parameters:

dependentKey String

Returns:

Ember.ComputedProperty
computed property which converts to boolean the original value for property

collect

(dependentKey) Ember.ComputedProperty public

A computed property that returns the array of values for the provided dependent properties.

Example

1
2
3
4
5
6
7
8
9
10
var Hamster = Ember.Object.extend({
  clothes: Ember.computed.collect('hat', 'shirt')
});

var hamster = Hamster.create();

hamster.get('clothes'); // [null, null]
hamster.set('hat', 'Camp Hat');
hamster.set('shirt', 'Camp Shirt');
hamster.get('clothes'); // ['Camp Hat', 'Camp Shirt']

Parameters:

dependentKey String

Returns:

Ember.ComputedProperty
computed property which maps values of all passed in properties to an array.

deprecatingAlias

(dependentKey) Ember.ComputedProperty public
Defined in packages/ember-metal/lib/computed_macros.js:596
Available since 1.7.0

Creates a new property that is an alias for another property on an object. Calls to get or set this property behave as though they were called on the original property, but also print a deprecation warning.

Parameters:

dependentKey String

Returns:

Ember.ComputedProperty
computed property which creates an alias with a deprecation to the original value for property.

empty

(dependentKey) Ember.ComputedProperty public
Defined in packages/ember-metal/lib/computed_macros.js:32
Available since 1.6.0

A computed property that returns true if the value of the dependent property is null, an empty string, empty array, or empty function.

Example

1
2
3
4
5
6
7
8
9
10
11
var ToDoList = Ember.Object.extend({
  isDone: Ember.computed.empty('todos')
});

var todoList = ToDoList.create({
  todos: ['Unit Test', 'Documentation', 'Release']
});

todoList.get('isDone'); // false
todoList.get('todos').clear();
todoList.get('isDone'); // true

Parameters:

dependentKey String

Returns:

Ember.ComputedProperty
computed property which negate the original value for property

equal

(dependentKey, value) Ember.ComputedProperty public

A computed property that returns true if the provided dependent property is equal to the given value.

Example

1
2
3
4
5
6
7
8
9
10
11
var Hamster = Ember.Object.extend({
  napTime: Ember.computed.equal('state', 'sleepy')
});

var hamster = Hamster.create();

hamster.get('napTime'); // false
hamster.set('state', 'sleepy');
hamster.get('napTime'); // true
hamster.set('state', 'hungry');
hamster.get('napTime'); // false

Parameters:

dependentKey String
value String|Number|Object

Returns:

Ember.ComputedProperty
computed property which returns true if the original value for property is equal to the given value.

filter

(dependentKey, callback) Ember.ComputedProperty public

Filters the array by the callback.

The callback method you provide should have the following signature. item is the current item in the iteration. index is the integer index of the current item in the iteration. array is the dependant array itself.

1
function(item, index, array);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var Hamster = Ember.Object.extend({
  remainingChores: Ember.computed.filter('chores', function(chore, index, array) {
    return !chore.done;
  })
});

var hamster = Hamster.create({
  chores: [
    { name: 'cook', done: true },
    { name: 'clean', done: true },
    { name: 'write more unit tests', done: false }
  ]
});

hamster.get('remainingChores'); // [{name: 'write more unit tests', done: false}]

Parameters:

dependentKey String
callback Function

Returns:

Ember.ComputedProperty
the filtered array

filterBy

(dependentKey, propertyKey, value) Ember.ComputedProperty public

Filters the array by the property and value

1
2
3
4
5
6
7
8
9
10
11
12
13
var Hamster = Ember.Object.extend({
  remainingChores: Ember.computed.filterBy('chores', 'done', false)
});

var hamster = Hamster.create({
  chores: [
    { name: 'cook', done: true },
    { name: 'clean', done: true },
    { name: 'write more unit tests', done: false }
  ]
});

hamster.get('remainingChores'); // [{ name: 'write more unit tests', done: false }]

Parameters:

dependentKey String
propertyKey String
value *

Returns:

Ember.ComputedProperty
the filtered array

gt

(dependentKey, value) Ember.ComputedProperty public

A computed property that returns true if the provided dependent property is greater than the provided value.

Example

1
2
3
4
5
6
7
8
9
10
11
var Hamster = Ember.Object.extend({
  hasTooManyBananas: Ember.computed.gt('numBananas', 10)
});

var hamster = Hamster.create();

hamster.get('hasTooManyBananas'); // false
hamster.set('numBananas', 3);
hamster.get('hasTooManyBananas'); // false
hamster.set('numBananas', 11);
hamster.get('hasTooManyBananas'); // true

Parameters:

dependentKey String
value Number

Returns:

Ember.ComputedProperty
computed property which returns true if the original value for property is greater than given value.

gte

(dependentKey, value) Ember.ComputedProperty public

A computed property that returns true if the provided dependent property is greater than or equal to the provided value.

Example

1
2
3
4
5
6
7
8
9
10
11
var Hamster = Ember.Object.extend({
  hasTooManyBananas: Ember.computed.gte('numBananas', 10)
});

var hamster = Hamster.create();

hamster.get('hasTooManyBananas'); // false
hamster.set('numBananas', 3);
hamster.get('hasTooManyBananas'); // false
hamster.set('numBananas', 10);
hamster.get('hasTooManyBananas'); // true

Parameters:

dependentKey String
value Number

Returns:

Ember.ComputedProperty
computed property which returns true if the original value for property is greater or equal then given value.

intersect

(propertyKey) Ember.ComputedProperty public

A computed property which returns a new array with all the duplicated elements from two or more dependent arrays.

Example

1
2
3
4
5
6
7
8
var obj = Ember.Object.extend({
  friendsInCommon: Ember.computed.intersect('adaFriends', 'charlesFriends')
}).create({
  adaFriends: ['Charles Babbage', 'John Hobhouse', 'William King', 'Mary Somerville'],
  charlesFriends: ['William King', 'Mary Somerville', 'Ada Lovelace', 'George Peacock']
});

obj.get('friendsInCommon'); // ['William King', 'Mary Somerville']

Parameters:

propertyKey String

Returns:

Ember.ComputedProperty
computes a new array with all the duplicated elements from the dependent arrays

lt

(dependentKey, value) Ember.ComputedProperty public

A computed property that returns true if the provided dependent property is less than the provided value.

Example

1
2
3
4
5
6
7
8
9
10
11
var Hamster = Ember.Object.extend({
  needsMoreBananas: Ember.computed.lt('numBananas', 3)
});

var hamster = Hamster.create();

hamster.get('needsMoreBananas'); // true
hamster.set('numBananas', 3);
hamster.get('needsMoreBananas'); // false
hamster.set('numBananas', 2);
hamster.get('needsMoreBananas'); // true

Parameters:

dependentKey String
value Number

Returns:

Ember.ComputedProperty
computed property which returns true if the original value for property is less then given value.

lte

(dependentKey, value) Ember.ComputedProperty public

A computed property that returns true if the provided dependent property is less than or equal to the provided value.

Example

1
2
3
4
5
6
7
8
9
10
11
var Hamster = Ember.Object.extend({
  needsMoreBananas: Ember.computed.lte('numBananas', 3)
});

var hamster = Hamster.create();

hamster.get('needsMoreBananas'); // true
hamster.set('numBananas', 5);
hamster.get('needsMoreBananas'); // false
hamster.set('numBananas', 3);
hamster.get('needsMoreBananas'); // true

Parameters:

dependentKey String
value Number

Returns:

Ember.ComputedProperty
computed property which returns true if the original value for property is less or equal than given value.

map

(dependentKey, callback) Ember.ComputedProperty public

Returns an array mapped via the callback

The callback method you provide should have the following signature. item is the current item in the iteration. index is the integer index of the current item in the iteration.

1
function(item, index);

Example

1
2
3
4
5
6
7
8
9
10
11
var Hamster = Ember.Object.extend({
  excitingChores: Ember.computed.map('chores', function(chore, index) {
    return chore.toUpperCase() + '!';
  })
});

var hamster = Hamster.create({
  chores: ['clean', 'write more unit tests']
});

hamster.get('excitingChores'); // ['CLEAN!', 'WRITE MORE UNIT TESTS!']

Parameters:

dependentKey String
callback Function

Returns:

Ember.ComputedProperty
an array mapped via the callback

mapBy

(dependentKey, propertyKey) Ember.ComputedProperty public

Returns an array mapped to the specified key.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var Person = Ember.Object.extend({
  childAges: Ember.computed.mapBy('children', 'age')
});

var lordByron = Person.create({ children: [] });

lordByron.get('childAges'); // []
lordByron.get('children').pushObject({ name: 'Augusta Ada Byron', age: 7 });
lordByron.get('childAges'); // [7]
lordByron.get('children').pushObjects([{
  name: 'Allegra Byron',
  age: 5
}, {
  name: 'Elizabeth Medora Leigh',
  age: 8
}]);
lordByron.get('childAges'); // [7, 5, 8]

Parameters:

dependentKey String
propertyKey String

Returns:

Ember.ComputedProperty
an array mapped to the specified key

match

(dependentKey, regexp) Ember.ComputedProperty public

A computed property which matches the original value for the dependent property against a given RegExp, returning true if the value matches the RegExp and false if it does not.

Example

1
2
3
4
5
6
7
8
9
10
11
var User = Ember.Object.extend({
  hasValidEmail: Ember.computed.match('email', /^.+@.+\..+$/)
});

var user = User.create({loggedIn: false});

user.get('hasValidEmail'); // false
user.set('email', '');
user.get('hasValidEmail'); // false
user.set('email', 'ember_hamster@example.com');
user.get('hasValidEmail'); // true

Parameters:

dependentKey String
regexp RegExp

Returns:

Ember.ComputedProperty
computed property which match the original value for property against a given RegExp

max

(dependentKey) Ember.ComputedProperty public

A computed property that calculates the maximum value in the dependent array. This will return -Infinity when the dependent array is empty.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var Person = Ember.Object.extend({
  childAges: Ember.computed.mapBy('children', 'age'),
  maxChildAge: Ember.computed.max('childAges')
});

var lordByron = Person.create({ children: [] });

lordByron.get('maxChildAge'); // -Infinity
lordByron.get('children').pushObject({
  name: 'Augusta Ada Byron', age: 7
});
lordByron.get('maxChildAge'); // 7
lordByron.get('children').pushObjects([{
  name: 'Allegra Byron',
  age: 5
}, {
  name: 'Elizabeth Medora Leigh',
  age: 8
}]);
lordByron.get('maxChildAge'); // 8

Parameters:

dependentKey String

Returns:

Ember.ComputedProperty
computes the largest value in the dependentKey's array

min

(dependentKey) Ember.ComputedProperty public

A computed property that calculates the minimum value in the dependent array. This will return Infinity when the dependent array is empty.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var Person = Ember.Object.extend({
  childAges: Ember.computed.mapBy('children', 'age'),
  minChildAge: Ember.computed.min('childAges')
});

var lordByron = Person.create({ children: [] });

lordByron.get('minChildAge'); // Infinity
lordByron.get('children').pushObject({
  name: 'Augusta Ada Byron', age: 7
});
lordByron.get('minChildAge'); // 7
lordByron.get('children').pushObjects([{
  name: 'Allegra Byron',
  age: 5
}, {
  name: 'Elizabeth Medora Leigh',
  age: 8
}]);
lordByron.get('minChildAge'); // 5

Parameters:

dependentKey String

Returns:

Ember.ComputedProperty
computes the smallest value in the dependentKey's array

none

(dependentKey) Ember.ComputedProperty public

A computed property that returns true if the value of the dependent property is null or undefined. This avoids errors from JSLint complaining about use of ==, which can be technically confusing.

Example

1
2
3
4
5
6
7
8
9
10
11
var Hamster = Ember.Object.extend({
  isHungry: Ember.computed.none('food')
});

var hamster = Hamster.create();

hamster.get('isHungry'); // true
hamster.set('food', 'Banana');
hamster.get('isHungry'); // false
hamster.set('food', null);
hamster.get('isHungry'); // true

Parameters:

dependentKey String

Returns:

Ember.ComputedProperty
computed property which returns true if original value for property is null or undefined.

not

(dependentKey) Ember.ComputedProperty public

A computed property that returns the inverse boolean value of the original value for the dependent property.

Example

1
2
3
4
5
6
7
8
9
var User = Ember.Object.extend({
  isAnonymous: Ember.computed.not('loggedIn')
});

var user = User.create({loggedIn: false});

user.get('isAnonymous'); // true
user.set('loggedIn', true);
user.get('isAnonymous'); // false

Parameters:

dependentKey String

Returns:

Ember.ComputedProperty
computed property which returns inverse of the original value for property

notEmpty

(dependentKey) Ember.ComputedProperty public

A computed property that returns true if the value of the dependent property is NOT null, an empty string, empty array, or empty function.

Example

1
2
3
4
5
6
7
8
9
var Hamster = Ember.Object.extend({
  hasStuff: Ember.computed.notEmpty('backpack')
});

var hamster = Hamster.create({ backpack: ['Food', 'Sleeping Bag', 'Tent'] });

hamster.get('hasStuff');         // true
hamster.get('backpack').clear(); // []
hamster.get('hasStuff');         // false

Parameters:

dependentKey String

Returns:

Ember.ComputedProperty
computed property which returns true if original value for property is not empty.

oneWay

(dependentKey) Ember.ComputedProperty public

Where computed.alias aliases get and set, and allows for bidirectional data flow, computed.oneWay only provides an aliased get. The set will not mutate the upstream property, rather causes the current property to become the value set. This causes the downstream property to permanently diverge from the upstream property.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var User = Ember.Object.extend({
  firstName: null,
  lastName: null,
  nickName: Ember.computed.oneWay('firstName')
});

var teddy = User.create({
  firstName: 'Teddy',
  lastName:  'Zeenny'
});

teddy.get('nickName');              // 'Teddy'
teddy.set('nickName', 'TeddyBear'); // 'TeddyBear'
teddy.get('firstName');             // 'Teddy'

Parameters:

dependentKey String

Returns:

Ember.ComputedProperty
computed property which creates a one way computed property to the original value for property.

or

(dependentKey) Ember.ComputedProperty public

A computed property which performs a logical or on the original values for the provided dependent properties.

Example

1
2
3
4
5
6
7
8
9
10
11
var Hamster = Ember.Object.extend({
  readyForRain: Ember.computed.or('hasJacket', 'hasUmbrella')
});

var hamster = Hamster.create();

hamster.get('readyForRain'); // false
hamster.set('hasUmbrella', true);
hamster.get('readyForRain'); // true
hamster.set('hasJacket', 'Yes');
hamster.get('readyForRain'); // 'Yes'

Parameters:

dependentKey String

Returns:

Ember.ComputedProperty
computed property which performs a logical `or` on the values of all the original values for properties.

readOnly

(dependentKey) Ember.ComputedProperty public
Defined in packages/ember-metal/lib/computed_macros.js:557
Available since 1.5.0

Where computed.oneWay provides oneWay bindings, computed.readOnly provides a readOnly one way binding. Very often when using computed.oneWay one does not also want changes to propagate back up, as they will replace the value.

This prevents the reverse flow, and also throws an exception when it occurs.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var User = Ember.Object.extend({
  firstName: null,
  lastName: null,
  nickName: Ember.computed.readOnly('firstName')
});

var teddy = User.create({
  firstName: 'Teddy',
  lastName:  'Zeenny'
});

teddy.get('nickName');              // 'Teddy'
teddy.set('nickName', 'TeddyBear'); // throws Exception
// throw new Ember.Error('Cannot Set: nickName on: <User:ember27288>' );`
teddy.get('firstName');             // 'Teddy'

Parameters:

dependentKey String

Returns:

Ember.ComputedProperty
computed property which creates a one way computed property to the original value for property.

reads

(dependentKey) Ember.ComputedProperty public

This is a more semantically meaningful alias of computed.oneWay, whose name is somewhat ambiguous as to which direction the data flows.

Parameters:

dependentKey String

Returns:

Ember.ComputedProperty
computed property which creates a one way computed property to the original value for property.

setDiff

(setAProperty, setBProperty) Ember.ComputedProperty public

A computed property which returns a new array with all the properties from the first dependent array that are not in the second dependent array.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
var Hamster = Ember.Object.extend({
  likes: ['banana', 'grape', 'kale'],
  wants: Ember.computed.setDiff('likes', 'fruits')
});

var hamster = Hamster.create({
  fruits: [
    'grape',
    'kale',
  ]
});

hamster.get('wants'); // ['banana']

Parameters:

setAProperty String
setBProperty String

Returns:

Ember.ComputedProperty
computes a new array with all the items from the first dependent array that are not in the second dependent array

sort

(itemsKey, sortDefinition) Ember.ComputedProperty public

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 callback method you provide should have the following signature:

1
function(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
29
30
var ToDoList = Ember.Object.extend({
  // using standard ascending sort
  todosSorting: ['name'],
  sortedTodos: Ember.computed.sort('todos', 'todosSorting'),

  // using descending sort
  todosSortingDesc: ['name:desc'],
  sortedTodosDesc: Ember.computed.sort('todos', 'todosSortingDesc'),

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

    return 0;
  })
});

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

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

Parameters:

itemsKey String
sortDefinition String or Function
a dependent key to an array of sort properties (add `:desc` to the arrays sort properties to sort descending) or a function to use when sorting

Returns:

Ember.ComputedProperty
computes a new sorted array based on the sort property array or callback function

sum

(dependentKey) Ember.ComputedProperty public

A computed property that returns the sum of the values in the dependent array.

Parameters:

dependentKey String

Returns:

Ember.ComputedProperty
computes the sum of all values in the dependentKey's array

union

(propertyKey) Ember.ComputedProperty public

Alias for Ember.computed.uniq.

Parameters:

propertyKey String

Returns:

Ember.ComputedProperty
computes a new array with all the unique elements from the dependent array

uniq

(propertyKey) Ember.ComputedProperty public

A computed property which returns a new array with all the unique elements from one or more dependent arrays.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var Hamster = Ember.Object.extend({
  uniqueFruits: Ember.computed.uniq('fruits')
});

var hamster = Hamster.create({
  fruits: [
    'banana',
    'grape',
    'kale',
    'banana'
  ]
});

hamster.get('uniqueFruits'); // ['banana', 'grape', 'kale']

Parameters:

propertyKey String

Returns:

Ember.ComputedProperty
computes a new array with all the unique elements from the dependent array