在 DOM 完成之前调用流星火焰渲染答案

【问题标题】：meteor blaze rendered being called before DOM completion在 DOM 完成之前调用流星火焰渲染
【发布时间】：2014-05-19 17:42:08
【问题描述】：

我有一个模板显示带有用户 ID 的二维码：

        <template name="pairDevice">
          {{#with currentUser}}
          <div id="qrcode"></div>
          <div class="key" id="qrcodeValue" style="display: none;">{{id}}</div>
          {{/with}}
        </template>

我尝试从渲染和帮助程序设置值，但它总是同样的问题$('#qrcode') 和 $('#qrcodeValue') return [] 因为这些字段还不存在。

Template.pairDevice.rendered = function(){
  if (!location.origin) {
     location.origin = location.protocol+"//"+location.host;
  }
 // $('#qrcode').qrcode({width  : 128, height :128 ,text : $('#qrcodeValue').html()});
};

Template.pairDevice.helpers({
  'id' : function(){
    var appUser =Meteor.user();
    var value = location.origin  + ";" + appUser._id + ";" + appUser.emails[0].address;
     $('#qrcode').qrcode({width  : 128, height :128 ,text : value});
    return value;
  }
});

我知道 Blaze 只渲染一次，但如何在 DOM 完成后让它渲染？

谢谢

【问题讨论】：

如果将{{#with currentUser}} 移出模板会发生什么情况？（所以将其从pairDevice 中删除，然后使用{{#with currentUser}}{{> pairDevice}}{{/with}} 调用pairDevice）
有效！知道为什么吗？
当您第一次刷新页面时，我相信 currentUser 在客户端使用其恢复令牌进行身份验证时短时间内未定义。所以当pairDevice第一次被渲染时，currentUser是未定义的，所以#qrcode和#qrcodeValue这两个div最初不会被渲染。通过将with 移出模板，在定义currentUser 之前，pairDevice 模板根本不会呈现。
既然这行得通，我会将其作为答案发布，以便您接受。

标签： meteor meteor-blaze

【解决方案1】：

将{{#with currentUser}} 移出模板。

<template name="pairDevice">
  <div id="qrcode"></div>
  <div class="key" id="qrcodeValue" style="display: none;">{{id}}</div>
</template>

<!-- call it like this -->
{{#with currentUser}}
  {{> pairDevice}}
{{/with}}

当您第一次刷新页面时，我相信 currentUser 在客户端使用其恢复令牌进行身份验证时短时间内未定义。所以当pairDevice第一次被渲染时，currentUser是未定义的，所以#qrcode和#qrcodeValue这两个div在调用rendered回调时不存在。通过将 with 移到模板之外，pairDevice 模板在定义 currentUser 之前根本不会呈现。

【讨论】：