使用Kaminari和Masonry時顯示的結果相同

Question

我使用Kaminari，Masonry和無限滾動的附加組件。我用磚石進行了無限滾動，但每次進入頁面並看到項目列表時，它都會再次呈現相同的項目至少25次，當只有26個時，會給我列出650個列出的項目。我的代碼位於下方，問題我問是爲什麼會發生這種情況？

items_controller.rb

def index 
    @items = Item.order("created_at DESC").page(params[:page]) 
    end 

index.html.erb

<div id='items-ctnr' class='row'> 
    <div class='infinite-scroll page clearfix'> 
    <%= render @items %> 
    </div> 
</div> 

<nav id="page-nav"> 
    <%= paginate @items %> 
</nav> 

index.js.erb的

$("#items-ctnr").append("<div class='infinite-scroll page clearfix'><%= escape_javascript(render(@items)) %></div>"); 

_items.html.erb

<% @items.each do |item| %> 
    <div class='item box'> 
    <div class='name'> 
     <%= link_to item.name, item %> 
    </div> 
    </div> 
<% end %> 

items.js

$(function(){ 

    var $container = $('#items-ctnr, #user-items-ctnr'); 

    $container.imagesLoaded(function(){ 
    $container.masonry({ 
     itemSelector: '.box', 
     columnWidth: function(containerWidth) { 
     return containerWidth/6; 
     } 
    }); 
    }); 

    $container.infinitescroll({ 
    navSelector : '#page-nav', // selector for the paged navigation 
    nextSelector : '#page-nav a', // selector for the NEXT link (to page 2) 
    itemSelector : '.box',  // selector for all items you'll retrieve 
    loading: { 
     finishedMsg: 'No more items to load.', 
     img: '/assets/masonry/loader.gif' 
     } 
    }, 
    // trigger Masonry as a callback 
    function(newElements) { 
     // hide new items while they are loading 
     var $newElems = $(newElements).css({ opacity: 0 }); 
     // ensure that images load before adding to masonry layout 
     $newElems.imagesLoaded(function(){ 
     // show elems now they're ready 
     $newElems.animate({ opacity: 1 }); 
     $container.masonry('appended', $newElems, true); 
     }); 
    } 
); 
}); 

感謝，

約翰

Answer 1

好吧這個問題是兩個變量@items呈現在每個所以我猜它呈現之間幾次這兩個直到它有一個內部錯誤，日誌沒有拿起。可能是我不熟悉的一些rails fallback。

好了，到目前爲止是這種情況，當我刪除了該項目的部分變量：

_items.html.erb

<% @items.each do |item| %> 
<% end %> 

，只是不停地在同一個地方索引碼這是這樣的：

<div class='infinite-scroll page clearfix'> 
    <%= render @items %> 
</div> 

瞭解了一些新的關於如何render和@items的作品。

Answer 2

在你的index.js.erb我認爲你還需要更新#page-nav區塊，因爲現在你正在用ajax提供新數據，但是不要改變分頁區塊。

事情是這樣的：

index.js.erb的：

$("#items-ctnr").append("<div class='infinite-scroll page clearfix'><%= escape_javascript(render(@items)) %></div>"); 
$("#page-nav").replaceWith("<nav id='page-nav'><%= escape_javascript(paginate(@items)) %></nav>");