CODEWITHSUNDEEP
ember.js
hideki
hideki

Reputation: 113

EmberJS binding does not work

I just started to learn Ember.js, and reading the doucmentation at http://emberjs.com/. At the Binding section, I just copied&pasted following code, and executed it on Chrome browser. Binded data (App.husband.get('householdIncome')) always returned 'undefined'. Do you know why? I'd like to know why my code does not work.

----- HTML code ------

<html>
<body>
    <script src="js/libs/jquery-1.7.2.js"></script>
    <script src="js/libs/ember-0.9.6.js"></script>
    <script src="js/app.js"></script>
</body>
</html>

----- app.js ------

var App = Ember.Application.create();
App.wife = Ember.Object.create({
  householdIncome: 80000
});

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

console.log(App.wife.get('householdIncome')); // 80000
console.log(App.husband.get('householdIncome'));// expected 80000

------ Result Output -----------

80000
undefined

Upvotes: 3

Views: 1075

Answers (1)

Alex Matchneer
Alex Matchneer

Reputation: 3309

You need to put Em.run.sync(); before the .get()s. The reason for this is that Ember's RunLoop, which connects bound properties, hasn't finished running. By using Em.run.sync();, you force the RunLoop to run to completion before any code that follows. This might seem like an inconvenience, but normally, you don't ever really need to call .get() so soon after declaring objects with bound properties, because the RunLoop will handle connecting those properties ultimately to the Handlebars templates which display those values properly. But in some cases, you need those properties to be bound immediately, in which case you use Em.run.sync().

See this jsfiddle: http://jsfiddle.net/edwG6/

Also, you'll notice a very similar example on http://emberjs.com in the first Bindings section. Note the comment that says // Later, after Ember has resolved bindings...

Upvotes: 6

Related Questions