代码之家 › 专栏 › 技术社区 › Snkini

如何基于mongoDB数据增加语义UI进度条?

semantic-ui meteor mongodb jquery javascript

Snkini · 技术社区 · 7 年前

我有一种情况,作业的进度应该显示在UI上,因此我不断(5秒)检索作业进度并存储到mongoDB中。由于语义UI提供进度条功能,我尝试在meteor项目中实现。问题是进度没有增加。

样品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>

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

有人能指出我到底漏掉了什么地方吗?我该如何纠正?

1 回复 | 直到 7 年前

gihef 7 年前

需要仔细检查的几件事:

语义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>

Blaze助手: 您的助手应该返回一个值! 如果您的最后一条语句是控制台。日志(…),返回值将为“未定义”。您不需要会话,因为Mongo find也是被动的,并且会在每次更新时重新运行(顺便提一下,另一个建议是使用“findOne”而不是find()查询您的集合)。fetch()和您的助手可以使用一行):
```
'progValue':function(){
    var id=this._id; //job ID
    var jobDetails=job.find({_id:id}).fetch();
    return(jobDetails[0].prog);
}
```

祝你好运 JF公司

推荐文章

Ankit Kumar · 如何在mongodb中过滤至少6个月的数据?

2 年前

Meikel Rizky Hartawan · Mongo DB未按id更新

2 年前

Hayato · 如何检查我是如何安装MongoDB的

2 年前

Valeri · 如何仅获取布尔值数组中没有“false”的文档?

2 年前

Adrien Chapelet · MongoDB聚合与阵列内的外部模型

2 年前

Agrim Singh · 用户数据。名称未显示用户名

2 年前

danilonet · MongoDb。NET-ObjectId序列化

2 年前

robert_gonzalez · MongoDB:统计子文档中要素的出现次数

2 年前

Windy · MongoDB-查询计算和分组多个项目

2 年前

Mike Kharkov · 无法从数据库中检索多个值

2 年前