How can I access an Ember input as a jQuery element?

Question

I have a simple form in Ember which submits to a server and returns a response. On a failed response, I want to re-focus on the input field. Is there a way to access the field in my controller using the value binding?

Here's my jsbin as an example:

http://jsbin.com/umodir/1/edit

Answer 1

http://jsbin.com/efatut/2/edit

Your server should return something that sets a property on your controller that you can observe. I made it pretty simple and called it "error".

var App = Ember.Application.create();

App.ApplicationController = Ember.ObjectController.extend({
  error: false,
  submit: function() {
    alert('I want to set a focus on the email input field now...');
    this.set('error', true);
  }  
});

App.ApplicationView = Ember.View.Extend({
  focusEmail: function() {
    if (this.get('controller.error')) {
      this.$('input[type=text]').focus();
    }
  }.observes('controller.error')
});

If you wanted to get really fancy you could use an Ember.Component like {{eb-input focuson="error"}} that would automatically focus when the controller's "error" property changed.