this.findAll не работает с вложенным шаблоном

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

Вывод блоков.длина равна 0.Есть какие-нибудь идеи, как я мог бы получить элементы "box"?

Answer 1

Вот правильный ответ.Я добавил это на мой маршрутизатор железа:

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

.

Нашел ответ от https://stackoverflow.com/a/23576039/130237 пока я пытался решитьдругая проблема.

Answer 2

Согласно документам для Найти все:

Только элементы внутри шаблона и его вложенных шаблонов могут соответствовать частям селектора.

Таким образом, это должно работать для вложенных шаблонов.Я попробовал это с фиксированным массивом продуктов, и это сработало, что подразумевает, что вы просто видите задержку между вызовом 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);
    }
}

.

boxs.length теперь имеет правильную длину.

Благодаря Дэвиду за идею!