Bindings across objects

Till now, we have seen bindings and dependencies between the properties of one object. Ember.js provides you with the ability to take those dependencies across objects. There could be cases wherein the properties of one object depend on the properties of another object. In such a case, Ember.js bindings come really handy.

Let us see that in the following example, chapter-2/example9/:

import Ember from 'ember';

export default Ember.Object.extend({
  name: "",
  age:18,
  address:"",
});

The contents of father.js are present in chapter-2/example9/app/father.js

import Ember from 'ember';

export default Ember.Object.extend({
  school:'',
  father:null,
  address: Ember.computed.alias('father.address')
});

The contents of child.js are present in chapter-2/example9/app/father.js

import father from './father';
import child from './child';

var darren = father.create({
  name:'Darren',
  age:40,
  address:'Brisbane'
});

var dan = child.create({
  school:'Brisbane State High School',
  father: darren
});

console.log(dan.get('address'));

darren.set('address','Sydney')

console.log(dan.get('address'));

//Output
//Brisbane
//Sydney

The father and child classes being used in app.js are present in chapter-2/example9/app/app.js

Here we have created two object types, a father and a child type. You can see in the child definition that the address of a child is same as its father's. Ember.js helps you to create bindings like this, which are between objects. Now, since the address of the child depends on the address of the father, when we update the address of the father, the changes reflect automatically in the child object as well. As a result, when use dan.get(address), it returns the correct address, which is sydney.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.15.206.25