0

ボタンをクリックすると、次のように流星テンプレートを作成します。

Template.main.events({
    'click input': function(event)
    {
        var templateInstance = Meteor.render(Template.chatfield({name:"james"}));
        document.body.appendChild(templateInstance);
    }
});

これにより、ユーザーからのチャット メッセージで満たされたテンプレートが作成されます。

このテンプレートで .created メソッドも使用します。

Template.chatfield.created = function()
{
    var theData = this.data;
    Template.chatfield.users = function()
    {
        return Guys.find({name:theData.name});
    }
}

テンプレートの html コードは次のようになります。

<template name="chatfield">
    <div id="messages">
        {{#each users}}
        {{#each messages}}
            <p>{{this}}</p>
            <br>
        {{else}}
            <p>No messages inner yet.</p>
        {{/each}}

        {{else}}
            <p>No messages yet.</p>
        {{/each}}
    </div>
</template>

たとえば、Chrome コンソールで次のように記述するだけで、ユーザーをコレクションに追加します。

Guys.insert({name:"james",messages:["hello","world","wow","cool"]});

ボタンを押すと、希望どおりにテンプレートが表示されます。

問題は、「Guys」コレクションを更新すると（再びクロムコンソールで）：

Guys.update({name:"james"},{$push:{messages:'my new message'}})

何も起こりません。ボタンをもう一度押すと、新しいメッセージが表示されます。しかし、ユーザーがメッセージを追加するとすぐに再レンダリングしたい. 私は何を間違っていますか？

4

1 に答える 1

0

それぞれ複数のメッセージを持つ複数のユーザーを表示する必要があり、ボタンは「新しいユーザーの追加」のようなものです。レコードがない場合は、何も表示されません。各レコードが表示されます (または、ヘルパーがそれを絞り込むことができます)。

まず、ボタンをクリックすると DOM に対して何かが行われるという考えを捨ててください。meteor では、データに対して何かを行うと、meteor がそれを表示します。

Template.main.events({
    'click input': function(event)
    {
        Guys.insert({name:"james",messages:["hello","world","wow","cool"]});
    }
});

チャットフィールドはいつでもレコードを表示する準備ができています. 表示するものがない場合は、非表示です。

チャットフィールドを挿入する場所に、

{{>chatarea}}

ヘルパー

Template.chatarea.messageList = function() {
    return this.messages;
}
Template.chatarea.guys = function() {
        return Guys.find()
}

テンプレート

<template name="chatarea">

  {{#each guys}}
    <div class="user">
        <p>{{name}}</p>

        <div id="messages">
      {{#if messageList}}
        {{#each messageList}}
            <div class="message">
                <p>  i know you are but what am i? </p>
            </div>
        {{/each}}  
      {{else}}
            <p>No messages yet. whazzzuppp?</p>
      {{/if}}
        </div>
    </div>
  {{/each}}

</template>

これは作業コードから抽出され、編集されていますが、テストされていません。何か失敗した場合はお知らせください。

于 2013-09-13T19:19:22.627 に答える