流星动态模板答案

【问题标题】：Meteor Dynamic Template流星动态模板
【发布时间】：2015-03-17 12:23:14
【问题描述】：

所以我有以下模板，我想在其中根据会话变量的值呈现不同的模板

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

我的会话变量 board 是根据以前的模板设置的，并且可以根据需要进行更改。我将 template 的值设置为 active，这是一个模板助手，可以在下面看到。

Template.selectFrame.helpers({
    active: function() {
        return Session.get('board');
    }
});
Template.body.events({
'click .btn-primary': function (event) {
    event.preventDefault();
    console.log(event.target.id);
    Session.set('board', event.target.id);
    }
});

board 的值设置为我想要动态的四个不同模板的名称。目前只返回 Session 默认值及其对应的模板。

需要添加什么以允许每个模板在我的会话变量更改时显示？

【问题讨论】：

会话设置在哪里？
会话在不同模板的事件中设置。我将代码添加到问题中

标签： meteor

【解决方案1】：

如果只有 4 个模板，可以使用 if-else 语句作为典型解决方案。对于许多模板的情况，我不确定解决方案。只是等待一些专业人士的帮助:)

【讨论】：

【解决方案2】：

没有看到您的代码中的所有内容，我不确定您做错了什么，但希望这个示例足够简单，可以指导您。我试图让 HTML 和 JS 尽可能接近您提供的内容。

<head>
  <title>Meteor Dynamic Template</title>
</head>

<body>
<h1>Meteor Dynamic Template</h1>
{{> selectFrame}}

<br>
<button class="btn-primary" id="dynamic1">Set Template 1</button>
<button class="btn-primary" id="dynamic2">Set Template 2</button>
<button class="btn-primary" id="dynamic3">Set Template 3</button>
<button class="btn-primary" id="dynamic4">Set Template 4</button>
</body>

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

<template name="dynamic1">
  This is dynamic template 1.
</template>

<template name="dynamic2">
  This is dynamic template 2.
</template>

<template name="dynamic3">
  This is dynamic template 3.
</template>

<template name="dynamic4">
  This is dynamic template 4.
</template>

和js代码：

if (Meteor.isClient) {
  Template.body.created = function() {
    Session.set("board", "dynamic1");
  }

  Template.selectFrame.helpers({
    active: function() {
      return Session.get('board');
    }
  });

  Template.body.events({
    'click .btn-primary': function (event) {
      event.preventDefault();
      console.log(event.target.id);
      Session.set('board', event.target.id);
    }
  });
}

这是运行此示例的 MeteorPad： http://meteorpad.com/pad/CAtoogYaqHxPKecvA/

【讨论】：

仍然不想为我工作。模板加载默认值，但不会随着会话变量的变化而变化。