Загружать сообщения при прокрутке в рельсах
Я разрабатываю страницу разговоров, где мне нужно загружать сообщения, я нахожусь на стадии извлечения записи из бэкэнда, вызов ajax будет отправлен после определенной высоты прокрутки, мне нужно запросить записи, например разбиение на страницы
scope :filter_message ->(id) { where('id < ?', id ) if id }
@conversation = Conversation.find(params[:id]).messages.filter_message.group_by{ |message| message.created_at.strftime("%M/%D%Y") }
Мне нужно отфильтровать записи на основе идентификатора с определенным пределом, например 20, при следующей загрузке прокрутки следующие 20 сообщений, Любая помощь, как это сделать
Ответы 1
Что вам нужно сделать, так это иметь вызов ajax, который вызывает конечную точку контроллера, передавая ее и идентификатор, когда пользователи прокручиваются до конца страницы. Этот идентификатор должен быть первым идентификатором, с которого вы начинаете считать 20 сообщений.
Итак, допустим, вы в первый раз, когда страница загружается, у вас отображается 20 таких сообщений:
# messages/index.html.erb
<div id = "messages" data-url = "<%= twenty_more_path %>">
<% messages.forEach do |message| do %>
<div class = "messages_ids" value = "<%= message.id %>"></div>
... other stuff ...
<% end %>
</div>
когда пользователь прокручивает до конца, вы делаете такой вызов ajax в файле coffeescript:
# assets/javascripts/messages.coffee
# call that method when user scrolls and reaches the end of the list
@fetchMessages = () ->
after = $('.messages_ids')[$('.messages_ids').length-1].value
$.get($('#messages').data('url'), after: after)
Это вызовет действие MessagesController#twenty_more:
# controllers/messages_controller.rb
class MessagesController < ApplicationController
def twenty_more
@twenty_messages = Message.where("id > ?", params[:after]).limit(20)
end
end
И когда выполнение действия контроллера завершится, будет запущено представление javascript с именем twenty_more.js.erb. Это представление отвечает за добавление этих 20 новых сообщений в <div id = "messages">.
# views/messages/twenty_more.js.erb
$('document').ready(function() {
<% unless @twenty_messages.empty? %>
$('#messages').append("<%= escape_javascript(render 'messages/messages_list') %>");
<% end %>
});
В этом представлении js мы визуализируем партиал с именем messages/messages_list и добавляем его в <div id = "messages">.
Этот партиал написан так:
# views/messages/_messages_list
<% @twenty_messages.each do |message| %>
<div class = "messages_ids" value = "<%= message.id %>"></div>
... other stuff ...
<% end %>
Вы можете видеть, что единственное, что мы делаем в партиале, - это перебираем новые сообщения и печатаем нужные нам div.
Обратите внимание, что мой код не протестирован. Это всего лишь фрагмент, чтобы дать вам представление о том, как действовать дальше.