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'为null（条件为true，两个元素都存在于最终的DOM中）。原因很明显：onRender在{{#if}}之前运行。但我希望在渲染整个模板之后运行，并且所有{{#if}}都是。

有没有办法找到.conditional而不将其作为单独的模板？

Answer 1

我面临同样的问题。这是因为{{#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");
}

Answer 2

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

它不存在，因为active是false。

如果您希望active返回true：

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

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

2 个答案: