2

I have one item-row.js component for each line in the CRUD and a button that triggers that "addNewItem" because I need to do some extra processing.

Well, the action never bubbles up to the route, so I believe I'm doing something wrong. Ember guides will tell me to do exactly what I'm doing, so I'm completely lost here. Am I missing something?

Code:

My template is like this:

// my-template.hbs
{{#each model as |item|}}
    {{#item-row
         id = item.id
         text = item.text
    }}
        {{item.title}}
    {{/item-row}}
{{/each}}

In that component's template:

// item-row.hbs
// a couple of HTML here
<button {{action "addNewItem"}}> </button>

And I have a component for that, of course

// item-row.js
export default Ember.Component.extend({

actions: {
        addNewItem: function(){
          this.sendAction('addNewItem');
          // already tried this.sendAction() without the parameter..
          return true;
    }
   }

});

And finally, my route:

// item.js
export default Ember.Route.extend({

    actions: {

        addNewItem: function(){
          alert('reached the route!!!!!');
          // this is never printed =/
        }

    }

});

I appreciate any help :)

Breno Inojosa
  • 602
  • 1
  • 10
  • 20

1 Answers1

5

The sendAction method in the component is going to look for an attribute on the component with the same name as you pass that method, in this case 'addNewItem'. So for your example to work, you'd need to pass addNewItem = 'addNewItem' to your item-row component, so the component knows what action to trigger on the route.

You can take a look at this JSBin for an example of what I'm talking about. It's using globals instead of ES6 modules, but hopefully should be simple enough to follow :)

This section of the Ember guides may also be helpful reading.

dfreeman
  • 2,834
  • 2
  • 20
  • 24