javascripts/channels
には、ビューにデータを追加し、フォームをクリアし、最近送信されたメッセージを表示するためにdivがスクロールダウンされ、2)メッセージコンテンツのヘルパーを表示するために、このmessages.js
ファイルがあります。
ファイルは次のようになります。
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
ヘルパーを使用すると、追加は完全に防止されます。データはまだ保持され、Webソケットのサブスクリプションは送受信されますが、ビューは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>