javascript - 如何在 Rails 中异步/使用 AJAX 呈现部分内容？

Question

当我滚动到带有表格的 div 底部时，我目前有以下代码来加载部分内容:

$(document).ready(function () {
        $("#pastGigs").scroll(function () {
            if (isScrollBottom()) {
                $('#pastGigs tr:last').after('<%= render "layouts/pastGigs" %>');

                $(this).unbind("scroll");
            }
        });

        function isScrollBottom() {

            var elementHeight = $("#pastGigs")[0].scrollHeight;
            var scrollPosition = $("#pastGigs").height() + $("#pastGigs").scrollTop();
            return (elementHeight == scrollPosition);
        };

    });

它工作正常，但我使用部分的原因是因为我不想立即加载所有内容，因为它确实会减慢页面速度。我应该根本不使用部分内容，还是有另一种方法来执行脚本并仅在滚动后加载内容？我在 stackoverflow 上查看了类似的问题，它们都解释了如何呈现部分(我不知道 escape_javascript 并手动删除了部分中的所有空格......)，但似乎没有一个能解决我当前的速度问题.由于 partial 中的数据量，大约有 15 秒 (!) 的差异，这就是为什么我不想同步加载它。

编辑:当前配置/routes.rb:

root "resnate_pages#home"
resources :users, :path => ''

编辑 2:终端中的当前错误:

Processing by UsersController#show as */*
Parameters: {"id"=>"pastGigs"}
User Load (0.3ms)  SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT 1  [["id", "pastGigs"]]
Completed 404 Not Found in 3ms

ActiveRecord::RecordNotFound (Couldn't find User with id=pastGigs):
app/controllers/users_controller.rb:5:in `show'

Answer 1

在查看了所有内容之后，看起来您对渲染部分的想法是正确的，除了正如我们所讨论的那样，它实际上并不是异步加载的。由于您在 javascript 的主体中有 ERB 标记，因此 ERB 实际上是在传递到浏览器之前在服务器端呈现的(正如您所注意到的，带有巨大的 HTML 文本 block )。这似乎有效的原因(意味着避免您提到的巨大的 15 秒加载时间)是因为 HTML 文本在页面加载时实际上并未被浏览器解释为 HTML(此时它只是一个普通的 'ol 字符串).当您使用 .after 函数将它添加到 DOM 时，它当然会被解析和评估。

所以基本上我们只需要将这些东西 ajax 起来。很高兴您正在查看 jQuery ajax 文档；绝对值得花时间，而且信息量很大。还有一个$.get您可能还想查看的功能。它是发送 GET 请求的便捷方法；您的控制力较小，但如果这无关紧要，它可以帮助保持事物清洁。我将使用 $.get 函数进行演示，如果您需要控制(或更喜欢其他)，您可以选择使用 $.ajax 函数。

将其放入您的 scroll 函数中:

$("#pastGigs").scroll(function () {
    if (isScrollBottom()) {

        $.get("/pastGigs", function(result){
            $('#pastGigs tr:last').after(result);
        });

        $(this).unbind("scroll");
    }
});

您可以随意命名 pastGigs 路由，它仅用于演示目的。确保在 routes.rb

中设置路线

get "/pastGigs" => "users#pastGigs"

或

get "/pastGigs", to: "users#pastGigs"

同样，我不知道你的 Controller 叫什么，所以用你系统中的正确名称替换它和 Action 名称。

最后， Controller Action :

def pastGigs
   render :partial => "layouts/pastGigs"
   # OR
   # render "layouts/pastGigs", :layout => false
end

最终结果将是，当滚动到达底部时，将触发对该 URL 的 ajax 调用，您的部分将被呈现并返回到成功函数($.get 的第二个参数). result 变量将包含呈现的 HTML 部分。

如果可行，请告诉我。