我按下按钮点击创建一个流星模板:
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"]});
当我现在按下按钮时,模板会按我希望的那样显示。
问题是,如果我更新了“男人们”。集合(再次在chrome控制台中):
Guys.update({name:"james"},{$push:{messages:'my new message'}})
什么都没发生。当我再次按下按钮时,可以看到新消息。但是我希望它在用户添加消息后立即重新呈现。我做错了什么?
答案 0 :(得分:0)
看起来需要显示多个用户,每个用户都有多条消息,而按钮则是“添加新用户”。没有记录时,不显示任何记录。应显示每条记录(或帮助程序可以缩小该记录)。
首先,放弃一个想法,当你点击一个按钮时,你会对dom做点什么。在meteor中,你对数据做了一些事情,而meteor负责显示数据。
Template.main.events({
'click input': function(event)
{
Guys.insert({name:"james",messages:["hello","world","wow","cool"]});
}
});
chatfield随时准备显示记录。什么都没有显示,它是不可见的。
如果您要插入chatfield,请输入
{{>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>
这是从工作代码中提取并编辑的,但未经过测试。如果出现问题,请告诉我。