загружать сообщения по прокрутке в рельсах

Question

Я разрабатываю страницу разговоров, где мне нужно загрузить сообщения, я нахожусь в стадии извлечения записи из бэкэнда, вызов 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 сообщениях. Любая помощь, как это сделать

Answer 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.

Обратите внимание, чтомой код не проверен.Это всего лишь фрагмент, чтобы дать вам представление о том, как действовать.