1. Inicio
  2. Pregunta y respuesta
  3. ¿Cómo hacer history.js en Rails de la manera correcta?

¿Cómo hacer history.js en Rails de la manera correcta?

2012-04-10 6 views
5

Hola a todos,

ahora es mi cuarto intento de implementar history.js en una aplicación de Rails. Tengo un enfoque que funciona bastante bien, pero el código es muy feo. Hoy volví a mirar el código y pensé: ¿Cómo puedo hacer esto mejor, más fácil, más SECO?¿Cómo hacer history.js en Rails de la manera correcta?

Lo que he hecho hasta ahora (y trabajando bastante bien, no es perfecto):

  • Establecer remote: true a mis enlaces
  • jquery-ujs Obtiene la js.erb

Mi HTML se parece :

<body> 
    <div id="content"> 
    some content with buttons, etc. 
    </div> 
</body>

js.erb contiene:

History.pushState(
    { 
    func: '$(\'#content\').html(data);', 
    data: '<%= j(render template: "news/index", formats: [:html]) %>' 
    }, 
    'test title', 
    '<%= request.url %>' 
);

Y luego history.js toma la función y le da los datos. Por lo tanto, reemplaza el content -div con el nuevo código generado. Y también actualiza la URL. Este código lo tengo que poner en cada archivo (!) js.erb.

Mis últimos pensamientos para que sea un poco menos feo fueron:

  • Conjunto remote: true a mis enlaces
  • Cuando se hace clic en un vínculo que va a buscar alguna js.erb que sustituye al content -div
  • Todos los enlaces con data-remote="true" obtendrá un ajax:success -handler
  • en ajax:success la nueva dirección URL es empujado a history.js

Pero todavía hay un problema dentro. Entonces tengo código JavaScript:

$(document).on('ajax:success', 'a[data-remote="true"]', function() { ... });

El problema es:. ajax:success nunca se dispara si se sustituye la div -tag donde el enlace (que debería desencadenar el evento) estaba en

Tal vez alguien puede resolver mis problemas ...

¿O hay una manera mejor?

Fuente

2012-04-10 Benjamin M

+0

Ha visto jquery.pjax? –

+0

He visto la página de histoy.js un montón de veces, pero nunca he reunido el esfuerzo para probarlo. Me encantaría ver esta pregunta respondida de una manera clara. – Ashitaka

+0

PJAX es solo HTML5. Los navegadores HTML4 solo obtienen enlaces normales ... Con history.js también obtendríamos AJAX para navegadores HTML4 –

Respuesta

0

qué pasa:

History.Adapter.bind(window, 'statechange', function() { 
    var state = History.getState(); 
    ... 
});

Fuente

2013-08-07 14:25:50

0

estoy usando el caso beforeSend como oyente global para todos los datos a distancia para cambiar la manija de la historia del navegador. Prefiero el beforeSend porque quiero que el enlace cambie tan pronto como se haga clic en él, independientemente del resultado de la solicitud de AJAX ...

$(document).bind('ajax:beforeSend', function(event,data){ 
    history.pushState(null, '', event.target.href) 
});

Esto resuelve su problema porque el evento se activa antes de que se realice cualquier modificación en el DOM.

Fuente

2013-09-10 22:40:00

Cuestiones relacionadas

 Cuestiones relacionadas