コメントへの返信オプションを作成しようとしています。現在、テキスト領域のある入力フィールドがあり、送信すると名前とコメントが画面に出力されます。これで、2番目の入力とテキストエリアを作成しました。これらの入力とテキストエリアは、後で画面に印刷するのが理想的です。画面に表示されている名前とコメントの横にある返信ボタンをクリックすると、テキストエリアがポップアップ表示されます。しかし、現在私が働きたいのは、画面に何かを印刷するための2番目の入力およびテキスト領域だけです。{{> message1}}基本的に前のコードをコピーし、変数と関数の名前を変更して、それらの後に1を追加しましたが、機能しなくなり、本文に追加した時点で壊れます。ページには何も表示されません。こちらがライブサイトへのリンクですhttp://tuts.meteor.com
これが私が使っているコードです
HTML
<head>
<title>tutorial</title>
</head>
<body>
{{> messages}}
{{> entry}}
{{> entry1}}
</body>
<template name="messages">
{{#each messages}}
<!--echo of message template-->
{{> message}}
{{/each}}
</template>
<template name="message">
<p><strong>{{name}}:</strong>{{message}}</p>
</template>
<template name="entry">
<p><input type="text" id="name" placeholder="your name"></p>
<p><textarea type="text" id="messageBox" placeholder="your message"></textarea></p>
<p><input type="button" id="submit" value="submit"></p>
</template>
<template name="messages1">
{{#each messages1}}
<!--echo of message template-->
{{> message1}}
<a href="#">reply</a>
{{/each}}
</template>
<template name="message1">
<p><strong>{{name}}:</strong>{{message1}}</p>
</template>
<template name="entry1">
<p><input type="text" id="name1" placeholder="your name"></p>
<p><textarea type="text" id="messageBox1" placeholder="your message"></textarea></p>
<input type="button" id="submit1" value="submit">
</p>
</template>
JAVASCRIPT
Messages = new Meteor.Collection('messages');
Messages1 = new Meteor.Collection('messages1');
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.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.entry.events['click #submit1'] = function() {
var nameEntry1 = document.getElementById('name1');
if(nameEntry1.value != ""){
var ts = Date.now() / 1000;
Messages1.insert({name: nameEntry1.value, message1: $('#messageBox1').val(), time: ts});
}
}
Template.messages1.messages1 = function () {
return Messages1.find({}, { sort: {time: -1} });
};
Template.messages.messages = function () {
return Messages.find({}, { sort: {time: -1} });
};
}