Dynamic Templates and Jquery Steps - meteor

Question

I'm working to create a form wizard with jQuery steps. From step 1 to step 2 I need to be able to determine which template is loaded depending on the selection in step 1. I have this template. I would like a different template to be rendered as a session variable changes.
<template name = "selectFrame">
<div class = "container">
<div class = "frameCarousel">
{{> Template.dynamic template=active data=this}}
</div>
</div>
</template>
Each of the internal templates look like this template below.
<template name = "artLineFrame">
{{#each artLineFrames}}
<div class = "thumbnail">
<div class = "something">
<img data-src = "{{source}}" alt = "placeholder" class = "img-circle">
<h2>{{name}}</h2>
<p>{{description}}</p>
<button type = "button" id = "{{tag}}" class = "btn btn-primary">Select</button>
</div>
</div>
{{/each}}
</template>
<template name = "classicFrame">
{{#each classicFrames}}
<div class = "thumbnail">
<div class = "something">
<img data-src = "{{source}}" alt = "placeholder" class = "img-circle">
<h2>{{name}}</h2>
<p>{{description}}</p>
<button type = "button" id = "{{alt}}" class = "btn btn-primary">Select</button>
</div>
</div>
{{/each}}
</template>
<template name = "versionsFrame">
{{#each versionsFrames}}
<div class = "thumbnail">
<div class = "something">
<img data-src = "{{source}}" alt = "placeholder" class = "img-circle">
<h2>{{name}}</h2>
<p>{{description}}</p>
<button type = "button" id = "{{alt}}" class = "btn btn-primary">Select</button>
</div>
</div>
{{/each}}
</template>
<template name = "myHarmonyFrame">
{{#each myHarmonyFrames}}
<div class = "thumbnail">
<div class = "something">
<img data-src = "{{source}}" alt = "placeholder" class = "img-circle">
<h2>{{name}}</h2>
<p>{{description}}</p>
<button type = "button" id = "{{tag}}" class = "btn btn-primary">Select</button>
</div>
</div>
{{/each}}
</template>
Active is a function that gets the value of the session variable and returns the name of the appropriate template.
Template.selectFrame.created = function() {
this.selectFrame = new ReactiveVar(null);
this.autorun(function(){
var templateName = Session.get('board');
console.log('##' + templateName);
Template.instance().selectFrame.set(templateName);
})
Tracker.flush();
}
Template.selectFrame.helpers({
'active' : function() {
var dynamicName = Template.instance().selectFrame.get();
return dynamicName;
}
})
The value of board, the session variable that determines which template will render, changes as it should but the only template that ever renders is the template that the default value of board is set too. Can anyone offer some help or some edits I need to make.

Answer 1

I ran into a similar problem.
Instead of using the session variable directly, I created a ReactiveVar and used that instead in the helper.
(to get access to ReactiveVar add it to your project with: meteor add reactive-var )
First I created a reactive variable to store the name of the template I wanted it to dynamically change to within Template.name.created:
this.templateName = new ReactiveVar(null);
then I created an autorun within the Template.name.rendered function to change this value to whatever the session variable was changed to:
this.autorun(function(){
var templateName = Session.get("template_name");
Template.instance().templateName.set(templateName);
})
And finally I changed the template helper to get the template name from the reactive variable:
dynamic_template: function(){
var dynamicName = Template.instance().templateName.get();
return dynamicName;
}
I hope this approach works for your particular case.