Custom layout for input

[MadalenaGoncalves]

Hey guys!

I am creating a custom input with another input element inside so I can customize the layout. The problem is that with every change, the value is updated with a jQuery event instead of the actual value.

Please check this twiddle.

Can you please help me figuring out what I'm doing wrong? Is there a proper way of doing this?

Thanks in advance

[czosel]

Hi @MadalenaGoncalves, thanks for your well-prepared issue report!

I prepared a twiddle that shows two ways to solve your problem:

• You can use the ember {{input}} helper like you did - but with a little tweak: {{input value=fi.value change=(action fi.update value="target.value")}}. This will take the value out of the event and pass it to fi.update. The API feels a bit clumsy because the helper is meant to be used for two-way-bindings (it'll try to update fi-value in place).

• I'd prefer to use one-way-input, which provides a much cleaner API for this: {{one-way-input fi.value update=fi.update}}. This component is part of the addon ember-one-way-controls, which is heavily used within this addon, too. Please check out their README and this blog post on DDAU, which should clarify the motivations behind all that a little more.

I hope this helps! 😃

[MadalenaGoncalves]

Good point using the one-way-input directly. Both solutions work like a charm. Thank you so much.

[czosel]

Great! You're welcome 😊