我有一个image用于显示图像的模板。图像显示在canvas和img标记之间切换，具体取决于用户是刚刚创建图像还是已经在服务器上。
我在使用反应式字典之间进行切换，img并canvas使用该反应式字典pageSession在其中存储名为的布尔反应式变量displayMode。我有一个currentDisplayMode用来返回displayMode价值的助手。
所以助手看起来像这样：
Template.image.helpers({
"currentDisplayMode" : function(){
return pageSession.get ("displayMode");
}
});
在我的模板中，我像这样加载canvas或img依赖项currentDisplayMode：
{{#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不足以更新UI的情况。而且，我觉得这不是一个可靠的解决方案。
请注意，它不仅是二进制切换（图像或画布）。需要根据3种不同的模式（identicon，photo，imageFile）重新渲染画布。每种模式也可以重新渲染。
综上所述，我需要在几种情况下正确填充画布（一旦确定画布已经渲染过）：
displayMode切换：从<img>到<canvas>我尝试了另外两种方法，都将画布移动到专用模板中：
Blaze.render()目标div中的模板，并附加到rendered我的代码的canvas模板函数。这使得很难控制加载了什么或加载了什么：我需要删除以前渲染的画布模板。我终于设法解决了这个问题。基本上，我要确保在执行我的3个填充任务（identicon，photo，imageFile）之一之前，已渲染画布。
第一步很简单：我使用页面会话反应变量标志canvasLoaded，该标志在我rendered和destroyedcanvas模板函数上更新。
第二步是我已经用来确保在表单提交时上传文件（及其URL可用）的步骤。这是waitfor我在这里找到的功能：https : //stackoverflow.com/a/14811679/3793161
因此，我要做的是等待函数canvasLoaded中的标志切换为true waitfor。在回调中，waitfor我只需要调用一个loadCanvas函数，即可根据当前的填充模式和参数（均存储在反应式字典变量中）加载画布。
然后你去！:-)
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句