Javascript 为什么我的progressbar在加载数据时没有更改？

我正在使用我的Meteor应用程序。我有一个helper函数，它计算列表的长度并返回一个百分比。我的循环进度条有一个“数据父级”属性，它有一个由helper函数生成的值

这个值是有效的，并且随着数据的处理而改变，所以我知道helper函数不是问题所在。我还注意到，如果进入inspect元素并手动编辑数据父属性，则进度条不会更改值

有人能帮我找出为什么进度条没有反应性地改变吗

HTML

---

我不是ProgressBar.js专家，但在阅读了API并对其进行了研究之后，我没有看到任何地方表明进度条使用了任何

数据

属性

使用此库时，您似乎有两个选项

使用将进度条从上一个值（从0开始）设置为您提供的进度值的动画的功能设置进度条的动画。对

.animate（）

的连续调用将继续向前移动进度条（假设您传入的进度值越来越大）

使用该方法手动设置进度条的进度，这会使进度条前进到它查看该进度值的方式（无动画）

因此，为了在Meteor中实现这一点，您必须连续调用上述任何一个函数来递增进度条（当前您正在调用

.animate（）

一次）

看起来您可能一直在尝试使用

数据父对象

属性方法来实现这一点，但最终，您当前的代码只调用了

.animate（）

一次（请记住，

onRendered

回调在呈现模板时只调用了一次）

我会这样做的

Template.Preset_settings.onRendered(function fabSettingOnRendered() {
  // initialize your progress bar
  var ProgressBar = require('progressbar.js')
  var bar = new ProgressBar.Circle(container2, {
      strokeWidth: 6,
      easing: 'easeInOut',
      color: '#FFEA82',
      trailColor: '#eee',
      trailWidth: 1,
      svgStyle: null
  });

  // setup a reactive computation to update the progress bar
  // this will re-run everytime your reactive datasource is updated
  this.autorun(function() {
    var readyList = this.state.get("readyList");
    bar.animate(readyList.length / 12);
  });    
});

基本上，我使用

.autorun（）。注意，我假设（基于您的代码）您在模板的
onCreated
回调中定义了一个名为
state
的反应数据源（例如
ReactiveVar
、
ReactiveDict
，或其他一些）

您也不需要
calcPercent
助手，可以将其删除

Template.Preset_settings.onRendered(function fabSettingOnRendered() {

    var ProgressBar = require('progressbar.js')
    var line = new ProgressBar.Line('#container2');

    var dataid = document.getElementById('container2');


    var bar = new ProgressBar.Circle(container2, {
        strokeWidth: 6,
        easing: 'easeInOut',
        color: '#FFEA82',
        trailColor: '#eee',
        trailWidth: 1,
        svgStyle: null
    });

    bar.animate(dataid.dataset.parent);
});

Template.Preset_settings.helpers({

    calcPercent: function() {
        const instance = Template.instance();
        var readyList = instance.state.get("readyList");
        return (readyList.length / 12);
    }

});

Template.Preset_settings.onRendered(function fabSettingOnRendered() {
  // initialize your progress bar
  var ProgressBar = require('progressbar.js')
  var bar = new ProgressBar.Circle(container2, {
      strokeWidth: 6,
      easing: 'easeInOut',
      color: '#FFEA82',
      trailColor: '#eee',
      trailWidth: 1,
      svgStyle: null
  });

  // setup a reactive computation to update the progress bar
  // this will re-run everytime your reactive datasource is updated
  this.autorun(function() {
    var readyList = this.state.get("readyList");
    bar.animate(readyList.length / 12);
  });    
});