Обновление значений внутри блока ‹script› с помощью динамических переменных Meteor

Я создаю приложение с 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, но каждый раз получаю исключение, и полоса вообще не отображается.


javascript html meteor dynamic-variables
person njvb    schedule 13.09.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Это может быть лучшим случаем для Tracker.autorun()

  1. Инициализируйте индикатор выполнения в Template.onRendered()
  2. Создайте переменную сеанса, которая отслеживает текущий прогресс
  3. Обновите SVG в Tracker.autorun()

js:

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

Вы действительно не используете теги <script> в Meteor. Вместо этого вы прикрепляете свои js к событиям и объектам шаблона.

person Michel Floyd    schedule 13.09.2016
comment
Я не думаю, что это вариант. судя по тому, как работает библиотека, которую использует эта панель, создается впечатление, что она создает HTML при инициализации панели. Когда я перемещаю его в метод onCreate, он падает, как если бы это был вспомогательный метод. - person njvb; 13.09.2016

arrow_upward
0
arrow_downward

Вы можете использовать помощники с 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);

});

Установите новое значение для Progress Bar, используя блок event с помощью этой строки:

progressBarValue.set(*value*);

Это сделает индикатор выполнения реактивным.

Кроме того, с помощью session вы можете использовать Tracker.autorun для выполнения этой работы.

person Ankit    schedule 13.09.2016