javascript - Rails Action Cable 在消息发布后向下滚动

Question

我配置了 Action 电缆，现在我想使用以下js函数

$('.scroll-bar').scrollTop(row);

提交消息后向下滚动聊天

所以我尝试将之前的代码包含在 app/assets/channels/messages.js 中和app/assets/javascripts/room.js .

问题是直到我执行app/assets/channels/messages.js之后html 没有那么新 <p></p>已附加标签。

App.messages = App.cable.subscriptions.create('MessagesChannel', {  
  received: function(data) {
    $("#messages").removeClass('hidden')
    return $('#messages').append(this.renderMessage(data));
  },
  renderMessage: function(data) {
    return "<p> <b>" + data.user + ": </b>" + data.message + "</p>";
  }
});

这是我的聊天消息，我无法运行.scrollTop(row)在不存在的行上。

我测试了 <p>标签添加在 messages.js 之后.

我找到了一个临时解决方案来解决这个问题，通过评论 return $('#messages').append(this.renderMessage(data)); 的 return并在.scrollTop(row)之后调用方法。该解决方案有效，但这样只有 html 被附加到页面，而没有 <p>标签..不知何故renderMessage无法正常工作。

我可以提供任何信息

非常感谢法布里齐奥·贝尔托利奥

Answer 1

这是我的临时解决方案，无法正常工作，因为这样我不会附加 <p>标签，但只是文本。

基本上就像这样，我只是附加 html 而没有 "<p> <b>" + data.user + ": </b>" + data.message + "</p>"

从下图可以看出，这条消息并不在 <p> 内标签。

这就是我所做的，我评论了返回执行.scrollTop() $('#messages').append(this.renderMessage(data)) 之后的功能;

app/assets/channels/messages.js

App.messages = App.cable.subscriptions.create('MessagesChannel', {  
  received: function(data) {
    $("#messages").removeClass('hidden');
    $('#messages').append(this.renderMessage(data));
    height = $('.scroll-bar')[0].scrollHeight;
    $('.scroll-bar').scrollTop(height);
    /*return $('#messages').append(this.renderMessage(data));*/
  },
  renderMessage: function(data) {
    return "<p> <b>" + data.user + ": </b>" + data.message + "</p>";
  }
});

我认为解决方案是 hear ，从这篇文章中我遵循执行操作电缆，我不明白谁直接调用received: function(data) {}

是回调方法吗subscribed里面messages_channel.rb ？

class MessagesChannel < ApplicationCable::Channel 
    def subscribed
        stream_from 'messages'
    end 
end  

我不清楚这是怎么回事 callback方法正在调用另一个方法以及应用程序流程如何。

Heroku Action Cable