Confusion about Meteor _uihooks and what triggers

Question

I'm confused about how _uihooks works. Check out the below code:

home.html

<template name="homePage">
  <section id="home-page">
    <div class="container">
      <h1>Thought of the day:</h1>

      <div id="totd">
        <span>{{thought}}</span>
      </div>

    </div>
  </section>
</template>

home.coffee

timer = 0

Template.homePage.rendered = ->
  this.find('#totd')._uihooks =
    insertElement: (node, next) ->
      console.log 'Inserted'
    removeElement: (node) ->
      console.log 'Removed'

  Session.set 'randThought', Random.choice thoughts
  timer = Meteor.setInterval shuffleThoughts, 5000

Template.homePage.destroyed = ->
  Meteor.clearInterval timer

thoughts = [
  "My socks smell like sausages."
  "I sure wish I had a bag of crisps right about now."
  "I need more thoughts."
]

Template.homePage.helpers
  thought: -> Session.get 'randThought'

shuffleThoughts = ->
  Session.set 'randThought', Random.choice thoughts

I'd like the random thoughts to fade out/in nicely. But I never see anything show up in the console, so apparently it's not working. What exactly triggers _uihooks? What am I doing wrong?

Answer 1

You need to attach the call ._uihooks on the parent DOM node ( not a JQuery object) of the nodes you want the effects on. In your case this is $('div.container').get(0) in homePage.

You also need to insert or remove a DOM node not just reactively update text inside a node. This could be done with an #each or #if in your template.

You will also need to insert and remove the DOM node yourself manually within the hooks. Otherwise only inserts will be logged and nothing will actually show up on your page.

_uihooks are explained here with an example here.

I have made another example with your code working in meteorpad.