Component can't set value of bound property from parent controller

1

This is what i’ve doing to show a modal in ember.js:

components/modal-dialog.js
export default Ember.Component.extend({
  init: function () {
    this._super();
    this.set('registerAs', this);  // This stores the modal dialog in the bound property
  }    
});

controllers/application.js
export default Ember.Controller.extend({
  actions: {
    showModal: function () {
      this.get('modalDialogName').send('show');
    }
  }
});

templates/application.hbs
{{#modal-dialog registerAs=modalDialogName}}
Hello
{{/modal-dialog}}

As you can se, I bound the registerAs property of the component with the modalDialogName property of the controller. The controller then can call the component from this property. This used to work in the past but after returning to ember.js after a break, this doesn’t work anymore. The component can read the value of modalDialogName property, but cannot set it’s value. Anyone knows why?

2

The docs cover the strategy of toggling the visibility of a modal from a controller.

I would not register the component instance on the app controller and send actions into it. That’s an anti-pattern, instead should follow the example here:

https://github.com/yapplabs/ember-modal-dialog#controller-bound-usage