Динамические шаблоны и шаги JQuery

Question

Я работаю над созданием мастера форм с шагами jQuery. С шага 1 - шаг 2 мне нужно определить, какой шаблон загружен в зависимости от выбора на шаге 1. У меня есть этот шаблон. Я бы хотел, чтобы другой шаблон был отображен при изменении переменной сеанса.

<template name = "selectFrame"> 
    <div class = "container"> 
     <div class = "frameCarousel"> 
      {{> Template.dynamic template=active data=this}} 
     </div> 
    </div> 
</template> 

Каждый из внутренних шаблонов выглядит следующим образом.

<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 - это функция, которая получает значение переменной сеанса и возвращает имя соответствующего шаблона.

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

Значение платы, переменная сессии, которая определяет, какой шаблон будет оказывать изменения, как это следует, но только шаблон, который когда-либо делает это шаблон, что значение по умолчанию платы установлен слишком. Может ли кто-нибудь предложить какую-то помощь или какие-то изменения, которые мне нужно сделать.

Answer 1

У меня возникла аналогичная проблема.

Вместо непосредственного использования переменной сеанса я создал ReactiveVar и использовал это вместо этого в помощнике.

(чтобы получить доступ к ReactiveVar добавить его в проект с: метеора добавить реактивную-вар)

Сначала я создал реактивную переменную для хранения имени шаблона Я хотел, чтобы динамически изменять в пределах Template.name.created:

this.templateName = new ReactiveVar(null); 

я создал автозапуск внутри функции Template.name.rendered изменить это значение для любой переменной сессии было изменено на:

this.autorun(function(){ 
    var templateName = Session.get("template_name"); 
    Template.instance().templateName.set(templateName); 
}) 

И, наконец, я изменил шаблон помощника, чтобы получить имя шаблона от реактивной переменной:

dynamic_template: function(){ 
    var dynamicName = Template.instance().templateName.get(); 
    return dynamicName; 
} 

Я надеюсь, что этот подход работает для вашего конкретного случая.