EmberJS - One Way Binding



The object model binding specifies the changes in one direction by using the one way binding method computed.oneWay() and can be useful when specifying the behaviour on another property by overriding.

Example

The following example specifies the behaviour on another property by overriding −

import Ember from 'ember';

export default function() {
   var CarOne = Ember.Object.create ({
      
      //primary value
      TotalPrice: 860600
   });

   var Car = Ember.Object.extend ({
      TotalPrice: Ember.computed.oneWay('CarOne.TotalPrice')
   });

   var Car = Car.create ({
      CarOne: CarOne
   });
   
   //Changing the user object name, changes the value on the view
   CarOne.set('TotalPrice', 860600);

   //Car.TotalPrice will become "860600"
   Car.set('TotalPrice', 930000);  // changes to the view don't make it back to the object.
   document.write('<h3>One Way Binding<h3>');
   document.write('Value of car : ' + CarOne.get('TotalPrice')); //display value as 860600
}

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

import objectmodelonewaybinding from './objectmodelonewaybinding';

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

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

objectmodelonewaybinding();

Output

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

Ember.js Object Model One Way Binding
emberjs_object_model.htm
Advertisements