Railsのアクションケーブル

Question

の投稿メッセージの後にスクロールダウンし、私は今、私がメッセージ

を提出した後、チャットを下にスクロールする機能

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

次のJSを使用したい、アクションケーブルを構成し

したがって、前のコードを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が正しく動作しません。

私はこのように私は<p>タグちょうどテキストを追加しませんので、たくさん ファブリツィオBertoglio

Answer 1

これは、正常に動作していない、私の一時的な解決策である

おかげですべての情報のために利用可能です。

は、基本的にこのような私はちょうど、メッセージが<p>タグ内ではないことを下回るあなたが写真から見ることができます "<p> <b>" + data.user + ": </b>" + data.message + "</p>"

せずにHTMLを追加しています。

これは私がやっていることですが、私は$('#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) {}

を呼び出している人を理解していないsubscribed内側messages_channel.rb？

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

私はこのcallback方法は、他のメソッドを呼び出す方法と、アプリケーションフローがある方法を明確な考えを持っていません。