使用 Kaminari 和 Masonry 时显示相同的结果

Question

我正在使用 Kaminari、Masonry 和 Infinite Scroll 的附加组件。我得到了砖石结构的无限滚动，但每次我进入页面并查看项目列表时，它都会再次呈现相同的项目至少 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

在你的 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>");

Answer 2

好吧，问题是两个 @items 变量在每个变量上渲染，所以我猜它在两者之间渲染了几次，直到出现内部错误，导致日志无法接收。可能是一些我不熟悉的 rails 回退。

好吧，到目前为止，当我删除部分项目中的变量时，这仍然有效：

_items.html.erb

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

并且只是将索引代码保存在同一个地方，即：

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

了解了有关 render 和 @items 工作原理的新知识。

使用 Kaminari 和 Masonry 时显示相同的结果

Same results displayed while using Kaminari and Masonry

javascript

jquery

ruby-on-rails

ruby-on-rails-4

jquery-masonry