EmberJS - Computed Properties

A computed property declares functions as properties and Ember.js automatically calls the computed properties when needed and combines one or more properties in one variable.

The following table lists down the properties of the computed property −

Example

The following example adds the computed property to Ember.object and shows how to display the data −

import Ember from 'ember';

export default function() {
   var Car = Ember.Object.extend ({
      
      //The values for below variables will be supplied by 'create' method
      CarName: null,
      CarModel: null,
      carDetails: Ember.computed('CarName', 'CarModel', function() {

         //returns values to the computed property function 'carDetails'
         return ' Car Name: ' + this.get('CarName') + '<br>' + 
            ' Car Model: ' + this.get('CarModel');
      })
   });

   var mycar = Car.create ({
      //initializing the values of Car variables
      CarName: "Alto",
      CarModel: "800",
   });
   
   //Displaying the information of the car
   document.write("<h2>Details of the car: <br></h2>");
   document.write(mycar.get('carDetails'));
}

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

import computedproperties from './computedproperties';

Where, computedproperties is a name of the file specified as "computedproperties.js" and created under the "app" folder. Now, call the inherited "computedproperties" at the bottom, before the export. It executes the computedproperties function which is created in the computedproperties.js file −

computedproperties();

Output

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