EmberJS：从命名块中的组件调用操作

Question

我正在使用我非常喜欢的命名块，但我无法从其中调用操作。这是我的代码示例，如果不在命名块中，该操作将完美运行

控制器

things = {
  run: false,
  walk: false,
  jog: false,
}

@action
doSomething(thing) {
  this.things[thing] = true;
}

模板

<MyComponent>
<:title>Some cool title...</:title>
<:button><MyButton {{on 'click' (fn this.doSomething 'run')}}/></:button>
</MyComponent>

我的组件模板

<div>
  {{yield to="title"}}
  {{yield to="button"}}
</div>

MyButton 模板

<button type="button>
  Do a thing
</div>

Answer 1

所以为了解决这个问题，我不得不像这样修改模板：

<MyComponent>
<:title>Some cool title...</:title>
<:button><MyButton @clickAction={{fn this.doSomething 'run'}}/></:button>
</MyComponent>

<button type="button {{on 'click' @clickAction}}>
  Do a thing
</div>

Answer 2

鉴于此组件调用

<MyButton {{on 'click' (fn this.doSomething 'run')}}/>

MyButton 组件必须 ...attributes 以指定放置属性、修饰符等的位置——“元素上的内容”：

<button type="button ...attributes>
  Do a thing
</button>

EmberJS: Call action from component in named block