【发布时间】：2013-02-16 07:47:34
【问题描述】：
我想知道如何让我的输入字段在单击输入按钮后提交其数据，我目前已经设置好，以便在您输入 enter 时它可以工作。
js
Messages = new Meteor.Collection('messages');
if (Meteor.is_client){
////////// Helpers for in-place editing //////////
// Returns an event_map key for attaching "ok/cancel" events to
// a text input (given by selector)
var okcancel_events = function (selector) {
return 'keyup '+selector+', keydown '+selector+', focusout '+selector;
};
// Creates an event handler for interpreting "escape", "return", and "blur"
// on a text field and calling "ok" or "cancel" callbacks.
var make_okcancel_handler = function (options) {
var ok = options.ok || function () {};
var cancel = options.cancel || function () {};
return function (evt) {
if (evt.type === "keydown" && evt.which === 27) {
// escape = cancel
cancel.call(this, evt);
} else if (evt.type === "keyup" && evt.which === 13) {
// blur/return/enter = ok/submit if non-empty
var value = String(evt.target.value || "");
if (value)
ok.call(this, value, evt);
else
cancel.call(this, evt);
}
};
};//added as test
Template.entry.events = {};
Template.entry.events[okcancel_events('#messageBox')] = make_okcancel_handler({
ok:function(text, event){
var nameEntry = document.getElementById('name');
if(nameEntry.value != ""){
var ts = Date.now() / 1000;
Messages.insert({name: nameEntry.value, message: text, time: ts});
event.target.value = "";
}//if statment ends
}
});
Template.messages.messages = function () {
return Messages.find({}, { sort: {time: -1} });
};
}
html
<head>
<title>tutorial</title>
</head>
<body>
{{> entry}}
{{> messages}}
</body>
<template name="entry">
<p>
<input type="text" id="name" placeholder="your name">
<input type="text" id="messageBox" placeholder="your message">
<input type="button" id="submit">
</p>
</template>
<template name="messages">
{{#each messages}}
{{> message}} <!--echo of message template-->
{{/each}}
</template>
<template name="message">
<p><strong>{{name}}:</strong>{{message}}</p>
</template>
该代码出现以下错误
Your app is crashing. Here's the latest log.
app/tuts.js:58
Template.messages.messages = function () {
^^^^^^^^
SyntaxError: Unexpected identifier
at /Users/anderskitson/Sites/tuts/.meteor/local/build/server/server.js:113:21
at Array.forEach (native)
at Function._.each._.forEach (/usr/local/meteor/lib/node_modules/underscore/underscore.js:79:11)
at run (/Users/anderskitson/Sites/tuts/.meteor/local/build/server/server.js:99:7)
Exited with code: 1
Your application is crashing. Waiting for file change.
我执行了以下操作，但仍然出现错误
if (Meteor.isServer) {
Template.entry.events({
'click #submit': function() {
var nameEntry = document.getElementById('name');
if(nameEntry.value != ""){
var ts = Date.now() / 1000;
Messages.insert({name: nameEntry.value, message: $('#messageBox').val(), time: ts});
}
}
}
}
错误
Your app is crashing. Here's the latest log.
app/tuts.js:57
}
^
SyntaxError: Unexpected token }
at /Users/anderskitson/Sites/tuts/.meteor/local/build/server/server.js:113:21
at Array.forEach (native)
at Function._.each._.forEach (/usr/local/meteor/lib/node_modules/underscore/underscore.js:79:11)
at run (/Users/anderskitson/Sites/tuts/.meteor/local/build/server/server.js:99:7)
Exited with code: 1
Your application is crashing. Waiting for file change.
这是整个js文件
Messages = new Meteor.Collection('messages');
if (Meteor.is_client){
////////// Helpers for in-place editing //////////
// Returns an event_map key for attaching "ok/cancel" events to
// a text input (given by selector)
var okcancel_events = function (selector) {
return 'keyup '+selector+', keydown '+selector+', focusout '+selector;
};
// Creates an event handler for interpreting "escape", "return", and "blur"
// on a text field and calling "ok" or "cancel" callbacks.
var make_okcancel_handler = function (options) {
var ok = options.ok || function () {};
var cancel = options.cancel || function () {};
return function (evt) {
if (evt.type === "keydown" && evt.which === 27) {
// escape = cancel
cancel.call(this, evt);
} else if (evt.type === "keyup" && evt.which === 13) {
// blur/return/enter = ok/submit if non-empty
var value = String(evt.target.value || "");
if (value)
ok.call(this, value, evt);
else
cancel.call(this, evt);
}
};
};//added as test
Template.entry.events = {};
Template.entry.events[okcancel_events('#messageBox')] = make_okcancel_handler({
ok:function(text, event){
var nameEntry = document.getElementById('name');
if(nameEntry.value != ""){
var ts = Date.now() / 1000;
Messages.insert({name: nameEntry.value, message: text, time: ts});
event.target.value = "";
}//if statment ends
}
});
if (Meteor.isServer) {
Template.entry.events({
'click #submit': function() {
var nameEntry = document.getElementById('name');
if(nameEntry.value != ""){
var ts = Date.now() / 1000;
Messages.insert({name: nameEntry.value, message: $('#messageBox').val(), time: ts});
}
}
});
}
Template.messages.messages = function () {
return Messages.find({}, { sort: {time: -1} });
};
}
这是整个 html 文件 教程
<body>
{{> entry}}
{{> messages}}
</body>
<template name="entry">
<p>
<input type="text" id="name" placeholder="your name">
<input type="text" id="messageBox" placeholder="your message">
<input type="button" id="submit">
</p>
</template>
<template name="messages">
{{#each messages}}
{{> message}} <!--echo of message template-->
{{/each}}
</template>
<template name="message">
<p><strong>{{name}}:</strong>{{message}}</p>
</template>
【问题讨论】：
标签： javascript button input meteor