2

私はMeteorとJavascriptを学び始め、名前の2つのリスト（「はい」リストと「いいえ」リスト）がある部分を持つアプリを作成しようとしています。ユーザーがどちらかのリストで複数のアイテムを選択し、ボタンをクリックして選択したものを反対のリストに入れ替えることができるようにしたいと思います。

私はもともとMeteorのリーダーボードの例に基づいてこのデザインを作成していましたが、それ以降、複数選択ができないことに気付きました。必要な複数選択機能に実際に対応しているわけではありません。

したがって、2つの質問：

  • これを行うために、名前の辞書に別の変数を追加して、各名前にtrueまたはfalseのいずれかの「選択された」値が含まれるようにします。次に、cssファイルからハイライトし、ユーザーが「スイッチ」ボタンをクリックしたときのイベントは、dictの要素が「selected」=Trueであるかどうかを確認するだけです。これは、この機能を実装するための優れた/実行可能な方法ですか？

  • Meteorリーダーボードの例では、Session.get、.set、および.equalを使用して「selected_player」を設定およびチェックします。Javascriptでこれらの関数を使用する必要がありますか？なぜindividual.selected=0、'if（individual.selected === 1）'などを使用できないのですか？

4

1 に答える 1

1

最初の質問に答えるには：はい、それは良いアプローチです。

SessionMeteorから提供されたリアクティブデータソースであるため、使用する必要があります。これがどのように機能するかについて詳しくは、反応性に関するドキュメントをお読みください。また、Sessionがどのように役立つかについての概要については、元のMeteorスクリーンキャストを視聴することをお勧めします。簡単に言うと、Session.getから読み取るテンプレートまたはヘルパーを作成すると、同じセッションキーが更新されるたびに、テンプレートが自動的に再レン​​ダリングされます。

たとえば、試してみるために、ボタンをクリックすると、divのクラスが選択されたものと空のクラスの間で前後にスワップする場合に使用できるコードを次に示します。

クライアントJavaScriptの場合：

Template.list.selected = function() { return Session.get("selected") ? "selected" : ""; }
Template.list.events({ "click button": function() { Session.set("selected", !Session.get("selected")); });

テンプレートの場合：

<template name="list">
  <div class="{{selected}}"></div>
  <button></button>
</template>
于 2012-12-23T19:57:53.373 に答える