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);。由于会话是被动的，因此当您更改会话标志时，将自动重新评估div类名称。

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

1 个答案: