유성 단순 반응식 변수

Question

반응성 변수를 사용하여 두 개의 탭 사이에서 메인 패널의 내용을 전환하려고 할 때 유성 작업을하고 있습니다. 나는 그 자체로 내용을 성공적으로 테스트 할 수 있었으므로 문제가 반응적인 var 코드에 있다고 확신합니다. 특히 나는이 문제가 tab : function()이라고 생각하지만, 많은 검색과 문서를 읽은 후에 해결책을 찾지 못했습니다.

관련 JS :

Template.content.onCreated(function() { 
    this.currentTab = new ReactiveVar('form'); 
}); 

Template.content.helpers({ 
    tab: function() { 
     return Template.instance().currentTab.get(); 
    } 
}); 

Template.content.events({ 
    'click .nav li': function (event, template) { 
     var currentTab = $(event.target).closest("li"); 

     currentTab.addClass("active"); 
     $(".nav li").not(currentTab).removeClass("active"); 

     Template.currentTab.set(); 
    } 
}); 

관련 HTML :

<template name ="content"> 
    <ul class ="nav"> 
     <li data-template="form"><a href="#">Form</a></li> 
     <li data-template="results"><a href="#">Results</a></li> 
    </ul> 
    {{ > Template.dynamic template=tab}} 
</template>   

Answer 1

{{ > Template.dynamic template=tab}} 

이 표시하려는 템플릿의 이름 인 문자열을 얻기 위해 tab 도우미를 호출 이리. currentTab의 값을 "form"으로 설정함으로써 처음부터 작동해야합니다.

표시된 템플릿을 변경하려면 currentTab의 값을 새 템플릿의 이름과 일치하는 문자열로 변경해야합니다. 너는 그렇게하지 않는다.

Template.currentTab.set(); 

여기가 그렇게해야합니다. 대신 currentTab 속성의 set()을 Template이라고 말하면서 나는 생각하지 않습니다. Template은 대문자 인 T는 Meteor 오브젝트이며 참조하려는 템플릿 인스턴스는 아닙니다. 그리고 currentTab에 대한 새 값을 설정하려면 실제로 값을 제공해야합니다. 좋아요 :

Template.content.events({ 
    'click .nav li': function(event, instance) { 
     //logic to decide which template you want to show 
     //and put the name of that template in templateName 

     instance.currentTab.set(templateName) 
    } 
});