2

ユーザーが押すことができるスター/お気に入りボタンがあるとしましょう。ボタンを押すと、ボタンの状態が切り替わるか、見た目が異なり、その状態は永続的 (ページを更新しても同じ状態を保持する) と反応的 (同じユーザーが 2 つのブラウザー インスタンスを開いてボタンを押すと仮定すると) の両方である必要があります。他のブラウザ ウィンドウで新しく変更された状態が表示されます)。

  • ハンドルバー テンプレートで、異なるボタンを持つ 2 つの異なるスパン/Div を選択する if ステートメントを使用する必要がありますか?
  • その要素にクラスを追加し、そのクラスのボタンに別の css を設定し、追加したクラスをサーバーや他のクライアントに何らかの方法でプッシュする方がよいでしょうか?
  • 他におすすめルートは？
4

2 に答える 2

5

永続的にするには、状態を切り替えるためにコレクションに設定する必要があります

クリック ハンドラの js:

Template.yourtemplate.events({
    'click #yourbutton':function(event,template) {
        var state = MyCollection.findOne({}).state
        MyCollection.update({}, {$set:{state:!state}});
    }
});

Template.yourtemplate.helpers({
    item:function() {
        return MyCollection.findOne({});
    }
});

次に、あなたのhtml：

<template name="yourtemplate">
    {{#if yourtemplate.state}}
        <div id="yourbutton">STATE 1</div>
    {{else}}
        <div id="yourbutton">STATE 0</div>
    {{/if}}
</template>

もちろん、上記は単なる例です。各ブロック ヘルパーまたは別のテンプレート ヘルパーを使用して、データを返すことができます。しかし、うまくいけば、あなたはアイデアを得るでしょう。

2 つの異なる div に対して if ステートメントを使用することをお勧めします (css クラスを使用することもできます) が、スパーク アノテーション (流星のテンプレート システム) が挿入されているため、html 属性内で if ステートメントまたはハンドルバーを使用することはお勧めしません。通常は html コメントであり、html 属性内ではうまく機能しません。

于 2013-05-08T21:09:28.437 に答える