Object Model Observer and Asynchrony

Observers are synchronous in Ember.js, which fires immediately when one of the property of an observer gets updated

Example

The following example fires as soon as one of the properties they observe changes −

import Ember from 'ember';

export default function() {
   var Person = Ember.Object.extend ({
      fName: null,
      lName: null,
      
      //Defining the Details1 and Details2 computed property function
      Details1: Ember.computed('fName', 'lName',function() {
         return this.get('fName')+' '+this.get('lName');
      }),

      Details2: Ember.observer('Details1', function() {
         this.set('fName','Will');
         this.set('lName','Smith');
      })
   });

   //initializing the Person details
   var person = Person.create ({
     
      //initial value of fName and lName varialble
      fName: 'Mark',
      lName:'Waugh'
   });

   //updating the value for 'fName and lName' using set() method
   document.write('<strong>The updated name : </strong>' +person.get('Details1'));
}

Now open the app.js file and add the following line at the top of the file −

import observerasynchrony from './observerasynchrony';

Where, observerasynchrony is a name of the file specified as "observerasynchrony.js" and created under the "app" folder.

Next, call the inherited "observerasynchrony" at the bottom, before the export. It executes the observerasynchrony function, which is created in the observerasynchrony.js file −

observerasynchrony();

Output

Run the ember server and you will receive the following output −