Equivalent to $(document).ready for ember

1

I need to add some shims for autofocus since IE9 does not seem to support this. For a static app I could do:

$(document).ready(function(){
  $('input[autofocus]').focus();
})

but this won’t work for ember since there is not full page refresh. Would be great if there was a hook that would run on route change and also wait until the dom is fully ready.

2

Ember has a ready function on App instances

App = Ember.Application.create({
    ready: function() {
        // will be called when the app is ready
    }
})

There are several hooks that you can use on route change

App.IndexRoute = Ember.Route.extend(
    activate: function() {
        // executes when router enters route for the first time
    }
);

But thats probably not what you want. You might want didInsertElement which is available on views. It would be executed when the corresponding template is rendered.

Do you want to focus everytime that the form is rendered?

1 Like
3

The issue seems to be that we transition from one models form to another model of the same type. The didInsertElement only gets called the first time.

4

That sounds like its getting very specific to your setup. You have to fire an event after transitioning to another object and add your jQuery code there. Does that make sense?

5

didInsertElement will not fire every time, when only the route context has changed. Instead schedule your event in the afterRender queue, which will make sure that the event is fired every time the view is rerendered. Related reads :

  1. Life cycle hooks in ember-views,
  2. The PR in emberjs.

Or if you want to create a autofocused input, this will help you a lot