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

问题描述

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

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.

所以例如：

我的应用/ pods / factual-data / template.hbs

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

但是我无法获取工具提示代码功能，由于元素插入检测/定时问题..
在组件

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
包含：

My-app/pods/factual-data/component.jsContains:

...
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中的某些内容在组件中更改时都会调用不同的函数？

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?

我确实尝试使用观察：ie

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

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

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?

推荐答案

尝试

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

这篇关于如何在ember-cli中渲染后触发元素特征的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！