Infinite scrolling es una técnica que consiste que a medida te acerques al final de la página esta cargue nuevos datos y sirve para remplazar la componente típica de paginación, el si es recomendable implementarla o no en una página es un tema bien discutido en la internet, pero en este tutorial vamos a explicar como implementarla.
Paso 0: Setup
Partamos con una aplicación vacía de Ruby on Rails, y dentro haremos el scaffold del recurso Post que contendrán los campos title y content.
Paso 0.1: Desacoplar el index
En lugar de ocupar el archivo index creado por el scaffold vamos a ocupar una vista parcial que contenga la información de cada post, de esta forma vamos a poder hacer mucho más con menos código.
Así que crearemos la vista parcial _post.html.erb
<!— views/posts/_post.html.erb → <%= div_for(post) do %> <h2><%= post.id %></h2> <h2><%= post.title %></h2> <p><%= post.content %></p> <% end %>
Luego el archivo posts/index.html.erb queda de esta forma:
<div id="content"> <%= render(partial: 'post', collection: @posts) %> </div>
Paso 1: Instalar la gema Kaminari para la paginación
¿Por qué necesitamos una gema para la paginación?, La respuesta es simple, para escribir menos código, las gemas de paginación nos separan los resultados en grupos, dependiendo de la página, la página 0 (sin número) contiene los primeros x resultados, la segunda página (?page=2) contiene los segundos x resultados. El truco que haremos con infinite scrolling es ir llamando via AJAX a estas distintas páginas generadas por el paginador (Kaminari)
Para instalar la gema hay que abrir el gemfile y agregar la línea
gem 'kaminari'
Paso 2: Paginando
Para paginar tenemos que modificar el controller de posts para especificar que los resultados deben ser paginados, esto lo hacemos modificando el método index.
def index @posts = Post.page(params[:page]).per(5) end
Paso 2.1 Link a la siguiente página
En la vista de posts simplemente haremos un link a la página siguiente, para eso ocuparemos el helper de rails url_for sólo especificando el query string page, o sea este método llamará a la misma página pero añadiendo ?page=2 (o 3, o 4, u otro valor dependiendo del caso)
<p id="view-more">
<%= link_to('Ver Más', url_for(page: @posts.current_page + 1)) %>
</p>
Paso 3: Agregando datos
Hasta el momento nuestro sitio es un simple listado de posts páginado pero debería estar funcionando, para probarlo vamos a agregar datos ocupando el archivo seeds.rb y una gema espectacular para este propósito llamada Faker.
Paso 3.1: Agregar la gema Faker al gemfile y luego correr bundler
Paso 3.2: Agregar las siguientes líneas al archivo db/seeds.rb
50.times.each do |x| Post.create(:title => Faker::Lorem.sentence, :content => Faker::Lorem.paragraph ) end
paso 3.3: Correr rake db:seeds
paso 3.4: Probar entrando a localhost:3000/posts y ver los resultados, hacer click en siguiente y ver que la paginación funciona.
Paso 4: Infinite Scrolling
Hay librerías que podemos descargarde infinite scrolling, pero con Jquery es posible hacer el efecto de forma sencilla en sólo un par de líneas de código, para hacerlo vamos a crear el archivo scrolling.js.coffee dentro de la carpeta app/assets/javascript
Dentro del archivo vamos a hacer la primera prueba
jQuery ->
$(window).scroll ->
if $(window).scrollTop() > $(document).height() — $(window).height() — 50
alert("Final de la página")
al correr el sitio e ir al final de la página va a aparecer una alerta diciendo Final de la página, el valor -50 debera ser ajustado en casos especiales, como fixed footers que sean muy grandes.
Paso 4.2 Haciendo el llamado Ajax
Ahora vamos a ocupar la idea anterior pero cada vez que se llegue al final de la página vamos a cargar una página nueva con posts más antiguos, para eso el método $.getScript() de jquery a lo que el controller responderá con un archivo index.js.erb con los posts nuevos (al pedir un archivo javascript el controller devuelve lo pedido y lo ejecuta)
jQuery ->
$(window).scroll ->
url = $('#view-more a').attr('href')
if url && $(window).scrollTop() > $(document).height() — $(window).height() — 50
$("#view-more").attr('href', '')
$.getScript url
Lo último que falta es aprovechar el archivo javascript devuelto y utilizarlo para actualizar la página.
Paso 4.3 Cargando los posts.
El archivo devuelto, que todavía no hemos creado, es index.js.erb (siguiendo las convenciones de rails debe llamarse igual que el método), ahora creemos el archivo y dentro de el carguemos la vista parcial de post con la información de los nuevos post y actualizemos el link para que cargue posts aún más antiguos.
$('#content').append("<%= j render @posts %>");
$("#view-more").attr("href", "<%= j posts_path(page: @posts.current_page + 1) %>");
Y con eso logramos Infinite Scrolling
Happy Infinite Scrolling !!!
Paso 4.4 (Opcional, pero elegante): Removiendo el link al final del documento.
Para remover el link tenemos que saber si realemente estamos al final, para eso comparamos @posts.current_page == @posts.total_pages
$('#content').append("<%= j render @posts %>");
<% if @posts.current_page == @posts.total_pages %> $('#view-more').remove(); <% else %> $('#view-more').html("<%= j link_to('View More', url_for(page: @posts.current_page + 1)) %>"); <% end %>
- 852298741730134575 - October 28, 2024
- 175696641730134570 - October 28, 2024
- 412441881723586638 - August 13, 2024
- 319015961723586638 - August 13, 2024
- 406846251723568762 - August 13, 2024
- 660616821723568764 - August 13, 2024
- Ricky Casino Review ️ Claim A$7500 And Up 550 Fs Bonu - July 8, 2024
- ️ 1win Casino And Apuestas Deportivas ⭐️ Página Oficial 1wi - July 6, 2024
- Мостбет%3A Зеркало%2C Вход%2C Казино%2C Официальный Сайт%2C Играт - June 11, 2024
“Companhia De Trens Urbanos De Porto Alegre S A - June 4, 2024
