Sammy.js instradamenti non attivati ​​dai collegamenti a eliminazione diretta in IE10

Question

Ho un'applicazione a pagina singola che utilizza Knockout.js per l'associazione dei dati e Sammy.js per il routing di URL lato client (basati su hash).

Tuttavia, sto riscontrando un problema strano in Internet Explorer: a volte i collegamenti, quando si fa clic, modificano l'URL nella barra degli indirizzi del browser, ma la route Sammy corrispondente non verrà eseguita.

Non succede ogni volta (ma riesco a riprodurre costantemente l'errore), e accade solo in IE10 (Chrome funziona bene ogni volta). Sembra che sia correlato anche a Knockout, dal momento che una serie di collegamenti hardcoded non presenta lo stesso problema.

Per illustrare, ho strappato via tutto, ma il minimo indispensabile per ricreare il problema e ha creato due esempi jsbin:

Esempio 1 (con Knockout):http://jsbin.com/aretis/2/

di vedere il problema, apri il link sopra e fai nuovamente clic su "Record # 1", quindi su "Baz", quindi su "Record # 1". L'URL per il record 1 verrà visualizzato nella barra degli indirizzi, ma la rotta per quel record non verrà aggiunta all'elenco.

Esempio 2 (senza Knockout):http://jsbin.com/amivoq/1/

In questo esempio, ho un elenco statico di link di registrazione al posto di un elenco di dati-bound. Facendo clic su uno qualsiasi dei link (in qualsiasi ordine), tale percorso verrà aggiunto all'elenco (come dovrebbe).

Un promemoria che questi devono essere eseguiti in IE per riprodurre il problema.

Qualche idea?

Answer 1

Come per il mio commento sopra, ho risolto questo problema catturando l'evento window.hashchange e analizzando personalmente l'URL. Questa è l'unica parte di Sammy.js che stavo davvero usando e non stavo avendo alcuna fortuna nel rintracciare il vero problema. Speriamo che questo aiuti qualcun altro.

La prima cosa che ho fatto è stato legato l'evento hashchange:

$(function() { 
    $(window).on("hashchange", HandleUrl); 

    // Call our URL handler to deal with any initial URL given to us. 
    HandleUrl(); 
} 

Ciò richiede il seguente parser URL:

function HandleUrl() { 
    var hash = location.hash; 

    if (hash.indexOf("#Account") >= 0) { 
     var splitParts = hash.split("/"); 

     if (splitParts.length >= 2) { 
      ShowLoadingBox(); 
      ShowAccountDetailFromId(splitParts[1]); 
     } 
    } else if (hash.indexOf("#Contact") >= 0) { 
     var splitParts = hash.split("/"); 

     if (splitParts.length >= 2) { 
      ShowLoadingBox(); 
      ShowContactDetailFromId(splitParts[1]); 
     } 
    } else if (hash.indexOf("#ThingsToDo") >= 0) { 
     SwitchToPanel("navPanelThingsToDo"); 
    } else if (hash.indexOf("#ThingsIveDone") >= 0) { 
     SwitchToPanel("navPanelThingsIveDone"); 
    } else if (hash.indexOf("#Reports") >= 0) { 
     SwitchToPanel("navPanelReports"); 
    } else { 
     SwitchToPanel("navPanelMyAccounts"); 
    } 
} 

LE funzioni come ShowAccountDetailFromId() e SwitchToPanel() solo mostrare e popolano (utilizzando chiamate Ajax ai servizi Web) l'appropriato <div>. Questo è probabilmente un approccio completamente ingenuo, ma funziona (ad esempio è possibile aggiungere URL ai segnalibri, il pulsante Indietro e la cronologia del browser, ecc.) Le mie scuse per la risposta "non risposta".