How to call didInsertElement when a template is created since View is deprecated

1

I’m updating to Ember 1.13 and I want to fade in a background on the application template I use to call didInsertElement from the View.

App.ApplicationView = Ember.View.extend({
    didInsertElement: function() {
        $('#login-bg').fadeIn(600);
    }
});

This throws a deprecated because Views are going away. Does Ember create a component for the template? This does not work:

App.ApplicationComponent = Ember.Component.extend({
    didInsertElement: function() {
        $('#login-bg').fadeIn(600);
    }
});
2

One solution here would be to create a login-button component, and then:

App.LoginButtonComponent = Ember.Component.extend({
  didInsertElement: function() {
    $(this.element).fadeIn(600);
  }
});
3

Yeah that works. But what is the point of templates if you always have to put things in components to have access to lifecycle functions like didInsertView and willDestroyElement?

4

I’m not sure I understand your question, but templates are still totally essential. After all, you need to call {{login-button}} from somewhere.

Another way of looking at this is that it forces us to separate our concerns. After all, why should the ApplicationView be handling what’s really the concern of the LoginButton?

5

If you read my initial comment I’m talking about fading in a background not a button. Any app based platform needs to expose the lifecycle hooks of a view. In iOS there is viewDidLoad and for android there is onCreateView. Before Ember did away with views you had access to a template’s didInsertElement by subclassing it’s view (like App.ApplicationView = Ember.View.extend) but now you have to wrap the content of the template in a component to get that functionality.

6

Ah, totally misread that as btn, not bg. Either way, a login form could also be encapsulated well within a component. As for an application-wide component, that might be addressed when we get routable components. The specifics around that RFC are still fuzzy.