Rails 消息发布后动作电缆向下滚动

Question

我配置了action cable，现在想用下面的js函数

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

提交消息后向下滚动聊天

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

问题是在我执行 app/assets/channels/messages.js 之后，html 没有附加新的  标签。

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) 上一行还不存在。

我测试了  标签添加在 messages.js 之后。

我找到了解决此问题的临时解决方案，方法是从 return $('#messages').append(this.renderMessage(data)); 注释 return 并在 .scrollTop(row) 方法之后调用。该解决方案有效，但这种方式只有 html 附加到没有  标签的页面。不知何故 renderMessage 无法正常工作。

我可以提供任何信息

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

Answer 1

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

基本上是这样的，我只是附加 html 而没有 " " + data.user + ": " + data.message + ""

从下图中可以看出，消息不在个标签内。

这是我做的，我注释掉return在$('#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，从这个post我跟着来实现action cable，我不明白谁在直接调用received: function(data) {}

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

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

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

Heroku Action Cable

Rails 消息发布后动作电缆向下滚动

Rails Action Cable scroll down after message posting

javascript

jquery

ruby-on-rails

ruby-on-rails-5

actioncable