will_paginate与无尽的滚动| Rails4

时间:2013-08-31 07:36:09

标签: javascript ruby-on-rails twitter-bootstrap ruby-on-rails-4 will-paginate

这就是解决方案

所以我正在使用will_paginate / Bootstrap Will Paginate进行Endless Scrolling。

让分页工作:

1。)在我的Controller中,我用

更新了我的索引操作
@clips = Clip.order("created_at desc").page(params[:page]).per_page(20)

2。)编辑我的索引视图:

<%= will_paginate @clips%>

完成

分页工作得很好。

To Add Endless scrolling我做了与之前的Rails 3 App相同的步骤。

1。)编辑我的clips.js.coffee

jQuery ->
$('#clips-masonry').imagesLoaded ->
    $('#clips-masonry').masonry itemSelector: ".clips-masonry" # Thats my Masonry

if $('.pagination').length # Thats for the Endless Scrolling
    $(window).scroll ->
        url = $('.pagination .next_page a').attr('href')
        if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
            # What to do at the bottom of the page
            $('.pagination').text("Fetching more Clips...")
            $.getScript(url)
        $(window).scroll()

2。)使用以下命令创建index.js.erb:

$boxes = $('<%= j render(@clips) %>')

$('#clips-masonry').append( $boxes ).imagesLoaded( function(){
  $('#clips-masonry').masonry( 'reload');
});
<% if @clips.next_page %>
  $('.pagination').replaceWith('<%= j will_paginate(@clips) %>');
<% else %>
  $('.pagination').remove();
<% end %>

3.)将format.js添加到我的Controller索引操作

def index
    @clips = Clip.order("created_at desc").page(params[:page]).per_page(12)
    respond_to do |format|
        format.html
        format.js
    end
end

4。)我的_clip.html.erb包含div

 <div class="clip-box clips-masonry" data-no-turbolink>

2 个答案:

答案 0 :(得分:8)

好的,我得到了我的更新问题,每个遇到这个问题的人,这就是解决方案。

答案 1 :(得分:0)

如果有人更喜欢使用JS / JQUERY:

$products = $('<%= j render(@products) %>')

$('#productsContainer').append( $products );

<% if @products.next_page %>
  $('.pagination').replaceWith('<%= j will_paginate(@products) %>');
<% else %>
  $('.pagination').remove();
<% end %>

Index.js.erb:

<div class="container">
    <%= will_paginate @products %>
</div>   

index.html.erb

  respond_to do |format|
    format.html
    format.js
  end

控制器:

//in main file
client.dispatcher.addInhibitor(msg => {
  return (msg.channel.name == "blockme"); //you return whether the command should be blocked
})