Comment retarder l'affichage de la variable dans le météore?

J'écris une application qui montre un temps d'attente estimé basé sur le compte de la collection. Le problème que j'ai est quand la page est chargée ou régénérée le waitTime affiche, mais il affiche d'abord 0 et après environ une seconde il affiche alors le waitTime réel basé sur le compte. Je suppose que ceci a quelque chose à faire avec la variable étant retardée en obtenant le compte de la collection ainsi elle montre le compte initial de 0 et obtient alors le nombre réel et affiche le waitTime?Comment retarder l'affichage de la variable dans le météore?

Existe-t-il un moyen d'afficher uniquement le temps d'attente exact lors du chargement ou du rafraîchissement?

js:

Template.home.helpers({ 
waitTime: function() { 
    var totalCount = Students.find().count(); 
    var hour = totalCount/4; 

    if(totalCount < 4){ 
     return 15*totalCount + " minutes" 
    }else if(totalCount >= 4 && totalCount%4 == 0){ 
     return hour + " hour(s)"; 
    }else if(totalCount >= 4 && totalCount%4 == 1){ 
     hour = hour - .25; 
     return hour + " hour(s)" + " 15 minutes"; 
    }else if(totalCount >= 4 && totalCount%4 == 2){ 
     hour = hour - .5; 
     return hour + " hour(s)" + " 30 minutes"; 
    }else if(totalCount >= 4 && totalCount%4 == 3){ 
     hour = hour - .75; 
     return hour + " hour(s)" + " 45 minutes"; 
    } 
    } 
});

Html:

<template name= "home"> 
<body> 
    <h2 id="insert">Approximate Wait Time: {{waitTime}}</h2> 
    <div class="col-lg-6 col-lg-offset-3"> 
     <!-- Quick form from autoform package creates sign in form and populates collection with data--> 
     {{>quickForm id="studentForm" collection="Students" type="insert" template="bootstrap3-horizontal" label-class="col-sm-3" input-col-class="col-sm-9"}} 
    </div> 
</body> 
</template>

Source

2017-04-20 E. Pace

la façon la plus simple est de ne pas rendre votre vue (ou au moins les parties pertinentes de votre vue) jusqu'à ce que vos données soient prêtes. Les deux principaux moyens sont soit d'attendre que l'abonnement soit prêt, soit d'attendre que vous ayez la valeur de données souhaitée. Ce dernier serait difficile, car d'après ce que je peux dire, 0 est une valeur possible. donc je suggérerais le premier.

en supposant que votre abonnement est lié à votre modèle, vous pouvez attendre l'abonnement pour être prêt comme ceci:

<template name= "home"> 
<body> 
    {{#if Template.subscriptionsReady}} 
    <h2 id="insert">Approximate Wait Time: {{waitTime}}</h2> 
    <div class="col-lg-6 col-lg-offset-3"> 
     <!-- Quick form from autoform package creates sign in form and populates collection with data--> 
     {{>quickForm id="studentForm" collection="Students" type="insert" template="bootstrap3-horizontal" label-class="col-sm-3" input-col-class="col-sm-9"}} 
    </div> 
    {{else}} 
     Loading... 
    {{/if}} 
</body> 
</template>

Source

2017-04-20 04:35:01 zim

var totalCount = Students.find().count();

Lorsque la première fois que la page est chargée, la réactivité du météore n'a pas encore établi, donc le compte est toujours 0, l'écran affichera 0. Vous devrez vérifier si l'abonnement a déjà été fait, puis afficher la page

Template.home.created = function() { 
    this.loading = new ReactiveVar(true) 
    let subHandler = Meteor.subscribe('your-publication-name') 
    this.loading.set(!subHandler.ready()) 
}

puis dans votre assistant de modèle, vérifiez si le loading est vrai, renvoyer le texte de chargement ou STH, sinon retourner le résultat

Quelque chose comme ça

waitTime: function() { 
    if (Template.instance().loading.get()) return "Loading"; 

    // the rest of the code 
}

Source

2017-04-20 04:33:12

Comment retarder l'affichage de la variable dans le météore?

Répondre

Questions connexes