Wie können wir die Fortschrittsanzeige für die semantische Benutzeroberfläche basierend auf den mongoDB-Daten erhöhen?

Question

Ich habe eine Situation, wo der Fortschritt eines Jobs auf der Benutzeroberfläche angezeigt werden sollte, für die ich ständig (5 Sekunden) den Job-Fortschritt abrufen und in mongoDB speichern. Da die semantische Benutzerschnittstelle Fortschrittsbalkenfunktionen bietet, habe ich versucht, sie in meinem Meteorprojekt zu implementieren. Das Problem ist, dass der Fortschritt nicht erhöht wird.

sample.html

<div class="ui blue active progress stats" style="padding:0.25%;;width:7%;margin:0% 1%;margin-top:0.5%;" data-value={{prog}} id="statProgress"> 
    <div class="bar"> 
     <div class="progress {{progValue}}"></div> 
    </div> 
</div> 

Sample.js

$('#statProgress') 
    .progress({ 
    label: 'ratio', 
    text: { 
     ratio: '{value}' 
    } 
}); 

Template.sample.onRendered (function(){ 
    var progv=Session.get("selectedProgress"); 
    this.$('.ui.progress').progress({value: progv}); 
}); 

Template.sample.helpers({ 
'progValue':function(){ 
    var id=this._id; //job ID 
    console.log("inside the progValue and the id is: ",id); 
    var jobDetails=job.find({_id:id}).fetch(); 
    console.log(jobDetails); 
    console.log(jobDetails[0].prog); 
    Session.set("selectedProgress",jobDetails[0].prog); 
    var x=Session.get("selectedProgress"); 
    console.log(x); 
} 
}); 

Kann jemand Punkt, wo genau ich verpasst haben, und wie kann ich es beheben?

Answer 1

Mehr Dinge zu überprüfen:

1. Semantic UI Initialisierung: Sie braucht nicht von Ihrem Helfer

   Template.sample.onRendered (function(){ 
       var progv=Session.get("selectedProgress"); 
       this.$('.ui.progress').progress(); 
   }); 
   

2. Semantic UI hier einen Wert als Wert setzen wird gestellt Verwendung (Ich habe den Stil zur Vereinfachung entfernt): Wenn Sie den Wert des Blaze-Helfers mithilfe von Datenwerten ermitteln, müssen Sie den Wert im inneren Teilelement nicht erneut hinzufügen.

   <div class="ui blue active progress stats" data-value={{progValue}} id="statProgress"> 
       <div class="bar"> 
        <div class="progress"></div> 
       </div> 
   </div> 
   

3. Blaze Helper: Ihr Helfer einen Wert zurückgeben sollte! Wenn Ihre letzte Anweisung eine console.log (..) ist, ist der Rückgabewert 'undefiniert'. Sie brauchen die Sitzung nicht, da der Mongo-Fund auch reaktiv ist und bei jedem Update erneut ausgeführt wird (ein anderer Vorschlag könnte übrigens sein, Ihre Sammlung mit 'findOne' anstatt mit find(). Fetch() und Ihrer Helfer könnte eine einzige Zeile nehmen):

   'progValue':function(){ 
       var id=this._id; //job ID 
       var jobDetails=job.find({_id:id}).fetch(); 
       return(jobDetails[0].prog); 
   } 
   

Viel Glück JF