Ember re-render when not in DOM

Question

I have four components setup from the same model. Depending on the state of the item, it will be shown in one of the four components.

Components are: is-new, is-ready, is-started, is-completed.

On each of these components I have a timestamp, that I would like to update continuously. However Ember breaks with the following error whenever the DOM or state of the models update.

Something you did caused a view to re-render after it rendered but before it was inserted into the DOM.

This is an example of one of the components:

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'article',

  click: function() {
    this.attrs.action();
  },

  didInsertElement: function() {
    this.updateCreatedAt();
  },

  updateCreatedAt: function() {
    console.log(this.isDestroying, this.isDestroyed);
    if (this.isVisible && !this.isDestroying && !this.isDestroyed) {
      this.rerender();
    }
    Ember.run.later(this, 'updateCreatedAt', 60000);
  }
});

Does anyone have any clues on this matter?

Answer 1

When the didInsertElement hook is triggered the template did not necessarily render, you will need to schedule it using Ember.run.scheduleOnce:

didInsertElement() {
  Ember.run.scheduleOnce('afterRender', this, updateCreatedAt);
}