2016-09-02 2 views
0

Я использую will_paginate gem для разбивки постов. И я хочу сделать бесконечный свиток. Я смотрю несколько видео и читаю пару сообщений, но это не совсем то, что мне нужно (из-за моей структуры приложения). Вы видите, home.html.erb (быть коротким), выглядит следующим образом:Will_paginate, render next page

<div class='news-lent'> 
    <%= render 'posts/posts_for_all', posts_variable: @posts %> 
</div> 

И мой _posts_for_all.html.erb (быть коротким), выглядеть (быть коротким):

<% posts_variable.each do |post| %> 
    <%= link_to post.theme, post %> 
<% end %> 
<% will_paginate posts_variable, :next_label => "More" %> # => i need it every 
time the page is loaded 

Я уже написал JS для всех, кроме одной линии:

$('.news-lent').append('<%= j render *some_thing* %>') 

Ну, я не знаю, что перейти к визуализации. Я не могу передать мой @posts (он вернет ошибку (отсутствующие частичные сообщения/_post)) и @ posts.next_page (он вернет 2) и # {posts_path (@post)}? Page = # { @ post.current_page + 1} (но это тоже не работает) и другие проблемы.

Можете ли вы мне помочь, мне нужно что-то положить внутрь j render, чтобы она отображалась на следующей странице?

UPDATE

Я переработал все с RailCast видео, и точно так же, как @Szilard Magyar сказать мне делать, но теперь держать рендеринг же (первая страница) все время, и это не делает вторую страницу в все, что может создать такую ​​проблему?

UPDATE

Follow railcast видео (переработанный мою структуру приложения), и новая проблема появляется:

Мой home.js.coffee:

jQuery -> 
    url = $('.pagination .next_page a').attr('href') 
    $(window).scroll -> 
    if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50 
     $('.pagination').text("Fetching...") 
     $.getScript(url) 

Мои index.js. erb:

$('.one').append('<%= j render @posts, posts_variable: @posts %>'); 
    <% if @posts.next_page %> 
    $('.pagination').replaceWith('<%= j will_paginate(@posts) %>'); 
    <% else %> 
    $('.pagination').remove(); 
    <% end %> 
<% sleep 3 %> 

Мой индекс.html.erb:

<div class="news-lent"> 
    <div class="one"> 
    <%= render @posts, posts_variable: @posts %> 
    </div> 

    <div id="infinite-product-scrolling"> 
    <%= will_paginate @posts, :next_label => " Еще" %> 
    </div> 
</div> 

Но теперь, когда I'am на первой странице и прокрутите вниз она делает вторую страницу, но 2x раз, и когда я снова прокрутки вниз и рендеринга второй страницы (это не делает третью страницу). Я не знаю, как это исправить, ты сможешь снова приземлиться?

ответ

0

Решите, проблема возникает из-за моей ошибки. В здесь:

jQuery -> 
    url = $('.pagination .next_page a').attr('href') 
    $(window).scroll -> 

url переменная была назначена только один раз, перед прокруткой и это была моя ошибка. Поэтому, если URL-адрес был сохранен, он всегда отображался на второй странице и никогда не был третьим. Мы должны перенести наш url ниже, под .scroll, и он всегда будет проверять, какая страница была отображена. Как это:

jQuery -> 
    $(window).scroll -> 
    url = $('.pagination .next_page a').attr('href') 

Кстати, я всем рекомендую (если они используют JQuery из RailsCast tutorial), чтобы добавить скрипт для предотвращения многократной загрузки страницы при прокрутке

jQuery -> 
    $(window).scroll -> 
    url = $('.pagination .next_page a').attr('href') 
    return if(window.pagination_loading) # -> add this 
    if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50 
     window.pagination_loading = true # -> and this 
     $('.pagination').text('Fetching products...') 
     $.getScript(url).always -> 
     window.pagination_loading = false # -> and this 

И Предотвратить ошибки и т.д. для url переменной вам нужно добавить a, поэтому выглядеть url = $('.pagination .next_page a').attr('href') и не нравится в RailsCast учебнике: url = $('.pagination .next_page').attr('href')

0

index.html.erb

<div class="product-index-list new-product-insert"> 
    <%= render @products %> 
</div> 
<div id="infinite-product-scrolling"> 
    <%= will_paginate @products %> 
</div> 
<div class="no-more"> 
    <p>No more products.</p> 
</div> 

_product.html.erb

<div class="name"><%= product.name %></div> 
<div class="oneliner"><%= product.oneliner %></div> 

products.js

if ($('#infinite-product-scrolling').size() > 0) { 
    $(window).on('scroll', function() { 
    $('#infinite-product-scrolling').hide(); 
    var more_products_url; 
    more_products_url = $('#infinite-product-scrolling .pagination .next_page a').attr('href'); 
    if (more_products_url && $(window).scrollTop() > $(document).height() - $(window).height() - 60) { 
     $('.pagination').html("<i class='fa fa-circle-o-notch fa-2x fa-spin'></i>"); 
     $('#infinite-product-scrolling').show(); 
     $.getScript(more_products_url); 
    } 
    }); 
}; 

index.js.erb

$('.new-product-insert').append('<%= j render @products %>'); 
<% if @products.next_page %> 
    $('.pagination').replaceWith('<%= j will_paginate @products %>'); 
<% else %> 
    $(window).off('scroll'); 
    $('.pagination').remove(); 
    $('.no-more').delay(1000).fadeIn(1500); 
<% end %>