Ember how do I know when a route template is finished loading and fire a callback?

Question

Currently working on a chat app with Ember, which is going fantastic as Ember is really nice to work with.

I currently have a chat window, obviously with many lines of people chatting.

I would like to scroll the chat window down on initial page load, here's an example:

<div class="chat-window">
    {{ chat-message username="John Doe" message="Blah" dispic="unknownUser.jpg" }}
</div>

So how might a bind an event to the entire template being loaded (in this case its index.hbs

I know you can do this with components through something like:

import Ember from 'ember';

export default Ember.Component.extend({
  didInsertElement() {
    this.$('.button-collapse').sideNav();
  }
});

Which works fine, so what would the equivalent be for doing it to a template.

As far as I know there is only the index.hbs and index.js route file.

Any information would be great thanks.

Answer 1

Send an action from the component to the route. Route will retrieve data from server and after data is retrieved route will update the data.

Route can handle loading state. ( From Guide )

The code will be something like that:

import Ember from 'ember';

export default Ember.Route.extend({
  chatData:[],
  model:function(){
      return this.get('chatData'); 
  },
  actions:{
      loading:function(){
         //do about loading...
      },
      chatDataRequested:function(){
          retrieveData().then((dataFromServer)=>{this.set('chatData',dataFromServer);});
      }
  }
});