How to detect rerender DOM in View?

1

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

Ember.View.reopen({
  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'
      }).popover('show');
      
      this.set('popover', popover);
    }
    
    
  }.on('didInsertElement'),
  
  rerendered: function () {
    //How catch this when DOM changed?
    
    var $el = this.$().find('.' + this.get('controller.actionClass'));
    
    if (!Em.isEmpty(this.get('popover')) && $el.length) {
      $el.popover('destroy');
      this.set('popover', null);
    }
    
    this.renderGuidePopover();
  }
});

App = Ember.Application.create();

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

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

3

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?

4

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.

5

willClearRender runs before any view is rerendered