Sammy.js-Routen, die nicht von Knockout-gebundenen Links in IE10 starten

Question

Ich habe eine einzelne Seite Anwendung, die knockout.js für Datenbindung und Sammy.js für das Routing clientseitige (Hash-basierte) URLs verwendet.

Ich sehe ein seltsames Problem in Internet Explorer jedoch: manchmal, wenn Links geklickt werden, wird die URL in der Adressleiste des Browsers geändert, aber die entsprechende Sammy-Route wird nicht ausgeführt.

Es passiert nicht jedes Mal (aber ich kann den Fehler konsistent reproduzieren), und es passiert nur in IE10 (Chrome funktioniert jedes Mal gut). Es scheint auch mit Knockout verwandt zu sein, da ein Satz fest codierter Links nicht das gleiche Problem aufweist.

Zur Veranschaulichung, ich habe alles, aber das Nötigste abgestreift, um das Problem neu und erstellt zwei jsbin Beispiele:

Beispiel 1 (mit Knockout):http://jsbin.com/aretis/2/

Um das Problem zu sehen, Öffnen Sie den Link oben und klicken Sie auf "Record # 1", dann "Baz", dann "Record # 1" erneut. Die URL für Datensatz 1 wird in der Adressleiste angezeigt, aber die Route für diesen Datensatz wird nicht an die Liste angehängt.

Beispiel 2 (ohne Knockout):http://jsbin.com/amivoq/1/

In diesem Beispiel habe ich eine statische Liste von Rekord Links anstelle einer datengebundene Liste. Wenn Sie auf einen der Links (in beliebiger Reihenfolge) klicken, wird die Route an die Liste angehängt (wie es sein sollte).

Eine Erinnerung, dass diese in IE ausgeführt werden müssen, um das Problem zu reproduzieren.

Irgendwelche Ideen?

Answer 1

Gemäß meinem obigen Kommentar habe ich dieses Problem behoben, indem ich nur das window.hashchange-Ereignis abgefangen und die URL selbst analysiert habe. Dies ist der einzige Teil von Sammy.js, den ich wirklich benutzt habe und ich hatte kein Glück, das eigentliche Problem aufzuspüren. Hoffentlich hilft das jemand anderem.

Das erste, was ich tat, war die hashchange Ereignis binden:

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

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

Dies ruft die folgende URL-Parser:

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"); 
    } 
} 

Die Funktionen wie ShowAccountDetailFromId() und SwitchToPanel() zeigen, und zu füllen (mit Ajax Anrufe Web Services) die entsprechende <div>. Dies ist wahrscheinlich eine völlig naive Herangehensweise, aber es funktioniert (d. H. Sie können URLs bookmarken, die Zurück-Taste und Browser-Verlauf arbeiten, etc.) Ich entschuldige mich für die Antwort "Antwort".