如何从 onRendered 回调中正确找到有条件渲染的元素？

Question

我想在模板渲染后找到一个条件渲染的元素。

模板：

<template name="one">
    <div class="normal">Normal</div>
    {{#if active}}
        <div class="conditional">Conditional</div>
    {{/if}}
</template>

代码：

Template.one.onRendered(function() {
    console.log(this.find(".normal"));
    console.log(this.find(".conditional");
}

以上将记录“.normal”但“.conditional”为空（条件为真，两个元素都出现在最终 DOM 中）。其原因有据可查：onRender 运行s 在 {{#if}}s 之前。但我想在整个模板及其所有 {{#if}} 呈现之后运行。

有没有办法在不将其设为单独模板的情况下找到 .conditional？

Answer 1

您找不到 DOM 元素，因为它不存在。

它不存在，因为 active 是 false。

如果你想active到return true:

Template.one.helpers({
  "active": function() { return true; }
})

Answer 2

我遇到了同样的问题。这是因为 {{#if}} 块中的内容呈现为动态生成的模板。

因此，到目前为止我发现的最佳解决方法是在 {{#if}} 块中呈现特定模板并向该特定模板添加回调：

这是你应该做的：

<template name="one">
    <div class="normal">Normal</div>
    {{#if active}}
        {{> activeTemplate}}
    {{/if}}
</template>

<template name="activeTemplate">
    <div class="conditional">Conditional</div>
</template>

Template.activeTemplate.onRendered(function() {
    console.log(this.find(".conditional");
}

如何从 onRendered 回调中正确找到有条件渲染的元素？

How to properly find a conditionally rendered element from onRendered callback?

meteor

meteor-blaze