Questo. Findall non funziona sul sotto-modello

Question

Quando provo a utilizzare questo. Findall su un modello in cui il selettore è in un sottotitolo, Findall restituisce nulla.

Ecco l'html:

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

.

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

.

Uscita di scatole.Lingth è 0. Qualche idea come potrei ottenere gli elementi "box"?

Answer 1

Ecco la risposta corretta.Ho aggiunto questo al mio percorso di ferro-router:

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

.

Trovato la risposta da https://stackoverflow.com/a/23576039/130237 mentre stavo cercando di risolvereun problema diverso

Answer 2

Secondo i documenti per findall :

.

Solo gli elementi all'interno del modello e i suoi sotto-modelli possono corrispondere a parti del selettore.

Quindi dovrebbe funzionare per i sub-modelli.Ho provato questo con una serie fissa di prodotti e ha funzionato, il che implica che stai solo vedendo un ritardo tra la chiamata a rendered e i prodotti da recuperare.Ad esempio se fai:

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

.

Quindi se si fa clic su una delle caselle, è necessario visualizzare il numero corretto registrato nella console.In breve, penso che il test potrebbe essere semplicemente non valido.Se stai usando il router di ferro, potresti provare ad aggiungere un cameriere per i prodotti - che potrebbe assicurarti di arrivare prima della chiamata resa.

Answer 3

Ecco cosa ho fatto per eseguire uno script dopo che tutti i prodotti sono stati caricati.

Ho aggiunto la proprietà Last_Product in tutti i prodotti.

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

.

Allora invece di "Template.Prodotti", ho usato "Template.Prodotto" per rilevare se l'ultimo prodotto è reso.Quando l'ultimo prodotto è reso, eseguire lo script.

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

.

scatole.Lunghezza ora ha la lunghezza corretta.

Grazie a David per l'idea!