Meteor - 在 DOM 渲染\重新渲染上运行代码答案

【问题标题】：Meteor - Run code on DOM render\re-renderMeteor - 在 DOM 渲染\重新渲染上运行代码
【发布时间】：2015-08-09 10:35:24
【问题描述】：

HTML

<template name='sometpl'>
  <select>
  <option>day</option>
  <option>night</option>
  </select>
  {{#if day}}
    <div class='ui popup' data-popup='I'm awake!'>day</div>
  {{#if night}}
    <div class='ui popup' data-popup='I'm asleep'>night</div>
</template>

咖啡

Template.sometpl.helpers
  day:-> if $('select').val()=='day' then true
  night:-> if $('select').val()=='night' then true

Template.sometpl.onRendered ->
      $('.ui.popup').popup()

此代码 $('.ui.popup').popup() 初始化各个元素上的弹出窗口 (semantic-ui)。问题是它仅在 tpl 渲染上运行一次，因此仅影响此节点：<div class='ui popup' data-popup='I'm awake!'>day</div>。
当我选择night 时，此代码$('.ui.popup').popup() 不会运行，使新呈现的节点<div class='ui popup' data-popup='I'm asleep'>night</div> 没有弹出窗口。
此外，当我再次选择day 时 - 这次没有弹出窗口！因为它调用了全新的“day”div 的渲染，而不是旧的。
在这里可以做什么？

【问题讨论】：

标签： meteor

【解决方案1】：

尝试用你的昼夜 div 制作一个组件：

<template name="popup">
   <div class='ui popup' data-popup='{{text}}'>{{day}}</div>
</template>

它的javascript：

Template.popup.onRendered(function() {
    this.$('.ui.popup').popup()
});

那么你可以这样做：

{{#if day}}
    {{>popup text="I'm awake" day="day"}}
{{/if}}

{{#if night}}
    {{>popup text="I'm asleep" day="night"}}
{{/if}}

【讨论】：

谢谢。但这可以在不包含另一个模板的情况下完成吗？也许我过于简化了我的例子，但我确实有数百个这样的selects，正如你想象的那样，为它们维护数百个相应的 tpl 会很痛苦。
假设弹出窗口都遵循类似的格式，您只需要一个额外的模板，如上所示。只需将 text 和 day 更改为 popupText 和 text
@avalanche1 另一种方法是在您的onRendered 块中使用this.autorun(function() { $(".popup").popup() });。您还必须添加一些反应性的东西。使用您的助手，您可以直接查询选择字段，但如果您使用响应式（无论如何您应该）并在 autorun 块中查询此响应式变量，它应该在您更改选择字段时更新。
@Akshat 在这里他们给了我一个使用ReactiveVar 的建议，我已经用它做了一个示例垫，但它似乎不起作用。 forums.meteor.com/t/run-code-on-dom-render-re-render/4901/2你能看一下，也许用this.autorun分叉？

【解决方案2】：

原来我需要使用Tracker.afterFlush 和Tracker.autorun。
完成solution.
感谢各位here。

【讨论】：