EmberJS-Object-Model Alternate Invocation



Description

In alternate invocation, it is possible to pass one or more values to the computed property without using the property() method. This is possible because, the Ember.js extends the function prototype.

Syntax

ComputedPropertyName: Ember.computed('VarName1','VarName1','...','VarNamen', function(){
   return VarName;
})

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Emberjs Alternate Invocation</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.Car = Ember.Object.extend({
            CarName: null,
            CarModel: null,
            CarYear: null,
            //defining the computed property function fullDetails
            fullDetails: Ember.computed('CarName', 'CarModel','CarYear', function(){
               return ' Car Name: '+this.get('CarName') + ' Car Model: ' + this.get('CarModel')+' Year: '+this.get('CarYear');
            })
         });

         var car_obj = App.Car.create({
            CarName: "Alto",
            CarModel: "800",
            CarYear: "2012",
         });
         //get the details of the 'fullDetails' computed property and display them
         document.write("Full details of the Car:<br>"+car_obj.get('fullDetails'));
      </script>
   </body>
</html>

Output

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

  • Save above code in obj_mod_alt_invoc.htm file

  • Open this HTML file in a browser.

Advertisements