Question

我在我的Meteor应用程序中使用progressbarjs library。我有一个辅助函数，它计算列表的长度并返回一个百分比数字。我的循环进度条有一个“data-parent”属性，它有一个由辅助函数生成的值。

该值有效并且正在处理数据，因此我知道帮助函数不是问题。我还注意到，如果我进入inspect元素并手动编辑data-parent属性，则进度条不会更改值。

有人可以协助我找出进度条没有被动反应的原因吗？

HTML

 <template name="Preset_settings">
    <div id="container2" data-parent="{{calcPercent}}"></div>
</template>

JS

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

});

Answer 1

我不是ProgressBar.js专家，但在阅读了API并玩弄它后，我没有看到进度条使用任何data属性的任何地方。

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

使用.animate(progress, [options], [cb])功能为进度条设置动画，该功能可将进度条从上一个值（从0开始）设置为您提供的进度值。对.animate()的连续调用将继续向前移动进度条（假设您逐步传递更大的进度值）
使用.set(progress)方法手动设置进度条的进度，这会使进度条前进到查看该进度值的方式（无动画）。

因此，为了让它在Meteor中运行，您必须连续调用上述任一函数来逐步调整条形图（目前您正在调用.animate()一次）。

看起来您可能尝试使用data-parent属性方法来做到这一点，但在一天结束时，您当前的代码只会调用.animate()一次（请记住{{1}回调只在渲染模板时调用一次。）

我会这样做。

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); }); });为进度条设置动画。请注意，我假设（根据您的代码）您在模板的{{1}中定义了一些名为.autorun()的被动数据源（例如ReactiveVar，ReactiveDict或其他内容）回调。

您也不需要state帮助，可以将其删除。

为什么我的进度条不会随着数据的加载而改变？

1 个答案: