0
私は流星で単純なチャットボットアプリを構築しています。ユーザーがテキストメッセージを送信すると、そのテキストは私のchatbot APIに転送されます。リクエストから応答が返ってきたら、私はチャットの一番下までスクロールしたい。流星の中のチャットボットからの応答の後にチャットの下にスクロール
私はStackOverflowの上でこの答えを見つけました：How do I scroll to the bottom of a div as data is added in Meteor?
ユーザーは、メッセージのスクロール作品を送信しますが、できるだけ早く私は戻って私のチャットボットからの応答を得るよう、スクロールバーはもう一番下にない場合。応答の挿入が完了するまで待つ必要がありますか？
私には何が欠けていますか？
ユーザーは、新しいメッセージが追加されています。
：Template.chat.events({
'submit .new-message'(event) {
// Prevent default browser form submit
event.preventDefault();
// Get value from form element
const target = event.target;
const text = target.text.value;
const chatId = FlowRouter.getParam("chatId");
// Insert a task into the collection
const callback = function() {
let messages = document.getElementById('messages');
setTimeout(() => {
messages.scrollTop = messages.scrollHeight;
}, 300);
}
Meteor.call('messages.insert', text, chatId,callback);
// Clear form
target.text.value = '';
}
});
そして、ここでは、私は、ユーザー入力を処理し、（一番下までスクロールし、コレクションへの応答を挿入）に応じて応答するために私のチャットボットAPIを呼び出す部分であります
Meteor.methods({
'messages.insert'(text, chatId, callback) {
check(text, String);
Messages.insert({
text,
chatId,
user: true,
createdAt: new Date()
});
let options = {
sessionId: chatId
};
let request = app.textRequest(text, options);
request.on('response', Meteor.bindEnvironment(function (response, errror) {
text = response.result.fulfillment.speech + '<br><br><button class="js-yes">Ja</button><button class="js-no">Nein</nein>';
Messages.insert({
text,
chatId,
user: false,
createdAt: new Date()
});
callback();
}, function (error) {
console.log(error);
}));
request.end();
}
});
、ここでのhtml：そのCSSの一部と
<template name="chat">
<ul id="messages">
{{#each messages}}
{{> message}}
{{/each}}
</ul>
<form class="new-message">
<input type="text" name="text" autocomplete="off" placeholder="Write a new message" />
</form>
</template>
：
#messages {
height: 500px;
overflow-y: scroll;
}