对 Meteor _uihooks 的困惑以及触发它们的原因

Question

我对@9​​87654321@ 的工作方式感到困惑。查看以下代码：

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

我希望随机的想法能够很好地淡出/淡入。但我从来没有看到控制台中出现任何东西，所以显然它不起作用。究竟是什么触发了_uihooks？我做错了什么？

Answer 1

您需要在您想要效果的节点的父 DOM 节点（不是JQuery 对象）上附加调用._uihooks。在您的情况下，这是主页中的$('div.container').get(0)。

您还需要插入或删除 DOM 节点，而不仅仅是被动地更新节点内的文本。这可以通过模板中的#each 或#if 来完成。

您还需要在挂钩中手动插入和删除 DOM 节点。否则只会记录插入，而您的页面上实际上不会显示任何内容。

_uihooks 以here 为例进行解释here。

我已经发了another example with your code working in meteorpad。