Come implementare una navigazione con la chiave hash?

Question

Voglio realizzare un Ajax basata navigazione hash-chiave come questo:

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

qualche consiglio qui?

grazie in anticipo!

Answer 1

Con una struttura di navigazione basata su hash, definirai i percorsi e i relativi gestori tramite JS nel browser ... Quando l'hash viene modificato, viene attivato un evento "hashchange" e il comando "window.onhashchange" viene chiamata la funzione di gestione. *

es.

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

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

window.onhashchange = locationHashChanged; 

C'è anche la possibilità di utilizzare lo stato di stampa HTML5 introdotto di recente.

Partenza http://www.microjs.com/#spa per alcune buone biblioteche di routing JS - alcuni di essi forniscono il supporto per HTML5 pushState così come fallback per hashchange per browser meno recenti.

Se stai cercando di creare un'applicazione seria, potresti utilizzare qualcosa come Backbone.js per gestire modelli, visualizzazioni, routing, ecc. Dovresti anche controllare Crossroads.js (libreria di routing) e il suo Hasher.js che accompagna. (libreria hashchange/pushstate) se non hai bisogno di tutti gli extra forniti con Backbone.

... o c'è LeviRoutes (HTML5 solo stato di stampa, molto simile al routing in Express per Node.js).

... o Jquery BBQ (per Jquery// alcune caratteristiche hashchange-based - (github.com/cowboy/jquery-bbq)

... e poi, c'è Regista (hashchange/ton di funzioni/lavora a Node.js e il browser/simile a express routing/sviluppata per lo più dalla gente a Nodejitsu)

*. Nota: se si sta concentrando su SEO, quindi hashchange/ajax introdurrà alcuni problemi. .. potresti leggere le istruzioni per i webmaster di Google - http://code.google.com/web/ajaxcrawling/docs/getting-started.html

** PS puoi trovare tutte le librerie sopra menzionate su MicroJS.com sito, ad eccezione di Jquery barbecue

Answer 2

Utilizzando l'esempio che ha dato al di sopra, e mantenere le cose semplici, si potrebbe procedere come segue:

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

Sembra che si sta sviluppando una singola applicazione pagina. Quindi, ti consiglierei di usare Backbone.js. Ecco uno snippet di codice per il tuo compito.

<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?