如何在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並手動刪除了部分內容中的所有空格...），但是似乎都無法解決我當前的速度問題。 由於部分中的數據量存在大約15秒（！）的差異，這就是為什么我不想同步加載它的原因。

編輯：當前config / 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文本）。 之所以看起來有效（意味着避免了您提到的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"

同樣，我不知道您的控制器叫什么，所以用您系統中正確的控制器和動作名稱替換它。

最后，控制器動作：

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

最終結果將是，當滾動到達底部時，將向該URL觸發ajax調用，然后呈現您的部分並將其返回給成功函數（ $.get的第二個參數）。 result變量將包含呈現的HTML部分。

讓我知道是否可行。

Answer 2

快速修改Paul的代碼，為感興趣的人填充模式：

$('#seeAll').click(function(){
$.get("/pastGigs", function(result){
$('#pastGigsBody').html(result);});
});

當用戶單擊“過去演出” div中的“查看全部”時，它將打開包含所有過去演出的模式。 感謝Paul教給我有關$ .get請求的信息。