Question

我对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');
};

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

> parent
> child
> child
> child

所以基本上父模板在内部模板完成渲染之前触发“渲染”。因为我无法像jquery插件那样对DOM执行任何后期操作。 e.g：

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

由于在内部模板呈现之前执行此操作会破坏插件。

当完全呈现模板时，是否存在可以安全使用的变通方法或流星事件，包括它的内部模板？

Answer 1

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

如果不了解插件的详细信息，很难给出准确的答案，但我可以从我的一个应用程序中给出一个示例：

我必须确保所有的孩子都和最高的孩子一样高。我最初的反应是，我不得不等待所有的孩子完成渲染，然后调整他们的高度一次。更简单的解决方案是每次渲染任何一个时调整所有这些。当然这是O（N ^ 2）比较，但对于一个小清单仍然很快，即使添加了新的孩子也能正常工作。

请注意，如果你绝对不得不一次调用插件，以后不能添加新的子节点，你可以尝试一个丑陋的黑客只有在渲染完所有插件后才能初始化插件。例如：

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

模板呈现顺序：子模板之前的父触发器

1 个答案: