WinJS에서 페이지를 다시로드하면 이벤트 처리기가 연결되지 않습니다.

Question

WinJS 응용 프로그램 (C#/XAML이 아닌 HTML/JS를 사용하는 Windows 8.1 응용 프로그램)이 있습니다.

default.html에 맞춤형 탐색 바를 구현했으며 일부 버튼에는 클릭 이벤트 리스너가 첨부되어 있습니다. 각 처리기는 탐색 버튼에 해당하는 페이지의 URL로 nav.navigate()을 호출합니다.

내 페이지 중 하나 (/pages/myPage/myPage.html)에 여러 개의 버튼이 있습니다. 각 버튼에는 페이지의 ready 함수에 바인딩 된 클릭 이벤트 리스너가 있습니다. 여러 페이지 사이를 탐색 할 때 잘 작동합니다.

그러나 myPage (작업 버튼 클릭 핸들러 사용)에있는 경우 다시 myPage의 탐색 바 버튼을 클릭하면 페이지가 다시로드되는 것처럼 보입니다. ready 함수가 호출 된 것 같습니다 (예 : console.log 문이 실행 됨). 페이지의 버튼이 클릭 핸들러를 완전히 잃어 버리는 것처럼 보입니다.

다른 페이지로 이동 한 다음 뒤로 이동하면 단추가 제대로 작동합니다. 하지만 내가 무엇을 하든지 페이지 자체를 탐색하여 페이지를 다시로드 (nav.navigate("/pages/myPage/myPage.html")에있는 동안 myPage)하면 클릭 핸들러가 손실됩니다.

왜 이런 일이 발생합니까? 내 ready 함수가 호출되었지만 클릭 핸들러가 다시 연결되지 않습니다.

myPageNavButton.addEventListener("click", function() { 
     nav.navigate('/pages/myPage/myPage.html');   
    }); 

Answer 1

페이지 :

여기

ready: function (element, options) { 
     document.getElementById("myButton").addEventListener("click", this.myButtonClicked); 
    }, 

가 myPage 탐색 버튼의 클릭 이벤트 리스너가 (이 코드는 default.js에)의 모습입니다 : 여기

는 myPage의 준비 기능의 모습입니다 WinJS의 nav는 DOM 교체의 문제 일뿐입니다. 탐색을 수행하면 대상 "페이지"내용이 DOM에로드 된 다음 이전 "페이지"내용이 언로드됩니다. _navigating 메소드의 navigator.js에서이를 볼 수 있습니다. 로드되는 페이지에 대한 새 요소를 만들고 그 부분을 렌더링 한 다음 이전 페이지를 언로드합니다.

그러나 새 페이지의 준비 메서드는 이전 페이지가 언로드되기 전에 호출됩니다.이 메서드는 WinJS 2.0에서 변경되었으므로 WinJS 1.0은 준비를 호출하기 전에 이전 페이지를 언로드했습니다. 이것은 이미로드 된 동일한 페이지로 이동하면 myPage.html (B)를로드 할 때 myPage.html (A)가 DOM에있는 것입니다. 준비된 메소드에서 코드를 실행하면 getElementById는 myPage.html (A)에있는 버튼을 찾아 해당 요소에 핸들러를 연결합니다. 하지만 준비가 끝나면 myPage.html (A)가 언로드되므로 핸들러가 손실됩니다. 그리고 myPage.html (B)의 단추에 핸들러를 연결하지 않았으므로 불활성입니다.

그럼 어떻게 할 수 있습니까? 가장 좋은 해결책은, 내 마음 속에, 처음에는 같은 페이지로 이동하는 것을 피하는 것입니다. 왜냐하면 그것은 장기적으로 다른 위험에 처했을 뿐이 기 때문입니다. 이렇게하려면 대상 페이지에 이미 있는지 확인하여 nav.navigate에 대한 호출을 마무리하십시오.

function navigateIfDifferent(target) { 
    var page = document.getElementById("contenthost").winControl.pageControl; 
    var fullTarget = "ms-appx://" + Windows.ApplicationModel.Package.current.id.name + target; 
    if (fullTarget !== page.uri) { 
     WinJS.Navigation.navigate(target); 
    } 
} 

이 사용하고있는 PageControlNavigator 제어합니다 (VS 템플릿을주는 것입니다) default.html을에 "contenthost"라는 DIV에 있다고 가정합니다 : 여기에 수행하는 기능의 구현입니다 .필자가 수행 할 작업은 대상 페이지의 전체 인 패키지 URI를 작성하고 현재 페이지 컨트롤의 URI (전체 인 패키지 URI이기도 함)와 비교하는 것입니다. 현재 페이지 URI에서 ms-appx : // 부분을 제거하고 대상 URI와 비교할 수도 있습니다. 어느 쪽이든.

어쨌든,이 기능을 사용하면 navigateIfDifferent로 nav.navigate에 대한 호출을 바꿔야합니다. 그러면 좋을 것입니다.