javascript - Ember.js 模板内模式将变量传递给传递的操作(上下文组件)

Question

是否可以将变量传递到传递的操作中并完全在模板中执行此操作？

例如。父组件模板

{{child-component model=model itemClick=(action "doStuffWithItem")}}

子组件模板

{{#each model.items as |item|}}
   {{item-component click=(action itemClick item)}}
{{/each}}

..这不起作用，但它显示了所需行为的想法。

我当前要做的是在 item-component 中执行一个操作，以触发使用变量传递的操作。

例如。父组件.js

  actions: {
    doStuffWithItem(item) {
      ...do some things
    }
  }

父组件模板

{{child-component model=model itemClick=(action "doStuffWithItem")}}

子组件.js

  actions: {
    click(item) {
      this.itemClick(item);
    }
  }

子组件模板

{{#each model.items as |item|}}
   {{item-component itemClick=itemClick}}
{{/each}}

我想问的是，有没有办法跳过在子 component.js 中创建包装器操作？有没有 Ember 助手可以做到这一点？例如。

{{#each model.items as |item|}}
  {{item-component click=(pass-var-to-action itemClick item}}
{{/each}}

Answer 1

嗯，your first example works.所以是的，这是可能的。

你不喜欢的第二个例子没有意义。这段代码:

actions: {
  click(item) {
    this.itemClick(item);
  }
}

没有做任何事情，因为您没有在子组件中使用click操作。

完全不清楚您的 item-component 的用途。一旦您通过了click，接下来就是itemClick。请注意:永远不要调用属性click。这是与 click 事件处理程序方法的名称冲突。请参阅here在*事件处理程序方法*下。这是一个有点奇怪的概念，但可能是您的问题。