在 Ember 中，我可以为组件生成输入标签而不破坏我的表单吗？

Question

我在想也许我在 EmberJS 的 yield 函数中发现了一个错误。

我想要实现的是，表单的一个组件，如果需要的话，我是否会产生额外的输入标签。我的例子比较复杂，但我在Ember Twiddle 中重现了“bug”。

基本上，我有组件：

form-component/template.hbs

<form {{action 'componentAction' on='submit'}}>
  {{yield}}
  <button type="submit">Submit</button>
</form>

我想在那里产生输入标签

应用程序/模板.hbs

{{#form-component
  action="controllerAction"}}
  {{input value=name placeholder='Name'}}
{{/form-component}}

如您所见，它在 Twiddle 中不起作用。 （它应该将表单下方的文本更新为您的输入）

但如果我将输入 {{input value=name placeholder='Name'}} 从 application/template.hbs 移动到组件，它可以工作：

更新的表单组件/template.hbs

<form {{action 'componentAction' on='submit'}}>
  {{yield}}
  {{input value=name placeholder='Name'}}
  <button type="submit">Submit</button>
</form>

更新的应用程序/template.hbs

{{#form-component
  action="controllerAction"}}
{{/form-component}}

这是一个错误，还是我在这里遗漏了一些明显的东西？

Answer 1

如果要在表单组件中设置值，可以这样：

//form-component/template.hbs
{{#form-component
  action="controllerAction" as |myForm|}}
  {{input value=myForm.name placeholder='Name'}}
{{/form-component}}


//application/template.hbs
<form {{action 'componentAction' on='submit'}}>
    {{yield this}}
  <button type="submit">Submit</button>
</form>