单击按钮刷新 Meteor 页面
Meteor Page Refreshing with Button Click
我在这里遵循了一些代码:
http://code.tutsplus.com/tutorials/real-time-messaging-for-meteor-with-meteor-streams--net-33409
构建一个聊天应用程序。我想添加另一个文本输入框,它也将项目发送到聊天框,但每当我按下另一个按钮时,就会创建一个。
也就是说一个聊天框有两个输入框。
当我按下一个按钮时它起作用,当我按下另一个按钮时它刷新页面并删除聊天框中之前的所有内容。任何帮助都是极好的。
<!-- Chat Box with chat messages and the input box -->
<template name='chatBox'>
<div id='messages'>
{{#each messages}}
{{>chatMessage}}
{{/each}}
</div>
<textarea id='chat-message'></textarea><br>
<button class='btn btn-primary' id='send'>Send Chat</button>
</template>
<!-- Template for the individual chat message -->
<template name='chatMessage'>
<div>
<b>{{user}}:</b> {{message}}
</div>
</template>
<template name="solBox">
<h3>Your problem is:</h3>
<strong>Write a structure definition in racket for a <em>vector</em> with fields <em>x</em> and <em>y</em>.</strong>
<br>
<br>
<form class="solution">
Solution:
<textarea id='solText'></textarea>
<button class='btn btn-primary' id='solve'>Send Solution</button>
</form>
</template>
//assign collection to the messages helper in chatBox template
Template.chatBox.helpers({
"messages": function(){
return chatCollection.find();
}
});
//generate a value for the 'user' helper in chatMEssage template
Template.chatMessage.helpers({
"user": function(){
if(this.userId == 'me'){
return this.userId;
} else if (this.userId){
getUsername(this.userId);
return Session.get('user-' + this.userId);
} else {
return 'anonymous-' + this.subscriptionId;
}
}
});
//When send chat is clicked add the typed chat message into the collection
Template.chatBox.events({
"click #send": function(){
var message = $('#chat-message').val();
console.log(message);
chatCollection.insert({
userId: 'me',
message: message
});
$('#chat-message').val('');
//add the message to the stream
chatStream.emit('chat', message);
}
});
//Solutionbox stuff
Template.solBox.helpers({
"messages": function(){
return chatCollection.find();
}
});
Template.solBox.events({
"click #solve": function() {
var solution = $('#solText').val();
console.log(solution);
chatCollection.insert({
userId: 'me',
message: solution
});
$('#solText').val('');
solStream.emit('sol', solution);
}
});
chatStream.on('chat', function(message){
console.log(message + "on");
chatCollection.insert({
userId: this.userId, //get the userId of the sender
subscriptionId: this.subscriptionId, //subscription id of the sender
message: message
});
});
solStream.on('sol', function(solution){
console.log(solution + "on");
chatCollection.insert({
userId: this.userId, //get the userId of the sender
subscriptionId: this.subscriptionId, //subscription id of the sender
message: solution
});
});
当您单击表单内的按钮时,浏览器的默认行为是提交表单,这会引发另一个 HTTP 请求并重新加载页面。为了避免这种情况,您的事件处理程序需要明确阻止默认行为:
Template.solBox.events({
'click #solve': function(e) {
e.preventDefault();
// the rest of your code goes here
}
});
我在这里遵循了一些代码: http://code.tutsplus.com/tutorials/real-time-messaging-for-meteor-with-meteor-streams--net-33409
构建一个聊天应用程序。我想添加另一个文本输入框,它也将项目发送到聊天框,但每当我按下另一个按钮时,就会创建一个。 也就是说一个聊天框有两个输入框。
当我按下一个按钮时它起作用,当我按下另一个按钮时它刷新页面并删除聊天框中之前的所有内容。任何帮助都是极好的。
<!-- Chat Box with chat messages and the input box -->
<template name='chatBox'>
<div id='messages'>
{{#each messages}}
{{>chatMessage}}
{{/each}}
</div>
<textarea id='chat-message'></textarea><br>
<button class='btn btn-primary' id='send'>Send Chat</button>
</template>
<!-- Template for the individual chat message -->
<template name='chatMessage'>
<div>
<b>{{user}}:</b> {{message}}
</div>
</template>
<template name="solBox">
<h3>Your problem is:</h3>
<strong>Write a structure definition in racket for a <em>vector</em> with fields <em>x</em> and <em>y</em>.</strong>
<br>
<br>
<form class="solution">
Solution:
<textarea id='solText'></textarea>
<button class='btn btn-primary' id='solve'>Send Solution</button>
</form>
</template>
//assign collection to the messages helper in chatBox template
Template.chatBox.helpers({
"messages": function(){
return chatCollection.find();
}
});
//generate a value for the 'user' helper in chatMEssage template
Template.chatMessage.helpers({
"user": function(){
if(this.userId == 'me'){
return this.userId;
} else if (this.userId){
getUsername(this.userId);
return Session.get('user-' + this.userId);
} else {
return 'anonymous-' + this.subscriptionId;
}
}
});
//When send chat is clicked add the typed chat message into the collection
Template.chatBox.events({
"click #send": function(){
var message = $('#chat-message').val();
console.log(message);
chatCollection.insert({
userId: 'me',
message: message
});
$('#chat-message').val('');
//add the message to the stream
chatStream.emit('chat', message);
}
});
//Solutionbox stuff
Template.solBox.helpers({
"messages": function(){
return chatCollection.find();
}
});
Template.solBox.events({
"click #solve": function() {
var solution = $('#solText').val();
console.log(solution);
chatCollection.insert({
userId: 'me',
message: solution
});
$('#solText').val('');
solStream.emit('sol', solution);
}
});
chatStream.on('chat', function(message){
console.log(message + "on");
chatCollection.insert({
userId: this.userId, //get the userId of the sender
subscriptionId: this.subscriptionId, //subscription id of the sender
message: message
});
});
solStream.on('sol', function(solution){
console.log(solution + "on");
chatCollection.insert({
userId: this.userId, //get the userId of the sender
subscriptionId: this.subscriptionId, //subscription id of the sender
message: solution
});
});
当您单击表单内的按钮时,浏览器的默认行为是提交表单,这会引发另一个 HTTP 请求并重新加载页面。为了避免这种情况,您的事件处理程序需要明确阻止默认行为:
Template.solBox.events({
'click #solve': function(e) {
e.preventDefault();
// the rest of your code goes here
}
});