Question

我有一个模板image，我在其中显示图像。图像显示在canvas和img标记之间切换，具体取决于用户是刚创建图像还是已在服务器上。

我在img和canvas之间使用名为pageSession的反应词典进行toogle，其中我存储了一个名为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。我的问题

此修复程序到目前为止有效，但我担心100毫秒不足以更新UI的情况。而且，我觉得这不是一个可靠的解决方案。

请注意，它不仅仅是二进制切换（图像或画布）。画布需要根据3种不同的模式（identicon，photo，imageFile）重新渲染。每种模式也可以重新渲染。

总结一下，我需要在几种情况下正确填充我的画布（一旦我确定它已经渲染过）：

当displayMode转发时：从<img>到<canvas>
当我用另一种方法填充画布时：例如从identicon到照片
当我用相同的方法填充我的画布，但不同的数据：例如我重新加载另一个identicon或我加载另一张照片。你会怎么做？

我尝试了另外两种方法，将画布移动到专用模板中：

Blaze.render()目标div中的模板并附加到画布模板rendered函数我的代码。这使得控制什么或未加载的内容变得很困难：我需要删除以前渲染的画布模板。
此处解释的解决方法：Meteor: Forcing rerendering whole template after collection update with Blaze也没有用（我没有努力，看起来不像一个干净的解决方法）。

Answer 1

我终于设法解决了这个问题。基本上，我想要的是确保我的画布在执行我的3个填充任务之前被渲染（identicon，photo，imageFile）。

第一步很简单：我使用我在canvasLoaded和rendered画布模板函数上更新的会话反应变量标记destroyed。

第二步是我已经用来确保在表单提交上上传文件（及其URL可用）。这是我在此处找到的waitfor函数：https://stackoverflow.com/a/14811679/3793161

所以我要做的是等待我的标志canvasLoaded在waitfor函数中切换为true。在waitfor的回调中，我只调用loadCanvas函数，根据当前的填充模式和参数（所有存储在反应式字典变量中）加载画布。

Etvoilà！： - ）

我应该如何确保已加载反应式DOM元素？

1 个答案: