ember.js - 如何在 ember-cli 中渲染后触发元素功能

Question

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

我创建了一个正在呈现到应用程序中的“搜索”组件，当单击搜索按钮时，服务器可能会将多行返回到同一搜索组件模板中。

例如:

我的应用程序/pods/factual-data/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}}
…

但是，由于元素插入检测/计时问题，我无法使工具提示代码正常运行。在组件中

我的应用程序/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')