Confusion regarding Meteor _uihooks and what causes them

Question

I am confused by how it works _uihooks. Check out the code below:

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 would like random thoughts to fade in / out beautifully. But I never see anything in the console, so apparently it does not work. What exactly causes _uihooks? What am I doing wrong?

Answer 1

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

DOM node, node. #each #if .

DOM node . , .

_uihooks .

, meteorpad.