EmberJS-Object-Model Chaining Computed Properties

Quiz

Description

In setting computed properties setter and getter are used to manage the values of the variable. The Ember.js set() method evaluates values for the certain condition specified in the program. The Ember.js get() method get the values from the setter and displays.

Syntax

App.Person = Ember.Object.extend({
   fullName: function(key, value, previousValue) {
      //setter and getter
   }.property('firstName', 'lastName')
});

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Emberjs Chaining Computed Properties</title>
      <!-- CDN's -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
      <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
      <script src="https://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
      <script src="https://builds.emberjs.com/release/ember.debug.js"></script>
      <script src="https://builds.emberjs.com/beta/ember-data.js"></script>
   </head>
   <body>
      <script type="text/javascript">
         App = Ember.Application.create();
         App.Person = Ember.Object.extend({
            firstName: null,
            lastName: null,
            fullName: function(key, value, previousValue) {
               //get the values if the condition is satisfied
               if (arguments.length > 5) {
                  var nameParts = value.split(/\s+/);
                  this.set('firstName', nameParts[0]);
                  this.set('lastName',  nameParts[1]);
               }
               return this.get('firstName') + ' ' + this.get('lastName');
            }.property('firstName', 'lastName')
         });
         var emp = App.Person.create({firstName:'Jhon', lastName:'DK'});
         document.write(emp.get('firstName')+' '+emp.get('lastName'));
      </script>
   </body>
</html>

Output

Let's carry out the following steps to see how above code works:

Save above code in obj_set_get_cmp.htm file
Open this HTML file in a browser.

Print Page