Question

当我尝试在选择器位于子模板中的模板上使用this.findAll时，findAll不返回任何内容。

这是HTML：

<template name="products">
    {{#each productList}}
        {{> product }}
    {{/each}}
</template>
<template name="product">
    <div class="box">{{name}}</div>
</template>

这是JS：

Template.products.helpers({
    productList: function() {
        var all = Products.find({}).fetch();
        return all;
    }
});
Template.products.rendered = function(){
    var boxes = this.findAll('.box');
    console.log(boxes.length);
}

box.length的输出为0.任何想法如何获得＆＃34;框＆＃34;元素？

Answer 1

根据findAll的文档：

只有模板及其子模板中的元素才能匹配选择器的各个部分。

所以它应该适用于子模板。我尝试使用固定数量的产品并且它有效，这意味着您只是看到调用rendered和正在获取的产品之间的延迟。例如，如果你这样做：

Template.products.events({
  'click .box': function (e, t) {
    var boxes = t.findAll('.box');
    console.log(boxes.length);
  }
});

然后，如果您单击其中一个框，您应该会看到记录到控制台的正确数字。简而言之，我认为测试可能无效。如果您使用的是铁路由器，您可以尝试为产品添加waitOn - 这可以确保它们在呈现的呼叫之前到达。

Answer 2

这是我在加载所有产品后运行脚本所做的工作。

我已在所有产品中添加了last_product属性。

Template.products.helpers({
    productList: function() {
        var all = Products.find({}).fetch();
        var total = all.length;
        var ctr = 0;
        all.forEach(function(doc){
            doc.last_product = false;

            ctr++;
            if(ctr == total)
            {
                doc.last_product = true;
            }
            return doc;
        });
        return all;
    }
});

然后我使用＆＃34; Template.product＆＃34;而不是＆＃34; Template.products＆＃34;检测最后一个产品是否已呈现。渲染最后一个产品时，运行脚本。

Template.product.rendered = function(){
    if(this.data.last_product){
        var boxes = $('.pbox');
        console.log(boxes.length);
    }
}

boxes.length现在有正确的长度。

感谢大卫的想法！

Answer 3

这是正确的答案。我已将此添加到我的铁路由器路线中：

action : function () {
    if (this.ready()) {
        this.render();
    }
}

在我尝试解决其他问题时，https://stackoverflow.com/a/23576039/130237找到答案。

this.findAll无法处理子模板

3 个答案: