在Ember中，我可以向组件提供输入标记，而不破坏我的表单吗

In Ember, can I yield input tag to component and not break my form?

本文关键字：我的 表单 输入 我可以 Ember 可以向 组件      更新时间：2023-09-26

我想我可能在EmberJS yield函数中发现了一个错误。

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

基本上，我有组件：

表单组件/模板.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移动到组件，它会起作用：

更新了表单组件/模板.hbs

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

更新的应用程序/模板.hbs

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

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

如果你想在表单组件中设置值，你可以有这样的东西：

//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>
相关文章：