Function Class


Module: ember-runtime

Show:

Methods

Show:

observes

The observes extension of Javascript's Function prototype is available when Ember.EXTEND_PROTOTYPES or Ember.EXTEND_PROTOTYPES.Function is true, which is the default.

You can observe property changes simply by adding the observes call to the end of your method declarations in classes that you write. For example:

1
2
3
4
5
Ember.Object.extend({
  valueObserver: function() {
    // Executes whenever the "value" property changes
  }.observes('value')
});

In the future this method may become asynchronous. If you want to ensure synchronous behavior, use observesImmediately.

See Ember.observer.

observesBefore

The observesBefore extension of Javascript's Function prototype is available when Ember.EXTEND_PROTOTYPES or Ember.EXTEND_PROTOTYPES.Function is true, which is the default.

You can get notified when a property change is about to happen by by adding the observesBefore call to the end of your method declarations in classes that you write. For example:

1
2
3
4
5
Ember.Object.extend({
  valueObserver: function() {
    // Executes whenever the "value" property is about to change
  }.observesBefore('value')
});

See Ember.beforeObserver.

observesImmediately

The observesImmediately extension of Javascript's Function prototype is available when Ember.EXTEND_PROTOTYPES or Ember.EXTEND_PROTOTYPES.Function is true, which is the default.

You can observe property changes simply by adding the observesImmediately call to the end of your method declarations in classes that you write. For example:

1
2
3
4
5
Ember.Object.extend({
  valueObserver: function() {
    // Executes immediately after the "value" property changes
  }.observesImmediately('value')
});

In the future, observes may become asynchronous. In this event, observesImmediately will maintain the synchronous behavior.

See Ember.immediateObserver.

on

The on extension of Javascript's Function prototype is available when Ember.EXTEND_PROTOTYPES or Ember.EXTEND_PROTOTYPES.Function is true, which is the default.

You can listen for events simply by adding the on call to the end of your method declarations in classes or mixins that you write. For example:

1
2
3
4
5
Ember.Mixin.create({
  doSomethingWithElement: function() {
    // Executes whenever the "didInsertElement" event fires
  }.on('didInsertElement')
});

See Ember.on.

property

The property extension of Javascript's Function prototype is available when Ember.EXTEND_PROTOTYPES or Ember.EXTEND_PROTOTYPES.Function is true, which is the default.

Computed properties allow you to treat a function like a property:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
MyApp.President = Ember.Object.extend({
  firstName: '',
  lastName:  '',

  fullName: function() {
    return this.get('firstName') + ' ' + this.get('lastName');
  }.property() // Call this flag to mark the function as a property
});

var president = MyApp.President.create({
  firstName: 'Barack',
  lastName: 'Obama'
});

president.get('fullName'); // 'Barack Obama'

Treating a function like a property is useful because they can work with bindings, just like any other property.

Many computed properties have dependencies on other properties. For example, in the above example, the fullName property depends on firstName and lastName to determine its value. You can tell Ember about these dependencies like this:

1
2
3
4
5
6
7
8
9
10
11
MyApp.President = Ember.Object.extend({
  firstName: '',
  lastName:  '',

  fullName: function() {
    return this.get('firstName') + ' ' + this.get('lastName');

    // Tell Ember.js that this computed property depends on firstName
    // and lastName
  }.property('firstName', 'lastName')
});

Make sure you list these dependencies so Ember knows when to update bindings that connect to a computed property. Changing a dependency will not immediately trigger an update of the computed property, but will instead clear the cache so that it is updated when the next get is called on the property.

See Ember.ComputedProperty, Ember.computed.