Meteor -在DOM render\render上运行代码

Question

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()在各个元素(语义-ui)上初始化弹出窗口，.The问题是它只在tpl render上运行一次，因此只影响这个节点：<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 back时-这次没有弹出窗口！因为它调用了全新的'day‘div的渲染，而不是旧的。

这里可以做些什么？

Answer 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}}

Answer 2

原来我需要使用Tracker.afterFlush和Tracker.autorun。

完成solution。

感谢guys here。