Question

当点击按钮时，此Meteor客户端代码应显示进度条动画。问题是当动画代码尝试使用它时，progress元素为null。

如何修复？ THX

Template.registerHelper('session', (value) => {
  return Session.get(value);
})

Template.footer.events({
'click button[data-action=carSearch]': function (e) {
  e.preventDefault();
  clickInfo();
}
});


'clickInfo': function () {
   Session.set('inProgress', true); // makes the element visiable
   progressBarStart(); // start the animation
}

    'progressBarStart': function () {
      let bar = document.getElementById('bar'); //<-- bar is always null

      if (bar.value < 70) { 
        setTimeout(lib.progressBarStart(), 1000); controls the speed
        bar.value += 1;
      }
    }

<template name="nameSearch">
  <div id="nameSearch">
    <p id="result" data-id={{_id}}>
      {{{display.result}}} <br>
      {{#if (session 'inProgress')}}
        <progress id="bar" value="0" max="70"></progress>
      {{/if}}
    </p>
  </div>
</template>

Answer 1

在调用Session.set('inProgress', true);后，你应该给渲染时间重新渲染，50ms就够了。

接下来，您应该正确声明clickInfo和progressBarStart，而不是现在就拥有它们。

function clickInfo() {
  Session.set('inProgress', true);
  Meteor.setTimeout(progressBarStart, 50);
}

function progressBarStart() {
  ...
}

我还建议使用专用帮助程序获取inProgress状态：

Template.footer.helpers({
  isInProgress: function() {
    return Session.equal('inProgress', true);
  }
});

并在模板中使用它：

{{#if isInProgress}
...
{{/if}}

Answer 2

您不能因为这么小的原因而使用Session变量。 Meteor JS已经提供了在模板级操作中使用Reactive Variables的工具。

在调用Template.instance().inProgress.set(true);后，您应该给渲染时间重新渲染。

我还建议使用专用帮助程序获取inProgress状态：

Template.footer.onCreated(function(){
  this.inProgress = new ReactiveVar(false);
});


Template.footer.helpers({
  isInProgress: function() {
    return Template.instance().inProgress.get();
  }
});

并在模板中使用它：

{{#if isInProgress}
...
{{/if}}

由于辅助条件，文档元素在模板中为null

2 个答案: