javascript - 在 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 移动到组件，它就会起作用:

更新的表单组件/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>