CODEWITHSUNDEEP
ember.js
Flexer
Flexer

Reputation: 253

How to set up bindings in Ember

I saw in the Ember documentation I could set up a binding using similar snippet:

householdIncomeBinding: 'App.wife.householdIncome'

However I would like to set up bindings by supplying objects instead of strings (path from global scope). I need to achieve something similar to this:

Ember.bind(obj1, "obj1AttributeName", obj2, "obj2AttributeName");

Suggestions are welcome. Thanks!

Upvotes: 1

Views: 195

Answers (2)

Dan Gebhardt
Dan Gebhardt

Reputation: 3281

Bindings can be connected directly to only one object. The from and to paths are evaluated relative to the object to which they're connected. These paths can also be global.

Check out the docs and implementation for the Ember.bind helper:

/**
  Global helper method to create a new binding. Just pass the root object
  along with a `to` and `from` path to create and connect the binding.

  @method bind
  @for Ember
  @param {Object} obj The root object of the transform.
  @param {String} to The path to the 'to' side of the binding.
    Must be relative to obj.
  @param {String} from The path to the 'from' side of the binding.
    Must be relative to obj or a global path.
  @return {Ember.Binding} binding instance
*/
Ember.bind = function(obj, to, from) {
  return new Ember.Binding(to, from).connect(obj);
};

So, you've got to decide which object you want to connect the binding to directly, and how it can reference the other object. You've got a couple options:

A) Provide some relationship between the two objects, and then use bind() to connect relative paths:

obj1.set('friend', obj2);
Ember.bind(obj1, 'obj1AttributeName', 'friend.obj2AttributeName');

B) Provide a global path to the from side of the binding:

App.set('obj2', obj2); // make obj2 accessible from the App namespace
Ember.bind(obj1, 'obj1AttributeName', 'App.obj2.obj2AttributeName');

Upvotes: 2

intuitivepixel
intuitivepixel

Reputation: 23322

Here an example how you could setup bindings, I've taken the example from the ember.js website (http://emberjs.com/guides/object-model/bindings/) and customized it to your question, 

App.wife = Ember.Object.create({
 householdIncome: null
});

App.husband = Ember.Object.create({
 householdIncomeBinding: 'App.wife.householdIncome'
});

App.husband.get('householdIncome'); // null

// if you now set the householdIncome to a new Ember.Object
App.husband.set('householdIncome', Ember.Object.create({amount:90000}));

// with bindings working you should be able to do this
App.wife.get('householdIncome.amount'); // 90000

hope it helps

Upvotes: 0

Related Questions