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

我对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执行任何后期操作.
例如：

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

由于这在内部模板呈现之前执行,因此会破坏插件.

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

解决方法:

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

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

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

请注意,如果你必须一次调用插件并且以后不能添加新的子节点,你可以尝试一个丑陋的黑客只有在渲染完所有插件之后才能初始化插件.例如：

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