Meteor js - 如何 Hook 递归模板的 'rendered' 事件？

Question

我遇到了一种情况，我基于 Mongodb 树结构以递归方式呈现 Handlebars，如下所示:

<template name='menu'>
    <ul class='menu'>
     {{#each topLevelChildren}}
        {{>menu-item}}
     {{/each}}
    </ul>
</template>

<template name='menu-item'>
  <li>{{name}}
    {{#if listChildren.count}}
    <ul>
        {{#each listChildren}}
           {{>menu-item}}
        {{/each}}
    </ul>
    {{/if}}
  </li>
</template>

mongodb 文档如下所示:

{ _id : ObjectId("525eb7245359090f41b65106"),
  name : 'Foo',
  children : [  ObjectId("525eb60c5359090f41b65104"),   ObjectId("525eb6ca5359090f41b65105") ]
}

并且 listChildren 只返回一个包含父元素 children 数组中每个元素的完整文档的游标。

我想在渲染树上做一些 jquery 化妆，但我似乎无法连接到整个树的“渲染”事件，比如

Template.menu-completed.rendered = function(){
   // console.log('done!');
}

试试这个

Template.menu.rendered = function(){
    console.log($('menu li'));
}

这不仅不会返回正确的结果(用逗号填充的括号)，还会卡住网络检查器(但不是应用程序......)。
任何帮助将非常感激 !

Answer 1

这是一个有趣的问题:)

在当前版本的 Meteor (0.7.x) 中 rendered首次渲染模板时调用一次回调，然后再次渲染模板内的任何部分。 (当 Meteor 0.8 - shark 分支或“Meteor UI” - 登陆时，这种行为会改变。)

我从来没有尝试过递归地做事，但是很难判断你得到的哪个回调实际上是针对父级的。您可能想要尝试的一件事是在名为 menu-parent 的模板中启动递归渲染。或者其他的东西。那样的话，当rendered第一次调用回调(只要你的数据被加载)，你就知道整个树都被渲染了。

但是，我怀疑可能有更好的方法来做到这一点。通常，您不应该使用 jQuery 来修改 DOM 元素上的类和属性，因为您会混淆 Meteor 正在做什么和 jQuery 正在做什么。您能否详细说明您要通过以下方式实现的目标，我会更新我的答案？

I need to find a specific anchor tag within the fully rendered template and add a class to it... and then add a class to each of its parents