0

我有以下

<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() ?????
4

1 回答 1

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 类名。

于 2012-10-31T07:57:43.317 回答