Emberjs partial's action doesnt fire in component

问题

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({

});

回答1:

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.

回答2:

When you fire an action inside a component, that component handles the action. If you want it to continue, use this.sendAction('action') and then on your component set {{booh-whaa action='booh'}}. See the guides for more information about actions in components.

Here's a working jsbin.

Also partials no longer require an underscore.

来源：https://stackoverflow.com/questions/24531308/emberjs-partials-action-doesnt-fire-in-component

标签

javascript

ember.js