Ember.js 组件操作未触发

Question

I am trying to make a reusable ember component. I want to add an action to this component, so when the user clicks a button somethings happen. The problem is, that this action is not been called. I am doing it this way:

DummyComponent.js

App.DummyComponent = Ember.Component.extend({
  actions: {
    dummy_action: function() {
      console.log('dummy_action fired!');
    } 
  } 
});

dummy-component.hbs

<p>dummy component</p>
<button {{action "dummy_action"}}>Dummy action</button>

The component is rendering correctly when I include in my application.hbs :

{{ dummy-component }}

But as I said, the action is not beeing fired.

If I create an action in my controller using the same approach, the action is called correctly.

What am I doing wrong?

Thans!

Answer 1

From the component guide :

Note: Components must have a dash in their name. So blog-post is an acceptable name, but post is not. This prevents clashes with current or future HTML element names, and ensures Ember picks up the components automatically.

An example is available here .

Whenever ember find an unknown helper name, it tries to resolve it with ComponentLookup . In your case, the component template is successfully resolved but it cannot find your component in the container and register/assign a default Ember.Component which does not implement your action handler.

Answer 2

try this:

create a view:

MainAppView = Ember.View.extend({
   actions: {
       dummy_action: function() {
          console.log('dummy_action fired!');
      } 
    } 
});

then in your template:

{{#view MainAppView}}
   <p>dummy component</p>
   <button {{action dummy_action target="view"}}>Dummy action</button>

{{/view}}