유성 반응성 변수가 일관되게 렌더링되지 않음

Question

모든 반응 형 질문과 여기에 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}}을 숨기면 툴팁이 작동을 멈 춥니 다. 템플릿 도우미는 태그에 렌더링하기 전에 렌더링되어야합니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

최신 유성, twbs : 부트 스트랩, 계정 : 템플릿. UI를 직관적이지이고 툴팁이 바로 방법으로 얻었 기 때문에

---

편집이에 포기했다. 실제로 문제의 해결책을 찾지 못했습니다.

Answer 1

사용 template.reason.set ('암호가 너무 짧음'); Template.instance() 대신. reason.set ('암호가 너무 짧음');