动态模板和 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;
}
})

board 的值，即决定将呈现哪个模板的会话变量，会发生应有的变化，但唯一会呈现的模板是也设置了 board 的默认值的模板。谁能提供一些帮助或我需要做的一些修改。

Answer 1

我遇到了类似的问题。

我没有直接使用会话变量，而是创建了一个 ReactiveVar 并在帮助程序中使用它。

（要访问 ReactiveVar，请将其添加到您的项目中：meteor add reactive-var）

首先我创建了一个反应变量来存储模板的名称，我希望它在 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;
}

我希望这种方法适用于您的特定情况。