在流星的聊天机器人响应后，滚动到聊天的底部

我正在用流星构建一个简单的聊天机器人应用程序。当用户发送文本消息时，文本被转发到我的chatbot api。当我收到来自请求的回复时，我想滚动到我的聊天室底部。在流星的聊天机器人响应后，滚动到聊天的底部

我发现计算器这样的回答：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：

<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>

与它的CSS部分：

#messages { 
    height: 500px; 
    overflow-y: scroll; 
}

来源

2016-11-20 Adrian Krebs

我认为，如果你移动你的回调函数：

const callback = function() { 
    let messages = document.getElementById('messages'); 
    setTimeout(() => { 
     messages.scrollTop = messages.scrollHeight; 
    }, 300); 
}

要通过集合时更新运行的helper方法被调用，然后你就可以与呼叫免除您做出后，插入，因为它会运行更新集合的人。在做这件事的时候，你可能想给它一个比“回调”更好的名字

来源

2016-11-20 11:47:39 Mikkel

在流星的聊天机器人响应后，滚动到聊天的底部

回答

相关问题