我们如何基于mongoDB数据增加语义UI进度条？

Z时代
2024-01-10
分类：问答

我有一种情况，应该在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); 
} 
});

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

回答：

几件事情需要仔细检查：

语义UI初始化：你不需要在这里设置一个值作为你的价值会被你的帮手

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

语义UI提供用法（为简单起见，我删除了您的样式）：如果使用数据值来获取Blaze助手的值，则不需要再在内部div中添加该值。

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

大火助手：你的助手应该返回一个值！如果上一条语句是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); 
} 
```