流星反应变量未一致呈现

Question

我已阅读此处所有的反应式 var 问题以及 this meteorchef article 我的应用程序仍然有问题。

foo.js：

    Template.pwdStrength.onCreated(function() {
      this.reason = new ReactiveVar('Empty password');
    });

  Template.pwdStrength.helpers({
    reason: function() {
      return Template.instance().reason.get();
    },
  });

  Template.pwdStrength.events({
    'input #at-field-password': function(event, template) {
      const contents = event.currentTarget.value;
      // call strength computation here...
      if (contents.length < 8) {
        Template.instance().reason.set('Password is too short');
      } else {
        Template.instance().reason.set("We don't like that password");
      }
    }
  });

foo.html:

<template name='pwdStrength1'>
{{> atTextInput}}
  <span data-toggle='tooltip' data-placement='top' title="{{reason}}">
    <ul id="strength" check-strength="pw" style="{display: inline;}">
      <li class="point" style="{{style 1}}"></li>
      <li class="point" style="{{style 2}}"></li>
      <li class="point" style="{{style 3}}"></li>
      <li class="point" style="{{style 4}}"></li>
      <li class="point" style="{{style 5}}"></li>
    </ul>
  </span>
</template>

目标是在密码强度计上显示一个工具提示，其中包含输入事件设置的原因。即使在密码字段中输入文本后，工具提示也会显示为“空密码”。但是，如果我在模板顶部添加一行仅包含 {{reason}} 的行，则原因会显示在页面上，而且工具提示现在可以按预期工作并显示更新原因。如果我使用 CSS 隐藏{{reason}}，那么工具提示将停止工作。似乎必须先渲染模板助手，然后再渲染标签中的助手。我做错了什么？

最新的 Meteor、twbs:bootstrap、accounts:templates。

---

编辑

放弃了这一点，因为 UI 不直观，而且工具提示妨碍了操作。从未真正找到解决问题的方法。

Answer 1

使用template.reason.set('密码太短'); 而不是 Template.instance().reason.set('密码太短');