Meteorjs - 从另一个模板中选择一个模板的 DOM

Question

我有以下

<div id="header">
    {{> header}}
</div>

<div class="hidden content_box">
    {{> content}}
</div>

“content_box”在开始时是隐藏的。

模板“标题”只有一个按钮。

<template name="header">
    <button id="display_content">Click to display content</button>
</template>

模板“内容”只是一个简单的 div

<template name="content">
    It's me, content
</template>

当我点击标题中的按钮时，我想“显示” content_box。

我如何实现这一目标？ - 或者更好的是，在您需要从另一个模板的事件访问模板的 DOM 的情况下，实现这种效果的最佳方法是什么？

Template.header.events "click button#display_content": (e) ->
  Template.content.show() ?????

Answer 1

我不知道这是否是最好的方法，但在类似的情况下，我之前所做的是使用会话参数来存储 div 的显示/隐藏状态。在您的点击事件中，您只需要更改会话标志的值。在要显示/隐藏的 div 的模板中，您只需返回类名即可。

JS 中的示例：

Template.header.events({
    "click button#display_content": function () {
        Session.set('contentShow', true);
    }
});

Template.content.className = function (input) {
    return Session.equals('contentShow', true) ? '' : 'hidden';
};

HTML

<template name="content">
    <div class="{{className}} content_box">
        It's me, content
    </div>
</template>

您需要将 Meteor.startup() 中的会话标志初始化为 false，例如 Session.set('contentShow', false);。由于 session 是响应式的，当您更改 session 标志时，div 类名将自动重新评估。