如何觸發元素特徵呈現燼-CLI

我想在組件可以出現基於一組結果從服務器返回的提示添加到一個按鈕後。（即刪除，編輯等操作按鈕）如何觸發元素特徵呈現燼-CLI

我創建了一個「搜索」組件，呈現到應用程序中，當單擊搜索按鈕時，服務器可能會返回一些行到相同的搜索組件模板。

因此，例如：

我的應用程序內/莢/實際數據/ 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}} 
…

但是我不能讓工具提示代碼的功能，由於一個元素插入檢測/定時問題。在組件

My-app/pods/factsual-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') 
…

當結果變量改變之前，但內容實際呈現它仍然是引發這確實觸發。我假定這是因爲我手動在控制檯灰燼運行。$（「尖」）。提示（顯示該按鈕後），（），則提示工作正常。

在這個問題上的任何指針？

來源

2015-02-09 ShopApps.co.uk

嘗試

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

來源

2015-02-09 17:01:59

這個選項對我來說非常合適 - 謝謝。 – 2015-02-10 10:55:48

這插入在哪裏？在一個控制器或組件？ – 2016-02-29 23:27:49

檢查Ember.Component API有兩個掛鉤，可以做到這

willClearRender：當組件的HTML即將改變。

willInsertElement：當舊的html被清除並且新的將被放置。

但是你需要有scheduleOnce看看。

值得注意的是didInsertElement每次都運行。但是當它運行時視圖沒有更新。爲了解決你需要在Run Loop這樣的內部運行你的代碼

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

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

      }); 
    }); 

}

來源

2015-02-09 19:13:58 Sushant

嗨sushant。感謝您提供的信息，您提到didInsertElement每次運行，根據我的經驗，對於我的應用程序使用情況並非如此。我有一個控制檯。在該函數開始時的log（）調用，並且它只輸出到日誌一次。如果組件中的代碼/模板活動添加/刪除了UI元素，則didInsertElement不會重新運行。 @Oren的回答對我很有幫助，但我還會檢查你提到的willclear和willinsert方法，看看它們是如何工作的 - 非常感謝。 – 2015-02-10 10:55:20

如何觸發元素特徵呈現燼-CLI

回答

相關問題