Ember.js - Open modal action won't bubble out of component

Question

I followed Ember.js's Using Modal Dialogs and put an action handler in the ApplicationRoute . This worked out fine until I tried using the same action inside a component's template, in which case it doesn't do anything the following error in console: Uncaught Error: Assertion Failed: The target for <appkit@component:user-info::ember451> (49.5) does not have a send method .

Here's a JSBin demonstrating my issue. Notice how the action that is specified in the index template calls the modal, yet the action specified inside a component doesn't. The gist of the JSBin is this:

index template

<!-- this creates the modal successfully -->
<button {{action "openModal" "modal-login"}}>open a modal (not in a component)</button>

<!-- this component has the same button as above in code, but clicking the button doesnt work -->
{{user-info}}

user-info component template

<button {{action "openModal" "modal-login"}}>open a modal(in a component)</button>

I've found a fix to this but it is very hacky and adds a lot of code to my components. In the component declaration, I duplicated the 'openModal' action and made it send an action through a registered action on the component, like so .

Answer 1

You need to send the action to the router actions. like so:

App.UserInfoComponent = Ember.Component.extend({
  actions: {
        openModal: function(modalName) {
          console.log(modalName);      this.sendAction('openModal',modalName);
            }
        }
});

here is a jsbin with the working sollution: http://jsbin.com/fijujikape/1/edit?html,js,console,output

Answer 2

Your fix is the expected behaviour, actions being fired inside a component template are designed to be handled by the component. When necessary, you could redirect your action as in the guide example.

If you want your component action be targeted to controller/route convention flow, you must setup the action into the component itself instead inside a component child view.

 {{user-info tagName='button' 
   action='openModal' 
   context='modal-login' }}

http://jsbin.com/takatoyi/2/edit