これはサブテンプレートでは機能していません

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);
}

.

Boxes.Lengthの出力です。任意のアイデア「ボックス」要素を取得できる方法は？

Answer 1

これは正しい答えです。私はこれを私のアイアンルータールートに追加しました：

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

.

https://stackoverflow.com/a/a/23576039/130237 異なる問題。

Answer 2

findall ：

テンプレート内の要素とそのサブテンプレートのみがセレクタの一部と一致することができます。

だからそれはサブテンプレートに働くべきです。私はこれを修正された製品の配列で試してみましたが、それは働きました、それはあなたがrenderedへの呼び出しとフェッチされている製品との間の遅延を見るだけであることを意味します。たとえば、次のような場合：

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

.

次に、いずれかのボックスをクリックすると、正しい番号がコンソールに記録されているのがわかります。要するに、テストは無効になるかもしれないと思います。Iron-Routerを使用している場合は、製品にwaitonを追加してみてください。

Answer 3

すべての製品がロードされた後にスクリプトを実行するためにしたことです。

すべての製品に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;
    }
});

.

その後「Template.Products」の代わりに、最後の製品がレンダリングされているかどうかを検出するために「Template.Product」を使用しました。最後の製品がレンダリングされたら、スクリプトを実行します。

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

.

boxes.lengthは正しい長さを持っています。

アイデアのためのDavidのおかげで！