javascript - 无休止的分页问题

Question

这是一个笨蛋！我有以下问题：

我在当前项目中使用 twitter bootstrap 和 will_paginate（增强为无限分页），目标是使用流畅的布局以 4 列格式显示所有项目。但是，加载第二页后，会出现无休止的分页符，而是显示 will_paginate。

这是第一次访问时页面加载的方式

它正确地遵循了twitter bootsrap 页面中描述的流体嵌套，并且通常看起来不错，除了未对齐。

第二个页面加载后，页面如下所示：

而且布局真的很乱。不是来自第 1 列的每个元素都属于它自己的“span3”类，而是整个列是包含其他“span3”元素的“span3”。

好的，这是代码：

_kindergarten.html.erb

<div class="span3" id="kindergartens">
    <%= link_to kindergarten.name, kindergarten %>
</div>

index.html.erb

<div class="row-fluid">
    <div class="span12">
        <div class="row-fluid">
            <%= render @kindergartens %>
        </div>

        <div class="pull-right">
            <%= will_paginate %>
        </div>

    </div>
</div>

以下代码用于无限分页（source）：

幼儿园.js.coffee

jQuery ->
  if $('.pagination').length
    $(window).scroll ->
      url = $('.pagination .next_page').attr('href')
      if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
        $('.pagination').html('<img src="assets/spinner.gif" />')
        $.getScript(url)
    $(window).scroll()

index.js.erb

$('#kindergartens').append('<%= escape_javascript(render(@kindergartens)) %>');
<% if @kindergartens.next_page %>
  $('.pagination').replaceWith('<%= escape_javascript(will_paginate(@kindergartens)) %>');
<% else %>
  $('.pagination').remove();
<% end %>
<% sleep 1 %>

不幸的是，我的 js 技能为零，所以除了我在该教程中学到的东西之外，我无法提供任何支持。

所以，最后，我的问题是：如何使用 bootstrap 的流体网格和无休止的分页将这些幼儿园显示在四列中？

Answer 1

我只是喜欢stackoverflow！因为没有人回答我的问题，我被迫找到自己的问题。我自己的成功故事……就是这样。

首先，JS代码没问题，没必要去干涉……但它给了我第一个线索：

$('#kindergartens').append('<%= escape_javascript(render(@kindergartens)) %>');

这些东西会影响 id="kindergartens" 的标签并执行 erb 代码。但是，所述标记位于 _kindergarten.html.erb 部分内部，因此在渲染内部渲染结果渲染之后执行（这就是为什么我在第一次调用第二页后在 span 3 和 1 列中有 span3）。

解决方案很简单（在渲染之前插入 id）：

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <div class="row-fluid" id="kindergartens">
                <%= render @kindergartens %>
            </div>
        </div>
    </div>

    <div class="pull-right">
        <%= will_paginate %>
    </div>

</div>

现在出现的问题是我有 3 个完整的列，而第 4 个中只有一个元素。这是因为 span3 的宽度关闭了。在 /public/assets/aplication.css 中进行了一些调整，现在页面如下所示：

我赢了！