ruby on rails - traductor - pushState con Rails ajax

backbone vs react

Question

Tengo una página de acción del índice que muestra una lista de elementos con paginación con Kaminari y les he agregado la funcionalidad ajax y ahora estoy tratando de que la URL encaje con el uso de pushState.

Mi pregunta es cómo puedo hacer que la URL pase al método pushState cuando mis enlaces de paginación se hacen a través de:

<%= paginate @coasters, remote: true %>

y la vista javascript es la siguiente:

$(''.grid'').html(''<%= escape_javascript render(@coasters) %>'');
$(''.pagination'').html(''<%= escape_javascript(paginate(@coasters, remote: true).to_s) %>'');

Necesito de alguna manera obtener la URL para pasar como el tercer argumento de pushstate de lo que he leído?

ACTUALIZAR:

Lo he cambiado a lo siguiente:

$(document).ready(function() {

  $(document).on(''click'', ''.pagination a[data-remote=true]'', function(e) {
    history.pushState({}, '''', $(this).attr(''href''));
  });

  $(window).on(''popstate'', function () {
    $(''.grid'').html(''<%= escape_javascript render(@coasters) %>'');
    $(''.pagination'').html(''<%= escape_javascript(paginate(@coasters, remote: true).to_s) %>'');
  });

});

$(''.grid'').html(''<%= escape_javascript render(@coasters) %>'');
$(''.pagination'').html(''<%= escape_javascript(paginate(@coasters, remote: true).to_s) %>'');

Así que creo que mi código ahora pasa por alto los rieles jQuery UJS al capturar el clic en el verdadero enlace remoto de paginación y la URL está trabajando.

Parece que la URL a veces se actualiza. El botón Atrás también falla.

¿Alguna idea de dónde me estoy equivocando?

ACTUALIZACIÓN 2:

Moví una parte de mi javascript a mis páginas principales javascript en lugar de a javascript view:

  $(document).on(''click'', ''.pagination a[data-remote=true]'', function(e) {
    history.pushState(null, '''', $(this).attr(''href''));
  });

  $(window).on(''popstate'', function () {
    console.log(''popState started'');
    $(''.grid'').html(''<%= escape_javascript render(@coasters) %>'');
    $(''.pagination'').html(''<%= escape_javascript(paginate(@coasters, remote: true).to_s) %>'');
  });

Con las cosas del popstate eliminadas, el código arriba escribe la URL perfectamente cuando se hace clic en los enlaces, pero cuando agrego las cosas popstate en el postato, se invoca tan pronto como realizo una actualización de página para probar y mi área de cuadrícula se reemplaza por una salida de texto de la siguiente línea es mi página:

$(''.grid'').html(''<%= escape_javascript render(@coasters) %>'');
$(''.pagination'').html(''<%= escape_javascript(paginate(@coasters, remote: true).to_s)

¿Cómo puedo hacer que el estado emergente funcione correctamente?

Answer 1

Estaba en una situación similar y así es como lo resolví. No estoy seguro de si esto funcionará con Kaminari ya que no tengo ni idea de cómo funciona kaminari.

#index.html.erb
<div class="grid">
  <%= render(@coasters) %>
</div>
<div class="pagination">
  <%= paginate @coasters, remote: true %>
</div>

-

#index.js.erb
$(''.grid'').html(''<%= escape_javascript render(@coasters) %>'');
$(''.pagination'').html(''<%= escape_javascript(paginate(@coasters, remote: true).to_s) %>'');

En la paginación, dado que data-remote está habilitado, solo renderizarán index.js.erb .

En mi JavaScript

  $(document).on(''click'', ''.pagination a[data-remote=true]'', function(e) {
    history.pushState({}, '''', $(this).attr(''href''));
  });

  $(window).on(''popstate'', function () {
    $.get(document.location.href)
  });

Al hacer clic en los enlaces de paginación, data-remote manejará la solicitud de ajax y renderizará index.js.erb

Pero al hacer clic en el botón Atrás del navegador, se popstate evento de estado popstate y la URL actual en el navegador será un enlace del historial . Entonces lanzamos otra solicitud de Ajax con esa url con $.get(document.location.href) . Esto tendrá el mismo efecto de hacer clic en el anterior en la paginación.