mongoDBデータに基づいてSemantic UI Progress barをどのように増やすことができますか？

Question

私は、ジョブの進行状況を取得してmongoDBに保存する（5秒間）ため、UIの表示にジョブの進捗状況を表示する必要があります。セマンティックUIがプログレスバーの機能を提供するように、私は流星プロジェクトに実装しようとしました。問題は進歩が増えていないことです。

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

私が見逃していると私はそれをどのように修正することができ、正確にでき、誰ポイント？ダブルチェックに

Answer 1

いくつかのこと：

1. セマンティックUIの初期化：あなたの値は、あなたのヘルパー

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

2. セマンティックUIにより提供されるように、あなたはここで値を設定する必要はありません（単純化のためにあなたのスタイルを削除しました）：データ値を使ってBlazeヘルパーの値を取得する場合、内部divに値を再度追加する必要はありません。

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

3. ブレイズヘルパー：あなたのヘルパーは値を返す必要があります！最後の文がconsole.log（..）の場合、戻り値は「未定義」になります。あなたはセッションが必要ではありませんが、Mongoの発見は反応的であり、すべての更新で再実行されます（ところで、別の提案は、find（）の代わりにfindOneでコレクションを照会することです。ヘルパー）は、単一のラインを取ることができる：

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

幸運 JF