在Ember 2.2中将操作从子组件发送到父组件

Question

Hi I'm trying to send an action from a sub component back up to the parent component so it can access this.store and perform a DB action. The basic layout is this:

app/templates/item/index.hbs -> does a loop of items using component

            {{#each model as |item|}}
                {{item-listing item=item}}
            {{/each}}

app/templates/components/item-listing.hbs

<li><a {{action 'copyItem' item}}>Copy</a></li>

In app/components/item-listing.js I have to define an action or I get an action not defined error. From here this.store is undefined, so I'm trying to bubble the action up.

actions: {
    copyItem: function(item) {
        this.sendAction('copyItem', item);
    },

From here I'm lost. I've tried putting actions on all of the following:

/app/routes/item/index.js /app/routes/item.js

But it never seems to get past the sendAction call. What am I doing wrong?

Answer 1

You have to:

1. Define that action ( copyItem ) in your controller (ItemIndexController).
2. Pass that action in template loop:

1st way:

{{#each model as |item|}}
    {{item-listing item=item copyItem='copyItem'}}
{{/each}}

2nd way:

{{#each model as |item|}}
    {{item-listing item=item copyItem=(action 'copyItem')}}
{{/each}}