Ember.js: Add 'style' parameter to Input Helper

[ghost]

The {{input}} helper does not support a style parameter. See this StackOverflow-thread. Please add it, it would be very useful.

[Serabe]

Hello, @mekeor:

I am closing this since it is not a bug but a feature request and that would need to go through the RFC process (as seen in CONTRIBUTING). You don't need to create a full RFC PR, you can just open an issue and see if there are interest on it.

Thank you!

[cibernox]

May I suggest you to use <input value={{foo}} oninput={{action (mut foo) value="target.value"}} style={{whatever}}> instead? It is just a bit more typing, but is 40x faster, consumes just a fraction of the memory and gives you total flexibility.

[Redsandro]

@cibernox Why does it use less memory? Isn't it essentially the same? Does a helper really have a considerable speed penalty?

Disclaimer: Googling for this brought me here.

[cibernox]

Not, they are quite different. {{input}} creates a component, with all it's lifecycle hooks, bound properties (those who you use and those the you might not use, all have to be initialized).
<input> generates literally an input tag with one bound property and one attached event. Nothing can be faster.

Check it yourself: https://benchmark-inputs.pagefrontapp.com/input-helper (open the console)

[Redsandro]

@cibernox interesting. Can something similar be achieved with a type=checkbox input?
More specifically: Can a boolean in the model be bound to writing checked=checked?

Broccoli doesn't like when #if is used inline like this:

<input type="checkbox" {{#if model.checked}}checked="checked"{{/if}} ...

[cibernox]

@Redsandro sure you can, and it's several times faster and takes less memory.

<input type="checkbox" checked={{isOpen}} onchange={{action (mut isOpen) (not isOpen)}}>

(not is a helper in ember-truth-helpers, but you could do it yourself)

[Redsandro]

@cibernox thank you for the example.

I believe checked={{isOpen}} resolves to checked=true, am I right?

While this works in some/many browsers, it is not official HTML5 spec. It requires checked="checked" or simply checked

[cibernox]

@Redsandro No, it resolves to just <input type="checkbox" checked>, because it's a property, not an attribute.

[Redsandro]

@cibernox Really? Does Ember have a list of which properties are toggles (e.g. expect booleans)? Or does a boolean convert any attribute to a property?

Forgive me. This is contrary to what I expected. I just realized I still don't fully understand how this databinding works. But this is getting too far outside of the scope of this question. If you happen to know a piece of documentation for Ember that explains this more in detail, I would greatly appreciate a link.

[cibernox]

I'm not that familiar with the internals, but iirc, ember treats most things as properties.
This what you want 90% of the time but is actually a small inconvenience with aria-* attributes because if you assign aria-pressed={{true}} it will generate <div aria-pressed> while the spec expects <div aria-pressed="true">.
You have to use aria-pressed="{{true}}" to get the desired behaviour. Not terrible, but you need to be wary of those silly mistakes.

I don't know any in deep explanation of how this work

[Redsandro]

@cibernox This clears up some things for me in respect to using booleans. Thanks.