如何在ember-cli中渲染后触发元素特征

Question

我想将工具提示添加到组件中的按钮上,该按钮可以根据服务器返回的一组结果显示.(即用于删除,编辑等的操作按钮)

我创建了一个"搜索"组件,该组件呈现在应用程序中,当单击搜索按钮时,服务器可能会将多个行返回到同一个搜索组件模板中.

例如:

我的应用程序内/荚/实际数据/ template.hbs

包含:

…
{{#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}}
…

但是由于元素插入检测/计时问题,我无法获得工具提示代码的功能.在组件中

我的app/pods/factual-data/component.js包含:

...
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 }
            });
        }
    }
...

然而,似乎didInsertElement仅在首次呈现组件时运行,是否每次在组件中更改DOM中的某些内容时都会调用不同的函数？

我确实尝试过使用观察:即

…
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')
…

当结果变量被更改时会触发,但在实际呈现内容之前它仍然会触发.我假设这是因为我在控制台Ember中手动运行.$('.tip').tooltip()(显示按钮后)然后工具提示工作正常.

有关此问题的任何指示？

Answer 1

尝试

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')