Adding attributes to input element in Handlebars (used with Ember.JS 1.0)

Question

Let's say I have something like:

{{input value=someModel }}

And then I want to add the simple required HTML 5 attribute to the input.

How would I do that?

Note that I tried the following variations without success:

{{input value=someModel required }} <!-- doesn't parse -->

{{input value=someModel required='required' }} <!-- doesn't render the attribute -->

{{view Ember.TextField valueBinding=someModel 
    required='required' }} <!-- doesn't render the attribute -->

<input required {{bindAttr value=someModel}}
     /> <!-- doesn't update the model, as expected -->

Update: This question was for Ember 1.0.

Johnny Oshika · Accepted Answer · 2014-06-03 06:51:17Z

8

I'm using Ember version 1.5.1 and required="required" seems to work fine now. This markup:

{{input class="form-control" value=firstName autofocus="autofocus" required="required"}}

...renders this:

<input id="ember392" class="ember-view ember-text-field form-control" autofocus="autofocus" required="required" type="text">

answered Jun 3, 2014 at 6:51

Johnny Oshika

58k41 gold badges197 silver badges286 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Trek Glowacki · Accepted Answer · 2013-08-12 14:39:18Z

5

To globally add support for additional attributes you can reopen Ember.TextField

http://emberjs.com/api/classes/Ember.TextField.html

answered Aug 12, 2013 at 14:39

Trek Glowacki

3,6211 gold badge19 silver badges16 bronze badges

3 Comments

Meligy Over a year ago

This is horrible! (which is not your fault, thanks for pointing at it) - Any idea why it's like that? and whether there is a way to make it open for whatever I add?

Trek Glowacki Over a year ago

Not all browsers support required, so the framework ships with a minimal set, letting developers add additional attributes if they know they will target only browsers that support it.

Meligy Over a year ago

This might be a topic for Discourse, but really, I just think there is no point/benefit in limiting what the user can do with their markup (as long as it's not code, e.g. not Handlebars expressions). I'm guessing this is a side effect of some design limitation in the library, if it's meant to be this way as a feature, that'd be nothing but adding friction IMHO.

Mohamed Alaa · Accepted Answer · 2013-08-12 14:54:21Z

5

First you need to add support to the required attribute:

Ember.TextSupport.reopen({  
    attributeBindings: ["required"]  
})

Then in your view:

{{view Ember.TextField required="required"}}

answered Aug 12, 2013 at 14:54

Mohamed Alaa

1041 bronze badge

Collectives™ on Stack Overflow

Adding attributes to input element in Handlebars (used with Ember.JS 1.0)

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related