流星模板不更新答案

【问题标题】：meteor template not updating流星模板不更新
【发布时间】：2013-09-17 22:42:54
【问题描述】：

我在按钮点击时创建一个流星模板，如下所示：

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”集合（再次在 chrome 控制台中）：

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

什么都没有发生。当我再次按下按钮时，新消息可见。但我希望它在用户添加消息后立即重新呈现。我做错了什么？

【问题讨论】：

标签： javascript templates meteor live

【解决方案1】：

看起来需要显示多个用户，每个用户都有多条消息，并且按钮有点像“添加新用户”。如果没有记录，则不应显示任何记录。每条记录都应该显示（或者助手可以缩小范围）。

首先，放弃当你点击一个按钮时，你会对 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>

这是从工作代码中提取和编辑的，但未经测试。如果出现问题，请告诉我。

【讨论】：