我應該如何確保反應性DOM元素已被加載？

我有一個模板image其中我顯示圖像。圖像顯示在canvas和img標籤之間切換，具體取決於用戶是否剛剛創建了圖像或者它是否已在服務器上。我應該如何確保反應性DOM元素已被加載？

我img和canvas之間的toogle使用稱爲pageSession其中I存儲稱爲displayMode一個布爾變量的反應性的反應性字典。我有一個幫手currentDisplayMode用來返回displayMode的值。

所以助手看起來是這樣的：

Template.image.helpers({ 
    "currentDisplayMode" : function(){ 
     return pageSession.get ("displayMode"); 
    } 
});

和我的模板，我加載取決於currentDisplayMode這樣的canvas或img：

{{#if currentDisplayMode}} 
    <img src="{{source}}"width="215" height="215"/> 
{{else}} 
    <canvas id="canvas" width="215" height="215"></canvas> 
{{/if}}

1.問題。

如果我嘗試這樣：

pageSession.set("displayMode", false) 
var canvas = template.find('#canvas') 
//do stuff related to canvas

我找不到我的畫布，因爲UI還沒有更新。

2.我的髒修復

我使用Meteor.setTimeout()這樣來解決它：

pageSession.set("displayMode", false) 
    Meteor.setTimeout(function(){ 
     var canvas = template.find('#canvas') 
     //do stuff related to canvas 
     }, 100);

3.我的問題

此修復工作，但迄今爲止我我擔心100ms不足以更新用戶界面的情況。此外，我不覺得這是一個可靠的解決方案。

請注意，它不只是一個二進制開關（圖像或畫布）。畫布需要根據3種不同模式（identicon，photo，imageFile）重新渲染。每種模式也可以重新渲染。

概括起來講，我需要在幾種情況下正確填寫我的畫布（一旦我確定它之前已經呈現）：

時displayMode toogles：從<img>到<canvas>
當我用另一種方法填充我的畫布：從identicon到照片，例如
當我用相同的方法填充我的畫布時，但不同的數據：例如我重新加載另一個identicon或我加載另一張照片。你將如何繼續？

我試過其他兩種方法，既通過畫布移動到一個專門的模板：

Blaze.render()模板中的目標股利和附着在畫布模板rendered功能我的代碼。它很難控制什麼是或什麼是不加載的：我需要刪除以前渲染的畫布模板。
解決方法在這裏：Meteor: Forcing rerendering whole template after collection update with Blaze也沒有工作（我沒有努力，它看起來不像一個乾淨的解決方法）。

來源

2015-06-26 Billybobbonnet

爲什麼你不能在'template.MyCanvas.onRendered'鉤子裏'pageSession.set（「displayMode」，false）'後面運行你想要運行的東西？這樣你就不用做任何奇怪的事與範圍。 – Kriegslustig

我終於設法解決了這個問題。基本上，我想要的是確保在執行我的3個填充任務之一（identicon，photo，imageFile）之前渲染了畫布。

第一步是簡單的：我使用頁面Session反應變量標誌canvasLoaded，我更新了我的rendered和destroyed畫布模板函數。

第二步是我已經用來確保文件上傳（及其網址可用）的表單提交。這是我在這裏找到的waitfor函數：https://stackoverflow.com/a/14811679/3793161

所以我所做的是等待我的標誌canvasLoaded在waitfor函數中切換爲true。在waitfor的回調中，我只需調用一個loadCanvas函數，其中我根據當前的填充模式和參數（全部存儲在無功字典變量中）加載畫布。

等voilà！ :-)

來源

2015-06-28 12:24:35 Billybobbonnet

我應該如何確保反應性DOM元素已被加載？

回答

相關問題