Ember.js: data-binding between controllers

Question

I\'m trying to bind in the ApplicationController to the IndexController. Here is my jsfiddle. To summarize, here is the binding I have in the Application controller

Answer 1

Whilst the solution is simple, let me try and explain it. Please feel free to ask any questions if you're unsure.

You've bound to a property on an instance of App.indexController. However, this instance doesn't exist, because Ember.JS no longer places the instance of the controllers directly on App.

It used to reside on App in previous versions of Ember, but not any more, because it's bad practice to reference a controller using its absolute name, since it creates tight coupling between the controllers.

That's why Ember.JS have other ways to reference to controllers. It is a common requirement to need other controllers in your current controller. Ember.JS have the following methods:

• this.controllerFor() in Ember.Route: http://emberjs.com/guides/routing/setting-up-a-controller/
• However, controllerFor has now been deprecated in favour of:
• needs which tells the current controller which controllers it needs access to: https://github.com/emberjs/ember.js/pull/1731

Therefore, if we implement the needs, then your controller now has access to the other controller, as well as the properties it possesses: http://jsfiddle.net/uB5tX/7/

By using the needs, we have loosely coupled the controllers. We have referenced it by its name, and Ember.JS will look-up the controller for us. If we change App then we won't need to change anything, and if/when Ember.JS changes the behaviour of controllers, we shouldn't need to update our needs again, because when the behaviour changes, then the needs will also update, bringing back the correct controller.

Answer 2

You could also use following syntax to access other controller's properties:

import Ember from 'ember';

export default Ember.Controller.extend({
  index: Ember.inject.controller('index'),
  indexIsClicked: Ember.computed.alias("index.isClicked"),

  isIndexClicked: Ember.observer('index.isClicked', function() {
    alert("its changed to " + this.get("indexIsClicked"));
  })
});

However you need to make Ember initialize this controller first, so you actually need to call some computed property which depends on index (it will lazily initialize it). So, for example in template I use:

Is index clicked: <b>{{indexIsClicked}}</b>

Working demo.