Controller bindings for nested controllers with {{render}} helper in Ember.js

Question

I'm having troubles detecting property changes in nested controllers.

Here's my simplified code:

ActionCardController

ActionCardController = Ember.ObjectController.extend ActivatableHandles,

  needs: ['actionCards', 'handle-connector']

HandleConnectorController

HandleConnectorController = Ember.ObjectController.extend
  content: {}

  testProperty: (->
    @get('somePropertyThatChanges')
  ).property('someOtherProperty')

ActionCard template

<div ...
  ...
  ...
  ...
  {{render 'handle-connector' this}}
  ...
  {{controllers.handle-connector.testProperty}}
</div>

As shown, I have a nested "handle-connector" controller (with multiple properties) with its own view and template which needs to be rendered inside of ActionCard template. Everything renders and behaves fine within handle-connector context but I cant't seem to access testProperty in the parent controller (which is a computed property on nested handle-controller). I can only access the initial property value but once it gets changed in the nested controller, it does not refresh in the parent controller (ActionCard).

If I don't specify a model in the render helper, calling just:

{{render 'handle-connector'}}

...then the property gets refreshed in the parent controller as well and this approach works fine. But when I'm rendering multiple ActionCards, I get the error "You can only use the {{render}} helper once without a model object as its second argument". What's the correct way of dealing with this situation?

Kingpin2k Kingpin2k · Accepted Answer · 2014-08-05T15:36:55

needs accesses a singleton instance of the controller, whereas render with a model creates a unique instance of the controller for that particular template being injected.

You can access the parent controller from the rendered controller using this.parentController from the child controller, which gives you a means of communication from the child to the parent.

Example: http://emberjs.jsbin.com/buzud/1/edit

Controller bindings for nested controllers with {{render}} helper in Ember.js

1 Answers