2017-12-27 342 views
2

我有一种情况,应该在UI上显示工作进度,因为我经常(5秒)检索工作进度并存储到mongoDB中。由于语义UI提供了进度条功能,我尝试在我的流星项目中实现。问题在于进度没有增加。
我们如何基于mongoDB数据增加语义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); 
} 
}); 

任何人都可以点正是我已经错过了,我该如何纠正呢?

回答

2

几件事情需要仔细检查:

  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(..),则返回值将是'undefined'。你不需要会话,因为Mongo发现也是被动的,并且会在每次更新时重新运行(顺便说一句,另一个建议可能是用'findOne'而不是find()。fetch()和你的辅助可以采取单行):

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

好运 JF