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

Question

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

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

基本上，我有组件：

形式组分/ template.hbs

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

我想在那里产生输入标签

应用/ template.hbs

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

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

但是如果我将输入{{input value=name placeholder='Name'}}从application/template.hbs移动到组件，它就会起作用：

UPDATED form-component / template.hbs

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

更新的application / 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>