Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 942
Meligy Avatar asked Aug 12 '13 14:08

Meligy


3 Answers

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">
like image 167
Johnny Oshika Avatar answered Nov 03 '22 01:11

Johnny Oshika


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

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

like image 41
Trek Glowacki Avatar answered Nov 03 '22 02:11

Trek Glowacki


First you need to add support to the required attribute:

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

Then in your view:

{{view Ember.TextField required="required"}}
like image 33
Mohamed Alaa Avatar answered Nov 03 '22 01:11

Mohamed Alaa