how to trigger element features after render in ember-cli

Question

I want to add tooltips onto a button in a component that can appear based on a set of results back from the server. (i.e. action buttons for delete, edit etc.)

I have created a “search” component that is rendering into the application and when a search button is clicked the server may return a number of rows into that same search component template.

so for example:

My-app/pods/factual-data/template.hbs

Contains:

…
{{#if results}}
      <div class="row">
               <div class="col-sm-3"><b>Factual ID</b></div>
               <div class="col-sm-2"><b>Name</b></div>
               <div class="col-sm-2"><b>Town</b></div>
               <div class="col-sm-2"><b>Post Code</b></div>
               <div class="col-sm-2"><b>Actions</b></div>
           </div>
      {{/if}}
      {{#each result in results}}
           <div class="row">
               <div class="col-sm-3">{{result.factual_id}}</div>
               <div class="col-sm-2">{{result.name}}</div>
               <div class="col-sm-2">{{result.locality}}</div>
               <div class="col-sm-2">{{result.postcode}}</div>
               <div class="col-sm-2">
                   <button {{action "clearFromFactual" result.factual_id}} class="btn btn-danger btn-cons tip" type="button" data-toggle="tooltip" class="btn btn-white tip" type="button" data-original-title="Empty this Row<br> on Factual"  ><i class="fa fa-check"></i></button>
               </div>
           </div>
        {{/each}}
…

However I cannot get the tooltip code to function, due to an element insert detection/timing issue.. In the component

My-app/pods/factual-data/component.js Contains:

...
didInsertElement : function(){
        console.log("COMPONENT: didInsertElement");
        Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
        this.enableToolTips();
    },enableToolTips: function() {
        var $el = Ember.$('.tip');

        console.log("TOOLTIP:", $el);
        if($el.length > 0) {
            $el.tooltip({
                html:true,
                delay: { show: 250, hide: 750 }
            });
        }
    }
...

However it seems didInsertElement is only run when the component is first rendered, is there a different function that is called everytime something in the DOM is changed within a component?

I did try to use observes: i.e.

…
enableToolTips: function() {
        var $el = Ember.$('.tip');

        console.log("TOOLTIP:", $el);
        if($el.length > 0) {
            $el.tooltip({
                html:true,
                delay: { show: 250, hide: 750 }
            });
        }
    }.observes('results')
…

Which does trigger when the results variable is changed however it is still triggering before the content is actually rendered. I am assuming this because is I manually run in the console Ember.$('.tip').tooltip() (after the button is displayed) then the tooltips work ok.

Any pointers on this issue?

Answer 1

Try

enableToolTips: function() {
    Ember.run.scheduleOnce('afterRender', this, function() {
        var $el = Ember.$('.tip');

        console.log("TOOLTIP:", $el);
        if($el.length > 0) {
            $el.tooltip({
                html:true,
                delay: { show: 250, hide: 750 }
            });
        }
    });
}.observes('results')

Answer 2

Checking Ember.Component API there are two hooks that can do that

willClearRender : When component html is about to change.

willInsertElement : When old html is cleared and new one is going to be placed.

But you need to have a look on scheduleOnce.

Its worth noting that didInsertElement runs every time. But when it runs view was not updated. To solve that you need to run your code inside a Run Loop like this

didInsertElement : function(){
     var self = this;  
     Ember.run.scheduleOnce('afterRender', this, function(){

           //run tool tip here
           self.$().find(".tip").tooltip({

           });
     });

 }