如何让助手等待要创建的 DOM 元素？ [流星]答案

【问题标题】：How to get helper to wait on DOM element to be created? [meteor]如何让助手等待要创建的 DOM 元素？ [流星]
【发布时间】：2017-06-03 17:20:04
【问题描述】：

我正在尝试在我的应用程序中呈现嵌入的推文。我有一个推特 ID (tweetId) 的 mongo 集合。我使用（文档）_id 作为 div 中的 id，以便 Twitter 可以针对推文的特定元素。

模板：

{{#each mongoCollectionOfTweetIds}}
  <div id={{_id}}> 
     {{embeddedTweet}} 
  </div>
{{/each}}

在我运行的“embeddedTweet”助手中：

targetElement = document.getElementById("#{this._id}")
twttr.widgets.createTweet("#{this.tweetId}", targetElement)

我知道 this._id 通过 console.log 测试是准确的。我还验证了寻找上面的 dom 元素最终是未定义的。

所以，数据上下文似乎是通过流星，但我调用 twttr 太快了（即在 dom 元素从 getelementbyid 存在之前）？

挑战在于 twttr 要求每次调用都有一个唯一的 dom ID。

希望这里有更好的模式。

【问题讨论】：

【解决方案1】：

您必须等到模板被渲染后才能处理 DOM 元素。

Template.Foo.onRendered(function() {
});

在那里，您可以运行查询以查找您的 DOM 子节点并调用 twitter API。

helper 可以在更新数据和渲染模板时多次运行，因此在 helpers 中所做的任何事情都应该是幂等的。理想情况下不要使用 API。

【讨论】：

我在 onRendered 和 onCreated 中添加了一个 console.log 来测试，但它们似乎只运行一次。我希望它们通过 {{#each}} 为集合中的每个项目运行，但似乎 dom 已更新，但模板未重新呈现。作为第二次尝试，我将 twttr 调用移至服务器上的一个方法，但似乎客户端是唯一理解该库的人，因为我通过中的脚本加载它
默认情况下，onRendered() 只会运行一次。如果在它运行时所有 DOM 元素都不存在，你可以通过在 autorun() 中放置一些反应性的东西来让它再次运行，比如 Template.currentData() 或 find() （即无论你的推文数据的来源是什么是）。