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应该是您开始计算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。

请注意，我的代码未经过测试。它只是一个片段，以便让您了解如何继续。

在rails中滚动加载消息

1 个答案: