9

데이터 바인딩에 Knockout.js를 사용하고 클라이언트 측 (해시 기반) URL을 라우팅하기 위해 Sammy.js를 사용하는 단일 페이지 응용 프로그램이 있습니다.Sammy.js 경로가 IE10의 넉 아웃 경계 링크에서 실행되지 않음

그러나 Internet Explorer에서 이상한 문제가 발생합니다. 링크를 클릭하면 브라우저의 주소 표시 줄에있는 URL이 변경되지만 해당 Sammy 경로는 실행되지 않습니다.

매번 발생하지는 않지만 (오류가 계속해서 발생 함) IE10에서만 발생합니다 (Chrome은 매회 잘 작동 함). 하드 코딩 된 링크 집합이 동일한 문제를 나타내지 않기 때문에 녹아웃과 관련이있는 것 같습니다. ,http://jsbin.com/aretis/2/

문제를 보려면 : (녹아웃)

예 1 :

가 나는 문제를 다시 최소한 제외한 모든 것을 멀리 제거하고 두 jsbin 예제를 만들었습니다, 설명하기 위의 링크를 열고 "Record # 1"을 클릭 한 다음 "Baz"를 클릭하고 "Record # 1"을 다시 클릭하십시오. 레코드 1의 URL이 검색 주소창에 나타나지만 해당 레코드의 경로는 목록에 추가되지 않습니다.

(녹아웃)없이 실시 예 2 :이 예에서http://jsbin.com/amivoq/1/

는 I 대신 데이터 바인딩리스트의 레코드 링크들의 정적리스트를 가지고있다. 임의의 순서로 링크를 클릭하면 해당 경로가 목록에 추가됩니다.

문제를 재현하려면 IE에서 실행해야한다는 것을 상기시켜주십시오.

아이디어가 있으십니까?

+0

저는 IE 10에서 지금도 같은 문제가 있습니다. 정품 인증 방법을 사용하고 있습니까? 그것은 앞뒤로 전환 할 때 호출됩니까? – Boone

+1

$ (window) .on ("hashchange")에 바인딩하고 내 자신의 URL 라우터를 작성함으로써 문제를 해결했습니다 (아마도 "해결 된"이 더 좋은 문구입니다). 내 요구는 매우 간단했고, Sammy.js의 기능 중 약 10 % 만 사용하고 있다고 생각합니다. 나는 아직도 내 문제의 근원에 대해 궁금해서이 질문을 떠날거야. –

+0

sammy JS unminified를 사용하여 예제 1을 다시 만들 수 있습니까? SammyJS를 기반으로하는 자체 라우터도 만들었습니다. @Matt Peterson, 팁 주셔서 감사합니다. 나는 '해시 체인지'사건을 알지 못했다. 창문을 확인하고 있었어.타이머가있는 위치 :). – Damien

답변

2

위의 내 의견에 따라이 문제를 해결하기 위해 window.hashchange 이벤트를 catch하고 URL을 직접 파싱했습니다. 이것은 Sammy의 유일한 부분입니다. 실제로 사용하고 있었고 실제 문제를 추적하는 행운이 없었습니다. 바라기를 이것은 다른 누군가를 도울 것입니다.

내가 한 첫 번째 일은 hashchange 이벤트 바인딩 된

: 단지 보여와 Ajax 호출을 사용하여 (웁니다 ShowAccountDetailFromId()SwitchToPanel() 같은

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

기능 :

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

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

이 다음 URL 파서 호출을 웹 서비스) 적절한 <div>. 이것은 아마도 완전히 순진한 접근 일 수 있지만 작동 중입니다 (예 : URL, 뒤로 버튼 및 브라우저 기록 작업을 북마크에 추가 할 수 있음). 비 응답 "답변"에 대해 사과드립니다.