javascript - 如何在嵌套组件中处理 EmberJS 中的操作

Question

所以我在 EmberJS 中嵌套了组件，并且无法正确处理它们的操作。

我有路线Create及其模板组件pixel-grid:

<div class="row">
    <div class="col-sm-7">
        {{pixel-grid}}
    </div>
    <div class="col-sm-5">

    </div>
</div>

在 pixel-grid 模板中，我有名为 pixel-cell 的组件:

<table class="mx-auto">
    {{#each (range 0 panelWidth) as |row|}}
    <tr class="table-row">
        {{#each (range 0 panelHeight) as |cell|}}
        <th class="table-cell">
            {{pixel-cell onClick=(action 'changeColor')}}
        </th>
        {{/each}}
    </tr>
    {{/each}}
</table>

组件pixel-cell有一个空模板，因为我现在不需要它。在 pixel-cell 组件 js 文件中，我有:

import Component from '@ember/component';
export default Component.extend({
    classNames: ['cell', 'clickable'],
    tagName: 'div',

    init() {
        this._super(...arguments);
    },
});

这段代码显然无法编译，因为我没有处理这个操作。但是..

我尝试在 pixel-cell 中设置操作，但 Ember 告诉我 pixel-grid 应该具有该操作。所以我确实将这个 changeColor 操作放在 pixel-grid 中 -> 这不起作用。

所以我尝试通过 pixel-cell js 中的类似方法来处理这个问题:

click() {
    this.sendAction('changeColor');
},

-> 这不起作用。

我不知道它应该如何工作；/我尝试阅读指南，但仍然无法做到这一点。请帮忙。

Answer 1

https://ember-twiddle.com/e04e318489bcc8e9e921e849c9fb9e9e?openFiles=templates.components.pixel-cell.hbs%2Ctemplates.components.pixel-grid.hbs

我创建了一个旋转来向您展示从父组件传递到子组件的示例操作。您可以引用上面的网址来更容易理解。

我使用了一个名为“关闭操作”的概念来代替 sendAction，这是 Ember future 的规范。