Các tuyến đường Sammy.js không kích hoạt từ các liên kết ràng buộc Knockout trong IE10

Question

Tôi có một ứng dụng trang đơn sử dụng Knockout.js để liên kết dữ liệu và Sammy.js để định tuyến URL phía máy khách (băm).

Tôi gặp sự cố lạ trong Internet Explorer, tuy nhiên: đôi khi các liên kết, khi được nhấp, sẽ thay đổi URL trong thanh địa chỉ của trình duyệt, nhưng tuyến Sammy tương ứng sẽ không thực thi.

Nó không xảy ra mọi lúc (nhưng tôi có thể tái tạo liên tục lỗi) và nó chỉ xảy ra trong IE10 (Chrome hoạt động tốt mọi lúc). Nó dường như cũng liên quan đến Knockout, vì một tập hợp các liên kết được mã hóa cứng không thể hiện cùng một vấn đề.

Để minh họa, tôi đã bị tước đi mọi thứ nhưng tối thiểu để tái tạo vấn đề và tạo ra hai ví dụ jsbin:

Ví dụ 1 (với Knockout):http://jsbin.com/aretis/2/

Để xem các vấn đề, mở liên kết ở trên và nhấp vào "Bản ghi số 1", sau đó "Baz", sau đó "Ghi lại # 1" một lần nữa. URL cho bản ghi 1 sẽ xuất hiện trong thanh địa chỉ, nhưng tuyến đường cho bản ghi đó sẽ không được nối vào danh sách.

Ví dụ 2 (không có Knockout):http://jsbin.com/amivoq/1/

Trong ví dụ này, tôi có một danh sách tĩnh của liên kết kỷ lục thay vì một danh sách dữ liệu ràng buộc. Nhấp vào bất kỳ liên kết nào (theo thứ tự bất kỳ) sẽ dẫn đến tuyến đường đó được nối vào danh sách (vì nó nên).

Một lời nhắc nhở rằng những điều này phải được chạy trong IE để tái tạo sự cố.

Bất kỳ ý tưởng nào?

Answer 1

Theo nhận xét của tôi ở trên, tôi đã giải quyết vấn đề này bằng cách chỉ bắt sự kiện window.hashchange và phân tích chính URL đó. Đây là phần duy nhất của Sammy.js tôi đã thực sự sử dụng và tôi đã không có bất kỳ may mắn theo dõi vấn đề thực tế. Hy vọng rằng, điều này sẽ giúp người khác.

Điều đầu tiên tôi làm là kết sự kiện hashchange:

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

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

này gọi là phân tích cú pháp URL sau:

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

Các chức năng như ShowAccountDetailFromId() và SwitchToPanel() chỉ hiển thị và cư (sử dụng các cuộc gọi Ajax cho các dịch vụ web) thích hợp <div>. Đây có lẽ là một cách tiếp cận hoàn toàn ngây thơ, nhưng nó đang hoạt động (tức là bạn có thể đánh dấu các URL, nút quay lại và công việc lịch sử trình duyệt, vv) Lời xin lỗi của tôi cho câu trả lời "không trả lời".