javascript - 我如何在 Meteor 中隐藏动态元素？

Question

所以我有一堆模板将用 {{#each game}} 进行迭代，显示以下模板:

<template name="game">
{{#if condition}}
    <div class="box">
        Page 1
    </div>
{{else}}
    <div class="box">
        Page 2
    </div>
{{/if}}
</template>

我想在点击“第 1 页”框时显示“第 2 页”，所以我有以下内容:

Template.game.events({
    'click .box': function(e) {
        Session.set("condition", true);
    }
});

但我不希望所有其他游戏模板都过渡到第 2 页，只是单击的那一个。我该如何实现？

编辑:更改应该只影响当前用户，而不是所有用户。

Answer 1

假设您的游戏存储在 Meteor.Collection 中，并且 condition 是文档的一个属性，它应该反射(reflect)所有用户，而不仅仅是当前用户，您可以做这样的事情:

Template.game.events({
    'click .box': function(event, template) {
        Games.update(
            {_id: template.data._id},
            {$set: {condition: !template.data.condition}}
        );
    }
});

如果它应该只影响当前用户，您可以使用模板实例特定的 session 变量并使用名为 condition 的辅助函数返回它:

Template.game.events({
    'click .box': function(event, template) {
        Session.set("condition-" + template.data._id, true);
    }
});

Template.game.condition = function() {
    return Session.get("condition-" + this._id);
};

您可以使用本地集合实现类似的功能。