Emberjs partial's action doesnt fire in component

Question

I try to extend a component (https://github.com/ember-addons/ember-forms) to make it possible to add extra button next to the form controls.

The idea

developer passes an extra property to the component, and a partial will be rendered next to the form control (input, select, textarea).

Problem

It works fine but if i have a partial with some action, the action wont fire.

JsBin

Here is a simplified JsBin which demonstrates the problem: http://jsbin.com/pexolude/105/edit

html

  <script type="text/x-handlebars">
    <h2>Component test</h2>

    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="index">
  {{booh-whaa partial="somebutton"}}
  <h3>This partial's action works</h3>
  {{partial "somebutton"}}
  </script>

   <script type="text/x-handlebars" data-template-name='_somebutton'>
  <button {{action "booh"}} >Hit me!</button>
</script>

     <script type="text/x-handlebars" data-template-name='components/booh-whaa'>
  <h3>This is my component</h3>
  {{partial partial}}
</script>

JS.

App = Ember.Application.create();

App.IndexController = Ember.Controller.extend({
  selectedCategory:null,
  actions: {
    booh: function() {
      alert("booh!");
    } 
  }
});

App.BoohWhaaComponent = Ember.Component.extend({

});

Duncan Walker Duncan Walker · Accepted Answer · 2014-07-03T02:42:16

As Knownasilya said, actions inside a component are, by default, handled by the component. However, If you specify the target on the action helper, the action with automatically propagate and you don't have to use sendAction().

In your case, this is as simple as:

{{action 'booh' target='controller'}}

Or if the action is on the route's view:

{{action 'booh' target='parentView'}}

Another option is to use Em.TargetActionSupport to send actions with contexts and other arguments to specific targets throughout your app.

Emberjs partial's action doesnt fire in component

2 Answers