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 찾기가 반응 적이기 때문에 Session을 필요로하지 않습니다. 그리고 매번 업데이트 할 때마다 다시 실행될 것입니다. (그런데 또 다른 제안은 find() 대신에 findOne을 사용하여 콜렉션을 쿼리하는 것일 수 있습니다. fetch() 그리고 도우미) 한 줄을 수 :

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

행운 JF