2

meteor の Todos の例をいじって、それがどのように機能するかを学び、クリックするとタイトルの下に表示される Todo 項目に説明を追加しようとしています。「クリックしたとき」の部分が困っています。サーバー側を反映せずに、ブール値の「表示」変数をクライアント側の各 Todo アイテムに追加する方法を見つけようとしています。明らかに、1 人のユーザーがアイテムを表示している場合、すべてのユーザーがそのアイテムを表示したいとは限りません。表示されている Todo ID のリストであるクライアントのみのコレクションを追加することで基本的な実装を行い、次のコードをテンプレートに使用して、考えが表示されているかどうかを確認しました。

Template.todo_item.viewing = function () {
    return Viewing_Todos.find({title: this.title}).count() > 0;
};

ただし、これは実際には理想的なソリューションではありません。前述したように、各 todo アイテムにクライアント側のブール変数を使用して、それが表示されているかどうかを示したいと思います。

これを次のように変更してみました。

Template.todo_item.viewing = false;

そして、私のクリックイベントは次のとおりでした：

'click .todo-description': function(event) {
   event.target.viewing = !event.target.viewing;
}

「event.target.viewing」が何であるかを確認するためにコンソール ログ出力を追加したところ、正しく更新されているように見えましたが、Handlebars は動的に DOM を更新して、アイテムが「閲覧中」状態であることを反映しなくなりました。

ハンドルバーの HTML は次のとおりです。

      {{#if viewing}}<br/>
      <div class="todo-description">
          {{text}}
      </div>
      {{/if}}

私はヘルパーでそれをしなければならないかもしれないと思ったので、次のことを試しました：

Template.todo_item.helpers({
    viewing: false;
});

しかし、それもまったく機能していないようです。

助けてくれてありがとう！私は Web 開発全般についてかなりの初心者ですが、今のところ Meteor が大好きです。

4

2 に答える 2

1

これには、別のクライアント側データベースを用意する必要はまったくありません。一般に、UI の状態を制御したい場合で、「表示」が完璧な例である場合は、Meteor セッション変数を設定できます。コードは次のようになります。

// Click event
'click .todo-description': function (event, templ) {
    Session.set('viewing-todo', templ._id); // We're now viewing todo with id=_id
}

// Are they viewing a todo?
if (Session.get('viewing-todo')) // ...

// Or perhaps they're viewing "foobla" todo?
if (Session.equals('viewing-todo', 'fooblaId')) // ...

ただし、すべての todo アイテムに個別の「表示」フラグを設定したい場合 (一度に複数のアイテムを表示できるようにする場合)、各 todo 要素にdata-* 属性を追加してみてください。これは、 jQuery データ メソッドを使用すると簡単に実行できます。コードは次のようになります。

// Click event
'click .todo-description': function (event, templ) {
    $(event.target).data('viewing', true);
}

// Are they viewing a todo?
if ($('#todoElement').data('viewing')) //...
于 2013-11-03T20:17:20.130 に答える
1

次のようなセッション変数を使用する必要があります。

Template.todo_item.created=function(){
    Session.set(this.data._id+"-viewing",false);
};

Template.todo_item.helpers({
    viewing:function(){
        return Session.get(this._id+"-viewing");
    }
});

Template.todo_item.events({
    "click .todo-description":function(event,template){
        var viewing=Session.get("-viewing");
        Session.set(template.data._id+"-viewing",!viewing);
    }
});

このコードは、todo_item テンプレート データ コンテキストが、独自の一意の _id を持つ有効な Todos ドキュメントであることを前提としています。

この _id を使用して、アイテムの現在の表示状態をリアクティブに保存する一意のセッション変数に名前を付けます。この変数が変更されるたびに、テンプレートが再レンダリングされます。

データ コンテキストへのアクセス方法が異なることに注意してください。

  • 作成/レンダリング/破棄されたコールバックでは、「this」はテンプレート インスタンスにバインドされ、data プロパティ (this.data) を使用してデータ コンテキストにアクセスできます。

  • テンプレート ヘルパーでは、"this" はデータ コンテキストに直接バインドされます。

  • イベント ハンドラーでは、パラメーターを介してテンプレート インスタンスにアクセスできるため、もう一度データ プロパティ (template.data._id) を使用できます。

Meteor の将来のバージョンでは、テンプレートに独自のスコープ付きセッション変数があり、うまくいけば、この手法の実装がはるかに簡単になります。

于 2013-11-03T19:55:18.183 に答える