ember-cli 渲染后如何触发元素特性

Question

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

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

例如：

My-app/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}}
…

但是，由于元素插入 detection/timing 问题，我无法使工具提示代码起作用。在组件

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

Answer 2

检查 Ember.Component API 有两个钩子可以做到这一点

willClearRender : 当组件 html 即将发生变化时。

willInsertElement : 当清除旧的 html 并放置新的时。

但是你需要看看scheduleOnce。

值得注意的是，每次 didInsertElement 运行s。但是当它运行s 视图没有更新时。要解决这个问题，你需要运行你的代码在 Run Loop 中，像这样

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

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

           });
     });

 }

ember-cli 渲染后如何触发元素特性

how to trigger element features after render in ember-cli

ember.js

ember-cli