流星反应变量不一致呈现
问题描述:
我已经通读了所有的反应性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。
编辑
放弃了这一点,因为用户界面不直观和工具提示刚刚得到的方式。从来没有真正找到解决问题的办法。
答
使用template.reason.set('密码太短'); 而不是Template.instance()。reason.set('Password is too short');
不,那么无论是工具提示还是裸体{{reason}}都会得到更新。 –
也许它没有达到如果块试图添加console.log(contents.length) –