CODEWITHSUNDEEP
meteor
avalanche1
avalanche1

Reputation: 3592

Meteor - Run code on DOM render\re-render

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>

coffee

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

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

This code $('.ui.popup').popup() initializes popups on respective elements (semantic-ui).The problem is that it's ran only once on tpl render thus affecting only this node: <div class='ui popup' data-popup='I'm awake!'>day</div>.
When I choose night this code $('.ui.popup').popup() is not run leaving newly rendered node <div class='ui popup' data-popup='I'm asleep'>night</div> without popup.
Moreover, when I select day back again - it doesn't have popup this time! As it has invoked rendering of entirely new 'day' div, and not the old one.
What can be done here?

Upvotes: 1

Views: 232

Answers (2)

avalanche1
avalanche1

Reputation: 3592

Turns out I need to use Tracker.afterFlush and Tracker.autorun.
Complete solution.
Thanks to guys here.

Upvotes: 0

Tarang
Tarang

Reputation: 75975

Try making a component out of your day and night divs:

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

Its javascript:

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

Then you can do this:

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

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

Upvotes: 1

Related Questions