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()初始化各个元素（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时 - 这次没有弹出窗口！因为它已经调用了全新的“日”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。
感谢小伙伴here。

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

2 个答案: