在滚动条中加载消息

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") }

我需要根据ID进行过滤，并以一定的限制（例如20）对记录进行过滤，在下一次滚动加载后，接下来的20条消息，如何进行此操作有任何帮助

Answer 1

您应该做的是ajax调用，该调用调用控制器端点，当用户滚动到页面末尾时，传递该端点和id。 此ID应该是您开始计算20条消息的第一个ID。

因此，假设您是在第一次加载页面时显示以下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>

当用户滚动到末尾时，您在coffeescript文件中进行如下ajax调用：

# 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

并且当控制器动作执行结束时，将触发一个名为twenty_more.js.erb的javascript视图。 该视图负责在<div id="messages">添加这20条新消息。

# 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 %>

您可以看到，我们在partial中唯一要做的就是循环遍历新消息并打印所需的div。

请注意，我的代码未经测试。 它只是一个片段，目的是让您了解如何进行。