模板呈现顺序：父触发器在子模板之前答案

【问题标题】：Template rendered order: parent triggers before child template(s)模板呈现顺序：父触发器在子模板之前
【发布时间】：2014-08-23 21:13:24
【问题描述】：

我对 Meteor 还是很陌生，我在尝试理解模板上的“渲染”事件时遇到了麻烦。

假设我有这两个模板：

<template name="parent">    
    <div id="list">
        {{#each childs}}
            {{> child}}
        {{/each}}
    </div>
</template>

<template name="child">
    <div class="item">
        <!-- content -->
    </div>
</template>

还有这两个事件：

Template.parent.rendered = function () {
    console.log('parent');
};

Template.child.rendered = function () {
    console.log('child');
};

我总是从控制台得到这个：

> 家长 > 孩子 > 孩子 > 孩子

所以基本上父模板在内部模板完成渲染之前触发“渲染”。因此，我无法像 jquery 插件那样对 DOM 执行任何发布操作。例如：

Template.parent.rendered = function () {
    $('#list').myplugin();
};

由于这是在渲染内部模板之前执行的，因此会破坏插件。

当模板（包括它的内部模板）完全渲染后，我现在可以安全地使用解决方法或流星事件吗？

【问题讨论】：

标签： javascript jquery meteor meteor-blaze

【解决方案1】：

我对此类问题的一般建议是，您应该在渲染每个子节点后寻找激活插件的方法，而不是在渲染父节点后 - 即使这意味着对插件进行额外调用。如果你能做到这一点，那么它也解决了稍后添加更多孩子时会发生什么的相关问题（当然这可能不适用于你的情况）。

如果不了解有关插件功能的更多详细信息，很难给出准确的答案，但我可以从我的一个应用程序中举一个例子：

我必须确保所有孩子的身高都与最高的孩子一样高。我最初的反应是，我必须以某种方式等待所有孩子完成渲染，然后再调整他们的高度。更简单的解决方案是每次渲染它们时都调整它们的大小。当然这是 O(N^2) 比较，但对于一个小列表来说仍然很快，即使添加了新的孩子也可以工作。

请注意，如果您绝对必须调用一次插件并且以后不能添加新的子项，您可以尝试一个丑陋的 hack，仅在所有插件都被渲染后才初始化插件。例如：

Template.child.rendered = function () {
  if ($('.child').length === Children.find().count()) {
    $('#list').myplugin();
  }
};

【讨论】：