我应该如何确保响应式 DOM 元素已加载？答案

【问题标题】：How should I make sure that a reactive DOM element has been loaded?我应该如何确保响应式 DOM 元素已加载？
【发布时间】：2015-09-13 14:17:19
【问题描述】：

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

我使用名为pageSession 的反应式字典在img 和canvas 之间切换，其中存储了一个名为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.我的问题

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

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

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

当displayMode 工具：从<img> 到<canvas>
当我用另一种方法填充画布时：例如从身份图标到照片
当我用相同的方法填充画布但数据不同时：例如我重新加载另一个身份图标或加载另一张照片。你将如何进行？

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

Blaze.render() 目标 div 中的模板并附加到画布模板 rendered 函数我的代码。很难控制哪些内容已加载或哪些内容未加载：我需要删除以前呈现的画布模板。
这里解释的解决方法：Meteor: Forcing rerendering whole template after collection update with Blaze 也不起作用（我没有努力尝试，它看起来不像一个干净的解决方法）。

【问题讨论】：

为什么你不能在template.MyCanvas.onRendered钩子里面运行你想在pageSession.set("displayMode", false)之后运行的东西？这样您就不必对范围界定做任何奇怪的事情。

标签： meteor meteor-blaze spacebars meteor-helper

【解决方案1】：

我终于设法解决了这个问题。基本上，我想要的是确保在执行我的 3 个填充任务（标识、照片、图像文件）之一之前渲染我的画布。

第一步很简单：我使用一个页面会话反应变量标志canvasLoaded，我在我的rendered 和destroyed 画布模板函数上进行了更新。

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

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

等等！ :-)

【讨论】：