¿Cómo implementar una navegación con hash-key?

Question

quiero implementar una navegación basada en ajax clave hash-como esto:

http://www.foo.bar/#/about/ 
http://www.foo.bar/#/news/ 
http://www.foo.bar/#/products/ 

cualquier consejo aquí?

gracias de antemano!

Answer 1

Con una estructura de navegación basada en hash, definirá sus rutas y sus controladores a través de JS en el navegador ... Cuando se cambia el hash, se activa un evento 'hashchange' y la 'window.onhashchange se llama a la función de controlador. *

por ejemplo

if ("onhashchange" in window) { 
    alert("The browser supports the hashchange event!"); 
} 

function locationHashChanged() { 
    if (location.hash === "#somecoolfeature") { 
    somecoolfeature(); 
    } 
} 

window.onhashchange = locationHashChanged; 

Existe la opción de utilizar también el empuje de HTML5 más recientemente introducido.

Eche un vistazo a http://www.microjs.com/#spa para algunas buenas bibliotecas de enrutamiento JS: algunas de ellas brindan soporte para pushstate HTML5 así como contratiempos para hashchange para navegadores más antiguos.

Si está buscando construir una aplicación seria, podría utilizar algo como Backbone.js para manejar modelos, vistas, enrutamiento, etc. También debería verificar Crossroads.js (biblioteca de enrutamiento) y su Hasher.js acompañante (biblioteca hashchange/pushstate) si no necesita todos los extras que vienen con Backbone.

... o está LeviRoutes (HTML5 pushstate only, muy parecido al enrutamiento en Express for Node.js).

... o barbacoa Jquery (para jQuery/algunas características agradables/a base de hashchange - (github.com/cowboy/jquery-bbq)

... y luego, no hay dirección (hashchange/toneladas de características/trabajos en Node.js y el navegador/similar al enrutamiento Express/desarrollado principalmente por la gente de Nodejitsu).

* Nota: si te estás enfocando en SEO, entonces hashchange/ajax presentará algunos problemas. ... es posible que desee leer las directrices para webmasters de Google: http://code.google.com/web/ajaxcrawling/docs/getting-started.html

** PD: puede encontrar todas las bibliotecas mencionadas anteriormente en MicroJS.com sitio, a excepción de Jquery barbacoa

Answer 2

Usando el ejemplo que dio anteriormente, y mantener las cosas simples, usted podría hacer lo siguiente:

function aboutHandler() { 
    //Do stuff--e.g. get via AJAX -> render template (optional) -> append HTML to an element 
} 

function newsHandler() { 
    //Do stuff 
} 

function productsHandler() { 
    //Do stuff 
} 

function locationHashChanged() { 
    (location.hash === "#/about/") && aboutHandler(); 
    (location.hash === "#/news/") && newsHandler(); 
    (location.hash === "#/products/") && productsHandler(); 
    } 
} 

window.onhashchange = locationHashChanged; 

Answer 3

Parece que usted está desarrollando una aplicación única página. Por lo tanto, le recomendaría usar Backbone.js. Aquí hay un fragmento de código para su tarea.

<script> 
    var Controller = Backbone.Router.extend({ 
     routes: { 
      "/about/": "about", 
      "/news/": "news", 
      "/products/": "products" 
     }, 
     about: function(){ 
      // ... 
     }, 
     news: function(){ 
      // ... 
     }, 
     products: functions(){ 
      // ... 
     } 
    }); 

    var controller = new Controller(); 
    Backbone.history.start(); 

</script> 

Backbone. What is a router?