7

私は単純な流星のフラッシュ カード アプリケーションに取り組んでいます。各質問のコレクションがあります: text、right_answer、wrong_answers。

回答は配列に連結されてシャッフルされ、テンプレートは質問と可能な回答をレイアウトします。ユーザーが回答をクリックすると、イベントから JS で親データ コンテキストを取得する方法を教えてください。

何かのようなもの：

<button type="button" question="{{../_id}}" class="btn btn-default answer">
{{this}} {{#with ../this}}{{this._id}}{{/with}}
</button>

テンプレートに親の質問 ID を表示するように機能しますが、これを適切に行うにはどうすればよいですか。目標は、イベントを取得し、答えを "right_answer" と比較して等しいかどうかを判断し、それが機能する場合にポイントを与える関数を用意することです。ありがとう！

最終的にこの解決策を思いつきましたが、私はそれがあまり好きではないか、正しいとは思いません:

{{each}}
    {{#with ../this}}
        <button type="button" question="{{../_id}}" class="btn btn-default answer">X</span></button>     
    {{/with}}
    {{this}}
{{/each}}
4

2 に答える 2

6

私は通常、次のようなことをします：

Template.myTemplate.answers = function () {
    var self = this;
    // assume that this.answers is a list of possible answers
    return _.map(this.answers, function (answer) {
         return _.extend(answer, {
             questionId: self._id,
         });
    });
}

次に、テンプレートで次のようなことができます。

<template name="myTemplate">
    {{#each answers}}
        <button data-question="questionId">...</button>
    {{/each}}
</template>

ところで：question要素に属性を使用するhtmlことは、標準によれば正しくないことに注意してください。カスタムタグには常に接頭辞を付ける必要がありますdata-。

また、次のようにイベントをテンプレートに添付すると、次のようになります。

Template.myTemplate.events({
   'click button': function (event, template) {
       // ...
   },
});

次に、イベント コールバックで にアクセスできます。これは、要素がレンダリングされthisたコンテキストを表し、テンプレート インスタンスにアタッチされたデータ コンテキストであるため、実際には、これは多かれ少なかれ「親コンテキスト」です。buttontemplate.data

編集

新しいテンプレート エンジン、つまりblazeでは、テンプレートでドット表記を使用できるため、上記の方法は不要になり、{{../_id}}まったく問題ありません。

于 2013-10-29T09:29:12.033 に答える
5

Template.parentData(n)イベント ハンドラーで アクセスできます: http://docs.meteor.com/#/full/template_parentdata

于 2014-11-17T00:45:43.427 に答える