Ember.js 模板内模式将变量传递给向下传递的操作（上下文组件）答案

【问题标题】：Ember.js In-template pattern to pass variable to a passed down action (contextual component)Ember.js 模板内模式将变量传递给向下传递的操作（上下文组件）
【发布时间】：2019-05-23 22:49:51
【问题描述】：

是否可以将变量传递给向下传递的操作并完全在模板中这样做？

例如。父组件模板

{{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}}

【问题讨论】：

标签： javascript ember.js handlebars.js

【解决方案1】：

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

您不喜欢的第二个示例没有意义。这段代码：

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

没有做任何事情，因为您没有在child-component 中使用click 操作。

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

【讨论】：

感谢您的旋转。包含了我想要做的事情。