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

但由于元素插入检测/计时问题，我无法使工具提示代码起作用。在组件中

我的应用内/荚/事实数据/ 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被清除并且将要放置新的html时。

但您需要查看scheduleOnce。

值得注意的是 didInsertElement 每次都会运行。但是当它运行时，视图没有更新。要解决这个问题，您需要在Run Loop这样的

中运行代码

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

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

           });
     });

 }

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

2 个答案: