流星反应变量不一致呈现

我已经通读了所有的反应性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}}，原因将显示在页面上，PLUS工具提示现在按预期工作并显示更新原因。如果我使用CSS隐藏{{reason}}，则工具提示停止工作。看起来模板助手必须在渲染标签之前渲染。我究竟做错了什么？

最新的Meteor，twbs：bootstrap，accounts：templates。

编辑

放弃了这一点，因为用户界面不直观和工具提示刚刚得到的方式。从来没有真正找到解决问题的办法。

来源

2017-04-19 Ronald Currier

使用template.reason.set（'密码太短'）; 而不是Template.instance（）。reason.set（'Password is too short'）;

来源

2017-04-19 07:55:19

不，那么无论是工具提示还是裸体{{reason}}都会得到更新。 –

也许它没有达到如果块试图添加console.log（contents.length） –

流星反应变量不一致呈现

回答

相关问题