Question

所以我有以下模板，我希望根据会话变量的值呈现不同的模板

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

我的会话变量board是从之前的模板设置的，并根据需要进行更改。我将模板的值设置为活动，模板助手可以在下面看到。

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的值设置为我想要动态的四个不同模板的名称。目前，仅返回会话默认值及其对应的模板。

需要添加什么才能让每个模板显示为我的会话变量？

Answer 1

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

Answer 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/

流星动态模板

2 个答案: