Ember.js In-template 将变量传递给向下传递的操作的模式（上下文组件）

Question

是否可以将变量传递给传递下来的动作并完全这样做in-template？

例如。 Parent 组件模板

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

Child 组件模板

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

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

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

例如。 ParentComponent.js

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

Parent 组件模板

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

Child Component.js

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

Child 组件模板

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

我想问的是，有没有办法跳过在 child 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);
  }
}

没有做任何事情，因为您没有在 child-component.

中使用 click 操作

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

Ember.js In-template 将变量传递给向下传递的操作的模式（上下文组件）

Ember.js In-template pattern to pass variable to a passed down action (contextual component)

javascript

handlebars.js

ember.js