mardi 24 novembre 2015

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

I am thinking maybe I found a bug in EmberJS yield function.

What I want to achieve is, one component for forms, were I yield additional input tags, if they are needed. My example is more complicated, but I reproduced the "bug" in Ember Twiddle.

Basically, I have component:

form-component/template.hbs

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

And I want to yield input tag there

application/template.hbs

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

And as you can see, it doesn't work in the Twiddle. (It should update the text below the form to your input)

But if I move the input {{input value=name placeholder='Name'}} from application/template.hbs to component, it works:

UPDATED form-component/template.hbs

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

UPDATED application/template.hbs

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

Is it a bug, or am I missing something obvious here?




Aucun commentaire:

Enregistrer un commentaire