我刚刚开始尝试使用Meteor,我注意到如果我在页面上有2个表单,它似乎只处理一个事件。我必须分离需要在同一页面上的表单,一个嵌套在另一个模板中。现在嵌套表单将提交并且事件将触发,但composeMessageForm事件将永远不会触发。我之前遇到过另一个我正在尝试的项目。
这是主要的.js文件:(我也知道第一个事件中可能存在错误,我只是永远无法触发事件,所以我可以解决它。)
Template.inbox.events({
"submit .composeMessageForm": function(event) {
var to = event.target.to.value;
var text = event.target.message.value;
alert(to);
if($.trim(text) != '' && $.trim(to) != '')
{
var foundUser = Users.findOne({username: to});
if(foundUser)
{
if(!Conversations.find({from: username, to:foundUser.username}))
{
var c = Conversations.insert({
from: username,
to: foundUser.username,
createdAt: new Date()
});
if(c)
{
Messages.insert({
conversationId: c._id,
from: username,
text: text,
sentAt: new Date()
});
}
}
else
{
console.log("Can't recreate conversations!");
}
}
else
{
alert("No such user exists.");
}
}
event.target.to.value = "";
event.target.text.value = "";
return false;
}
});
Template.inbox.helpers({
conversations: function() {
return Conversations.find({$or: [{from: username}, {to: username}]});
}
});
Template.conversation.events({
"submit .newMessageForm": function(event)
{
var conversationId = event.target.conversationId.value;
var text = event.target.text.value;
if($.trim(text) != '')
{
Messages.insert({
conversationId: conversationId,
text: text,
from: username,
sentAt: new Date()
});
}
event.target.text.value = "";
return false;
}
});
这是模板:
<template name="inbox">
<div class="composeMessage" style="margin-bottom:15px;">
<form class="composeMessageForm">
<input type="text" name="to" placeholder="Username" />
<input type="text" name="message" placeholder="Message..." />
</form>
</div>
<div class="inbox">
{{#each conversations}}
{{> conversation}}
{{/each}}
</div>
</template>
<template name="conversation">
<div class="conversation" id="conversationId-{{_id}}">
{{#if equals currentUser.username from}}
<strong>{{to}}</strong><br /><br />
{{else}}
<strong>{{from}}</strong><br /><br />
{{/if}}
<div class="messages">
{{#each findMessagesForConversation ./_id}}
<div>{{from}}: {{text}}
<i>Sent {{formatDateSince sentAt}} ago.</i>
</div>
{{/each}}
</div>
<div class="newMessage">
<form class="newMessageForm">
<input type="text" name="text" placeholder="Message here..." />
<input type="hidden" value="{{./_id}}" name="conversationId" />
</form>
</div>
</div>
</template>
所以我似乎已经通过在表单中放置一个提交按钮将其破解为工作,但随后隐藏了它的可见性,以便您无法看到它。