0

我有一个非常简单的组件，它有两个动作，开始和停止。单击按钮时会触发这些。第一个动作冒泡到路由并按预期工作，但是第二个动作在组件中触发，但从未到达路由。

我刚开始玩 Ember，但我认为组件可以执行多个操作？

控制台中没有错误，该按钮不执行任何操作，并且永远不会显示来自路由的控制台日志。

组件动作

actions: {

  start() {
    console.log('component start called');
    this.sendAction('start', this.get('item'));
  },

  stop() {
    console.log('component stop called');
    this.sendAction('stop', this.get('item'));
  }
}

路由操作

actions: {
    start (server) {
        console.log('route start called');
        server.set("settings.amazonTask", 'start');
        server.save();
    },

    stop (server) {
        console.log('route stop called');
        server.set('settings.amazonTask', 'stop');
        server.save();
    }
}

模板

<button type="button"
        class="btn btn-default btn-sm" {{action "start"}}>
    Turn on
</button>


<button type="button"
        class="btn btn-default btn-sm" {{action "stop"}}>
    Turn off
</button>
4

1 回答 1

1

您必须将操作交给您的组件：

{{my-component start=(action 'start') stop=(action 'stop')}}

然后你可以用 调用 then sendAction。

But I highly recommend to use the new syntax and directly access the actions on the attrs object. This is much clearer and makes clear whats happening:

this.attrs['start'](this.get('item'))

Actually the action helper just gets an action from the actions object and bounds it to the current context. The result of that can be given down to the component and then be called from there, in the context where you executed the action helper.

Note that calling the action helper on an already created action will not rebound the action but just pass it though.

于 2016-05-08T05:52:00.987 回答