Comment implémenter une navigation de hachage-clé?

je veux mettre en œuvre un ajax en fonction de hachage de la clé de navigation comme ceci:

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

tous les conseils ici?

merci d'avance!

source d'informationauteur Tronic

  1. 26

    Avec une base de hachage de la structure de navigation, vous serez la définition de votre parcours et de leurs maîtres via JS dans le navigateur... Quand le hachage est changé, un "hashchange' événement est déclenché, et la fenêtre.onhashchange' fonction de gestionnaire est appelé.*

    par exemple

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

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

window.onhashchange = locationHashChanged;

    Il y a la possibilité d'utiliser le plus récemment mis en place HTML5 pushstate, trop.

    Découvrez http://www.microjs.com/#spa pour une bonne JS routage des bibliothèques-certains d'entre eux fournissent en charge le HTML5 pushstate ainsi que des issues de hashchange pour les anciens navigateurs.

    Si vous cherchez à construire une application sérieuse vous pouvez utiliser quelque chose comme Backbone.js pour gérer les modèles, vues, routage, etc. Vous devriez également vérifier Crossroads.js (bibliothèque de routage) et son accompagnement Hasher.js (hashchange/pushstate bibliothèque) si vous n'avez pas besoin de tous les extras qui viennent avec la colonne vertébrale.

    ...ou il y a LeviRoutes (HTML5 pushstate seulement, comme beaucoup de routage en Express pour Node.js).

    ...ou Jquery pour BARBECUE (pour Jquery/hashchange/quelques fonctionnalités intéressantes -- (github.com/cowboy/jquery-bbq)

    ...et puis, il y a de Directeur (hashchange/des tonnes de fonctionnalités/travaux en Node.js et le navigateur/similaire à Exprimer de routage/développé par les gens de chez Nodejitsu).

    *Note: si vous êtes en se concentrant sur le RÉFÉRENCEMENT, alors hashchange/ajax allons introduire quelques problèmes...vous voudrez peut-être lire à travers les consignes Google aux webmasters -- http://code.google.com/web/ajaxcrawling/docs/getting-started.html

    **P. S. vous pouvez trouver l'intégralité des bibliothèques sur le MicroJS.com site, sauf pour Jquery BARBECUE

  2. 4

    À l'aide de l'exemple que vous avez donné ci-dessus, et garder les choses simples, vous pouvez faire ce qui suit:

    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;
  3. 1

    On dirait que vous êtes l'élaboration d'une seule page de l'application. Donc, je vous recommande d'utiliser Backbone.js. Voici un extrait de code pour votre tâche.

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

    De la colonne vertébrale. Qu'est ce qu'un routeur?