2012-04-25 9 views
7

De acuerdo con la página Backbone.js:Cómo usar una URL estándar en Backbone.Router?

Hasta hace poco, se utilizaron fragmentos hash (#page) para proporcionar estos enlaces permanentes, pero con la llegada de la API de Historia, Es ahora posible utilizar direcciones URL estándar (/ página).

He intentado añadir esta regla enrutador:

routes: { 
    'test': function() { 
    alert('ok'); } 
} 

y llamó al Backbone.history.start({pushState: true, root: '/myroot/'}). Tengo un enlace en mi página como:

<a href="test">test me</a> 

Intercepté evento click del enlace con:

$('a[href=test]').click(function(e) { 
    router.navigate('test'); 
    e.preventDefault(); }); 

Cuando hago clic sobre el enlace, la solicitud no se haga, que yo creo que la interceptación fue tenido éxito Pero el evento no se desencadena.

Por lo tanto, ayúdenme a comprender cómo funciona este History API. O señalar dónde he hecho mal.

+1

Problema resuelto . Debería usar 'router.navigate ('test', {trigger: true});' – davidshen84

Respuesta

12

lo necesario para convertir en pushState:

Backbone.history.start({pushState: true});

Su enlace va a forzar una actualización completa de su servidor y el servidor debe responder con el contenido de esa url.

Necesitas interceptar clic de ese enlace y decirle a su router para navegar a la "prueba" de rutas:

myRouter.navigate("test");

Para obtener más información sobre el HTML5 historia api: http://diveintohtml5.info/history.html

por alguna de introducción información sobre el uso de pushState nivel con Backbone:

http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-1-introducing-pushstate/

http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-2-progressive-enhancement-with-backbone-js/

Y un video de una presentación que hice que cubre todo esto:

http://lostechies.com/derickbailey/2011/10/06/seo-and-accessibility-with-html5-pushstate-part-3-the-video/

Espero que ayude.

+0

Gracias Derick. Actualicé mi código como usted señaló. Pero todavía no puede funcionar. Por favor mira la pregunta actualizada – davidshen84

1

Deberá agregar {trigger: true} a la llamada de navegación para desencadenar eventos de enrutamiento.

0

Para indicar que desea utilizar el soporte de HTML5 pushState en su aplicación, use Backbone.history.start({pushState: true}). Si desea utilizar pushState, pero los navegadores que no lo admiten de forma nativa utilizan actualizaciones de página completa, puede agregar {hashChange: false} a las opciones.

PS! Si su aplicación no se está sirviendo de la URL raíz / de su dominio, asegúrese de decirle a la historia donde la raíz es en realidad, como una opción (de lo contrario la navegación no funcionará!):

Backbone.history.start({pushState: true, root: "/public/search/"}) 
Cuestiones relacionadas