使用 Meteor 动态变量更新 <script> 块内的值

Question

我正在使用 Meteor 构建一个应用程序，该应用程序使用 javascript 中定义的进度条，如下所示：

<script type="text/javascript">
    var ProgressBar = require('progressbar.js');
    var bar = new ProgressBar.Line(percentbar, {
      strokeWidth: 4,
      easing: 'easeInOut',
      duration: 1400,
      color: '#ED6A5A',
      trailColor: '#eee',
      trailWidth: 1,
      svgStyle: {width: '100%', height: '100%'},
      text: {
        style: {
          color: '#999',
          position: 'absolute',
          right: '0',
          top: '30px',
          padding: 0,
          margin: 0,
          transform: null
        },
        autoStyleContainer: false
      },
      from: {color: '#ED6A5A'},
      to: {color: '#7eed5a'},
      step: (state, bar) => {
        bar.setText(Math.round(bar.value() * 100) + ' %');
        bar.path.setAttribute('stroke', state.color);
      }
    });
    bar.animate((Session.get('vready') * 1.0)/Session.get('vtotal'));  // Number from 0.0 to 1.0
</script>

我希望在最后几行中访问的会话变量发生变化时，进度条以正确的百分比重新呈现。但是，它只呈现一次并且不会在对会话变量进行更改时更新。有没有办法在会话变量更改时重新触发百分比栏的动画？

P.S。我尝试在我的 .js 中定义百分比条形码作为模板的助手而不是在 .html 文件中，但我每次都会遇到异常并且条形根本不呈现。

Answer 1

您可以使用带有 reactive-var 的助手来达到这个目的。

示例代码：

将以下代码放入onRendered回调

var ProgressBar = require('progressbar.js');
    var bar = new ProgressBar.Line(percentbar, {
      strokeWidth: 4,
      easing: 'easeInOut',
      duration: 1400,
      color: '#ED6A5A',
      trailColor: '#eee',
      trailWidth: 1,
      svgStyle: {width: '100%', height: '100%'},
      text: {
        style: {
          // Text color.
          // Default: same as stroke color (options.color)
          color: '#999',
          position: 'absolute',
          right: '0',
          top: '30px',
          padding: 0,
          margin: 0,
          transform: null
        },
        autoStyleContainer: false
      },
      from: {color: '#ED6A5A'},
      to: {color: '#7eed5a'},
      step: (state, bar) => {
        bar.setText(Math.round(bar.value() * 100) + ' %');
        bar.path.setAttribute('stroke', state.color);
      }

console.log((progressBarValue.get() * 1.0)/Session.get('vtotal'));
    bar.animate((progressBarValue.get() * 1.0)/Session.get('vtotal'));
    });

将以下代码放入onCreated回调

var progressBarValue;
Template.home.onCreated(function (){
    progressBarValue=new ReactiveVar(0);

});

使用带有以下行的 event 块设置进度条的新值：

progressBarValue.set(*value*);

这将使进度条反应。

或者，使用 session 您可以使用 Tracker.autorun 来完成这项工作。

Answer 2

这可能是 Tracker.autorun()

更好的案例

在Template.onRendered()
创建一个跟踪当前进度的会话变量
更新 Tracker.autorun()

js:

Tracker.autorun(()=>{
  bar.setText(Math.round(Session.get('currentValue') * 100) + ' %');
  bar.path.setAttribute('stroke', state.color);
});

您实际上并没有在 Meteor 中使用 <script> 标签。相反，您将 js 附加到模板事件和对象。

使用 Meteor 动态变量更新 <script> 块内的值

Updating values inside <script> block with Meteor dynamic variables

html

javascript

dynamic-variables

meteor