在Ember中，我可以將輸入標簽產生給組件而不破壞表單嗎？

Question

我在想也許我在EmberJS yield函數中發現了一個錯誤。

我想要實現的是，表單的一個組成部分是，如果需要，我可以產生其他輸入標簽。 我的示例更加復雜，但是我在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移至組件，則它的工作原理是：

更新了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>