4

Meteor に {{# each}} バインディングがあり、#each 内のテンプレートの 1 つのインスタンスのみでプロパティを更新したい場合。どうすればいいですか？イベント マップ内の「テンプレート」オブジェクトに値を設定しようとしましたが、反応しないようです。また、Session プロパティにバインドしようとしましたが、それにより、必要なインスタンスだけでなく、すべてのインスタンスが更新されます...

例えば：

{{#each dates}}
    {{> dateTemplate}}
{{/each}}

<template name="dateTemplate">
    {{date}}
    <span style="color: red;">{{errorMsg}}</span> <--- how do i update errorMsg?
</template>

Template.dateTemplate.events({
    'click': function(event, template) {
        template.errorMsg = 'not valid'; <--- this doesn't do anything
    }
});

以下の回答を編集してください:

Template.dateTemplate.events({
    'click': function(event, template) {
        template.errorMsg = function() { return 'not valid';} <--- this also doesn't do anything
    }
});
4

3 に答える 3

1

テンプレートの各インスタンスに異なるリアクティブ オブジェクトを渡すことで、これを処理しようとしています。その後、テンプレートはリアクティブ オブジェクト (インスタンスごとに一意) にバインドでき、余分なボイラープレートはありません。

最終的には次のようになります。

初期レンダリング:

Template.firstTemplateWithPoll(ContextProvider.getContext())
Template.secondTemplateWithPoll(ContextProvider.getContext())
// (I actually pass getContext an identifier so I always get the same context for the same template)

JS:

Template.poll.events = {
    'click .yes' : function() {
        this.reactive.set('selection', 'yes');
    },

    'click .no' : function() {
        this.reactive.set('selection', 'no');
    }
};

Template.poll.selection = function(arg) {
    return this.reactive.get('selection');
}

テンプレート：

<template name="poll">
    <blockquote>
        <p>
            Your selection on this poll is {{selection}}
        </p>
    </blockquote>
    <button class='yes'>YES</button>
    <button class='no'>NO</button>
</template>
于 2013-05-27T16:13:30.927 に答える
1

これにはハンドルバーを使用する必要はありません。メッセージを渡すために反応性を必要とするものではないため、反応変数は db データ、または無線で別のクライアントによって更新されるデータで最適に機能します。

JQuery (デフォルトで含まれています) を使用して更新することもできますが、少し手の込んだものにすることもできます。

<template name="dateTemplate">
    {{date}}
    <span style="color: red;display: none" class="errorMessage"></span>
</template>

Template.dateTemplate.events({
    'click': function(event, template) {
        $(template.find('.errorMessage')).html('Your Error Message').slideDown();
    }
});

エラーがデフォルトで非表示になり、アニメーションでスライドダウンするように編集しました

于 2013-02-08T07:15:51.723 に答える
0

template.errorMsgエラーを返す関数にする必要があります。

Template.dateTemplate.events({
    'click': function(event, template) {
        template.errorMsg = function() { return 'not valid'; };
    }
});
于 2013-02-08T10:59:32.113 に答える