Meteor einfache reaktive var

Question

Ich arbeite in Meteor versuchen, eine reaktive var zu verwenden, um den Inhalt im Hauptbereich zwischen zwei Tabs zu wechseln. Ich konnte den Inhalt erfolgreich selbst testen, daher bin ich mir ziemlich sicher, dass das Problem im reaktiven var-Code liegt. Speziell denke ich, das Problem ist mit der Registerkarte: function(), aber nach vielen Suchen und Lesen der Dokumentation habe ich keine Lösung gefunden.

Die relevante 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(); 
    } 
}); 

Die entsprechende 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}} 

Dies wird die tab Helfer ruft einen String zu erhalten, die der Name der Vorlage, die Sie zeigen wollen, ist Hier. Es sollte das erste Mal funktionieren, da Sie zunächst den Wert currentTab auf "form" setzen.

Um die angezeigte Vorlage zu ändern, müssen Sie den Wert currentTab in eine Zeichenfolge ändern, die dem Namen der neuen Vorlage entspricht. Du machst das nicht.

Template.currentTab.set(); 

Hier sollten Sie das tun. Stattdessen rufen Sie set() auf der currentTab Eigenschaft von Template, die ich glaube nicht, existiert. Template mit einem Großbuchstaben T ist ein Meteor-Objekt, nicht die Vorlageninstanz, auf die Sie sich beziehen. Um einen neuen Wert für currentTab festzulegen, müssen Sie einen Wert angeben. So ähnlich:

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) 
    } 
});