Routing Sammy non funzionante

Question

Non riesco a ottenere il routing sammy.js come previsto.

Ho il seguente codice JavaScript.

(function ($) { 

    var app = $.sammy('#main', function() { 

     this.get('#/', function (context) { 
      context.log("start page"); 
     }); 

     this.get("#/another/:id/", function (context) { 
      context.log("another page with id = " + context.params["id"]);   
     }); 
    }); 

    $(function (context) { 
     app.run('#/'); 
    }); 

})(jQuery); 

La mia comprensione è che ogni volta che l'URL contiene modifiche, e fintanto che la nuova rotta corrisponde a uno dei percorsi dichiarati, allora dovrei vedere il messaggio rilevante nel log della console.

Ma io no.

Quando la pagina viene caricata per la prima volta, posso visualizzare il messaggio "Pagina iniziale". Fin qui tutto bene.

Se dunque io

• click su un link che punta a [il mio url]/#/altro/1/
• digitare manualmente [il mio url]/#/altro/1/nella barra degli indirizzi bar e ha colpito <Inserisci>

... non succede nulla, cioè non vedo il messaggio della seconda via.

Tuttavia, con il secondo percorso nella barra degli indirizzi, se ora ho colpito F5 o fare clic sul pulsante di aggiornamento del browser quindi la pagina viene ricaricata e mostra il messaggio di console previsto.

Ho frainteso o non devo avvisare Sammy quando un collegamento ipertestuale o una tastiera ha modificato l'hash dell'URL e quindi agire di conseguenza? C'è qualcos'altro che devo aggiungere al mio script?

Answer 1

Ogni applicazione sammy deve essere collegata a un elemento DOM.

Quindi probabilmente manchi l'elemento #main della tua pagina.

Quindi è necessario aggiungere un elemento #main nel DOM da qualche parte:

<div id="main"> 
</div> 

o è necessario inizializzare Sammy senza un selettore di

var app = $.sammy(function() { 

    this.get('#/', function (context) { 
     context.log("start page"); 
    }); 

    this.get("#/another/:id/", function (context) { 
     context.log("another page with id = " + context.params["id"]); 
    }); 
}); 

in questo caso si attacca all'elemento body .

Live Demo.