9

ユーザーがコメントをクリックして返信を表示できるように、Quora などのような展開可能な投稿コメントの階層を実装しようとしています。

この目的のために、各「コメント」テンプレート インスタンスが「展開」されているかどうかを追跡し、イベント ハンドラーで状態を切り替えたいと考えています。

スタック全体のセッション変数 (つまり、コメントごとに 1 つ) を使用してこれを行うこともできますが、任意のページに任意の数のコメントがあるため、これは扱いにくいようです。

以下は、私が現在試しているもののスニペットです。

JS:

Template.comment_item.events = {
    'click #comment-content': function( e, instance ) {
        this.expanded = true;  // also tried instance.data.expanded = true
    }
};

Template.comment_item.helpers({
    showChildComments: function(){
      this.expanded;
    }
});

HTML:

<template name="comment_item">
  <li class="comment comment-displayed" id="{{_id}}">
   <div class="comment-body">
      <div id="comment-content">
        <!-- some comment data here -->
      </div>
      {{#if showChildComments}}
      <ul class="comment-children comment-list">
          {{#each child_comments}}
            {{> comment_item}}
          {{/each}}
      </ul>
      {{/if}}
    </div>
  </li>
</template>

残念ながら、ステップスルーすると、showChildComments ヘルパーで、テンプレート インスタンスが展開された変数を認識できないようです。ドキュメントで、instance.data はイベント マップで読み取り専用であると書かれていることに気付きました。

イベント マップ内のテンプレート インスタンスを直接変更する方法はありますか?

4

2 に答える 2

10

作成されたイベント ハンドラー内で、テンプレート インスタンスのプロパティを作成できます。また、イベント マップ関数の第 2 引数としてテンプレート インスタンスにアクセスできます。

Template.comment_item.created = function() {
  this.showChildren = false;
};

Template.comment_item.events({
  'click .comment-content': function(event, template) {
    template.showChildren = true;
  }
});

でも：

  1. テンプレート ヘルパー内からテンプレート インスタンスとそのプロパティにアクセスすることはできません。
  2. テンプレートヘルパーには、その場で変更できるように、とにかく「リアクティブ」なデータソースを与える必要があります。
  3. 独自のリアクティブ データ ソースを作成する手間をかけたとしても、この機能へのアプローチでは、ページ上の X 量のコメントに対して X 量の変数が作成されます。これは、1 つの機能を実装するためにメモリ内に保持しなければならない非常に多くの変数のように思えます。

代わりに、テンプレートを次のように単純化することをお勧めします。

<template name="comment_item">
  <li class="comment comment-displayed" id="{{_id}}">
   <div class="comment-body">
      <div class="comment-content">  <!-- changed this to a class -->
        <!-- some comment data here -->
      </div>
    </div>
  </li>
</template>

次に、イベント ハンドラーのコメント本文に子コメントをプログラムで追加します。Meteor のドキュメントの次の点に注意してください。

として宣言した<template name="foo"> ... </template> テンプレートは、呼び出されたときに HTML の文字列を返す関数 Template.foo としてアクセスできます。

ああ、コンテキストを JSON オブジェクトとしてテンプレート関数に渡します。例えば：

var context = {_id: comment_id, text: "Comment text!"};
Template.comment_item(context);
于 2013-03-29T19:14:17.957 に答える
7

アップデート：

Meteorでは、 を使用してヘルパー内からテンプレート インスタンスにアクセスできるようになりましたTemplate.instance()。実際、これはテンプレートの再利用性を高める優れた方法です。

以下のサンプル ソースは、Percolate Studio の David Burles が作成したこの記事からのものです。

Template.hello.created = function () {
  // counter starts at 0
  this.state = new ReactiveDict();
  this.state.set('counter', 0);
}; 

Template.hello.helpers({
  counter: function () {
    return Template.instance().state.get('counter');
  }
});

Template.hello.events({
  'click button': function (event, template) {
    // increment the counter when button is clicked
    template.state.set('counter', template.state.get('counter') + 1);
  }
});

この記事は、なぜこのアプローチが必要なのかを説明する素晴らしい仕事をしています。

テンプレート インスタンスに情報を格納する利点は、テンプレートのモジュール化を進め、使用場所への依存度を下げることができることです。

于 2015-02-21T01:13:26.260 に答える