How to detect rerender DOM in View?

How to catch the event of any reorganization DOM inside the template?

I’m doing a guide on bootstrap popover. And need to hide and shows popover if the item it shows hidden.

I create jsbin example

  popup: null,
  renderGuidePopover: function() {
    var $el = this.$().find('.' + this.get('controller.actionClass'));
    if ($el.length) {
      var popover = $el.eq(0).popover({
        title : 'Hello',
        content : 'I am popup.',                    
        container: 'body',                    
        trigger: 'manual'
      this.set('popover', popover);
  rerendered: function () {
    //How catch this when DOM changed?
    var $el = this.$().find('.' + this.get('controller.actionClass'));
    if (!Em.isEmpty(this.get('popover')) && $el.length) {
      this.set('popover', null);

App = Ember.Application.create();

App.IndexController = Ember.Controller.extend({
  actionClass: 'popup1',
  foo: false,
  actions: {
    toggleFoo: function () {
    toggleActionClass: function () {
      this.set('actionClass', 'popup2');

If you drop a breakpoint in the renderGuidePopover method you’ll see that it is called every time you click the toggleFoo button.

Hm… In my application when I change bool property with {{#if}} in template, didInsertElement not triggered. Maybe this is because created Virtual View? How detect render children Virtual View?

Sorry, I’m having trouble understanding your question. The documentation for the View class is here: Ember - 4.6 - Ember API Documentation

Try reviewing the events section and see if any of those meet your needs.

willClearRender runs before any view is rerendered