发布消息后，Rails Action Cable 向下滚动

Question

我配置了action cable，现在想用下面的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)); 的返回并在 .scrollTop(row) 方法之后调用。该解决方案有效，但这种方式仅将 html 附加到没有 <p> 标记的页面。不知何故，renderMessage 无法正常工作。

我可以提供任何信息

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

Answer 1

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

基本上就像这样，我只是在不附加 html 的情况下 "<p> <b>" + data.user + ": </b>" + data.message + "</p>"

从下图中可以看出消息不在<p>标签内。

这就是我所做的，我在$('#messages').append(this.renderMessage(data))之后注释了执行.scrollTop()函数的返回；

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) {}

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

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

我不清楚这个callback 方法是如何调用另一个方法的，以及应用程序的流程如何。

Heroku Action Cable