CODEWITHSUNDEEP
ember.js
Fields Cage
Fields Cage

Reputation: 191

How to call didInsertElement when a template is rendered since View is deprecated in Ember 1.13

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);
    }
});

Upvotes: 1

Views: 3840

Answers (1)

Tom Netzband
Tom Netzband

Reputation: 1110

There's no default application component working behind the scenes as of yet, but you could make one and wrap your application template in it like this:

// app/templates/application.hbs
{{#application-area}}
  {{outlet}}
{{/application-area}}


// app/templates/components/application-area.hbs
<div id="login-bg">
  {{yield}}
</div>


// app/components/application-area.js
import Ember from 'ember';

export default Ember.Component.extend({
  didInsertElement () {
    Ember.$('#login-bg').fadeIn(600);
  }
});

Upvotes: 5

Related Questions