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

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

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.

in ember 1.11, the new component helper allows you to do this:

{{#each widget in widgets}}
  {{component widget.componentclass}}
{{/each}}

as of today, jan 19th, 2015, 1.11 is not a stable release but this feature is in the canary version.

i know this isn't the most helpful answer, but especially since you're creating/modifying xml, i'd switch over to using the dom functions. simplexml's good for accessing simple documents, but pretty poor at changing them.

if simplexml is treating you kindly in all other places and you want to stick with it, you still have the option of jumping over to the dom functions temporarily to perform what you need to and then jump back again, using dom_import_simplexml() and simplexml_import_dom(). i'm not sure how efficient this is, but it might help you out.

the version of ember.js and ember-data is determined by your app's dependencies.

bower dependencies are listed in bower.json file.

npm dependencies are listed in your package.json file.

in the command line, you can just use cat and grep to show you relevant lines.

for example, in the app's directory (same place you use ember -v):

cat bower.json | grep ember-data

that will return any line that matches the text ember-data. it would output something like this:

"ember-data": "1.0.0-beta.16.1",

  1. bower install firebase
  2. add emberfire/dist/emberfire.min.js to brocfile.js inside the legacyfilestoappend array.
  3. add a line in your bower.json file matching the version that you're using so that on a new checkout everything will continue to work.

people visiting this in the future: this applies to ember-cli 0.0.21 only.


Tags: Ember.Js