0

私は次のものを持っています

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

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

「content_box」は最初は隠れています。

テンプレート「header」にはボタンが 1 つあります。

<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 に答える