How to use autofocus with ember.js templates?

Question

I have a simple ember.js text field and I'm trying to add autofocus

{{view PersonApp.SearchField placeholder="search..." valueBinding="searchText"}}

PersonApp.SearchField = Ember.TextField.extend({

});

Can I add this in the javascript or is at as simple as a attribute in the template itself?

Answer 1

Update:

More recent versions of Ember now have support for this built in, so you no longer need to reopen TextField to add an attributeBinding. As of January 2014 (commit fdfe8495), you can simply use the HTML5 autofocus attribute in your template:

{{input value=search type="text" placeholder="Search" autofocus="autofocus"}}

Here is a simple jsfiddle demonstration.

---

Previous Solution:

You can also reopen TextField to allow you to bind the autofocus attribute:

Ember.TextField.reopen({
  attributeBindings: ['autofocus']
}); 

And then in your template:

{{input value=search type="text" placeholder="Search" autofocus="autofocus"}}