Question

在javascripts/channels中，我有这个messages.js文件，它具有两个功能-1）用于将数据追加到视图，清除表单并确保div向下滚动以显示最近发送的文件消息，以及2）消息内容的助手。

文件如下：

App.messages = App.cable.subscriptions.create('MessagesChannel', {
 received: function(data) {
  $("#response").val("");
  $("#conversation-main").scrollTop($("#conversation-main")[0].scrollHeight);
  return $('#messages').append(this.renderMessage(data));
 },

 renderMessage: function(data) {
  return "<div class='message'><div><strong>" + data.user + ":</strong> " + data.body + "</div><div class='date'>" + data.time + "</div></div>"
 }
});

我的问题是邮件被附加了，但是scrollTop没有被执行。为什么是这样？另外-如果我将此文件更改为js.erb并使用simple_format帮助器，将完全阻止附加。数据仍然保持不变，并发送和接收websockets订阅，但是视图不会随着div底部追加的新消息而更新。我应该在其他地方定义这种行为吗？该视图如下所示：

<div class="column">
 <div class="conversation" id="conversation-main">
  <div id="conversation-body" data-conversation-id="<%= @conversation.id %>">
   <div id="messages">
    <% @messages.each do |message| %>
     <% if message.body %>
      <%= render "message", message: message %>
     <% end %>
    <% end %>
   </div>
  </div>
 </div>
</div>

<div class="column">
 <div class="ui form"> 
  <%= form_for [@conversation, @message], remote: true do |f| %>
   <div class="field">
    <%= f.label :message %>
    <%= f.text_area :body, placeholder: "Your message", id:"response" %>
   </div>
   <%= f.submit "Submit" %>
  <% end %>
 </div>
</div>

Answer 1

在scrollTop之后，您要附加邮件。尝试做

App.messages = App.cable.subscriptions.create('MessagesChannel', {
 received: function(data) {
  $("#response").val("");
  $('#messages').append(this.renderMessage(data));
  $("#conversation-main").scrollTop($("#conversation-main")[0].scrollHeight);
 },

 renderMessage: function(data) {
  return "<div class='message'><div><strong>" + data.user + ":</strong> " + data.body + "</div><div class='date'>" + data.time + "</div></div>"
 }
});

我不认为您需要退出第一个函数。但是，您绝对需要知道div的高度（包括最新消息），以便在输入消息后看到滚动到div末尾的内容。

使用Rails ActionCable创建实时聊天，但是.scrollTop jQuery无法正常工作

1 个答案: