0

Typescript 및 WinJS 용 Microsoft의 다중 장치 하이브리드 앱 템플릿을 사용하여 단일 페이지 탐색 앱을 만들고 있습니다. 이 응용 프로그램은 Win8, WP8 및 Android 용으로 제작되었으며 에뮬레이터에 잘 적용됩니다. 그러나 Win8 및 WP8 앱은 앱의 첫 번째 페이지로 올바르게 이동하지 않습니다. Android는 동일한 코드를 사용하여 잘 탐색합니다.Cordova Typescript app + WinJS.UI.Pages.render는 Win8, WP8에서는 실패하지만 Android에서는 작동합니다.

WinJS에는 탐색 상태 저장 기능이 있지만 실제로 탐색 자체는 수행하지 않습니다. 백과 사전 인 Typescript/WinJS 예제에서 실제 네비게이션 코드를 빌려서 here을 찾았습니다. 실패 할 것

관련 부분은 다음과 같습니다 렌더링 명령이 리턴 한 후

args.detail.setPromise(
      WinJS.Promise.timeout().then(function() { 
       if (oldElement.winControl && oldElement.winControl.unload) { 
        oldElement.winControl.unload(); 
       } 
       return WinJS.UI.Pages.render(args.detail.location, newElement, args.detail.state, parented); 
      }).then((control) => { 
        this.element.appendChild(newElement); 
        this.element.removeChild(oldElement); 
        oldElement.innerText = ""; 
        this.navigated(); 
        parentedComplete(); 
       }) 
      ); 

, 안드로이드, 요소의 innerHTML을 페이지 경로 (args.detail.location)에서 지적이 포함되어 있습니다. Win8 및 WP8에서 요소는 여전히 비어 있습니다.

이 코드 부분은 루트 index.html 파일의 WinJS 특정 HTML에 의해 트리거됩니다.

<div id="contenthost" data-win-control="TurnstileTS.PageControlNavigator" data-win-options="{home: './views/home/HomeView.html'}"></div> 

이 경로는 Android에서 잘 작동합니다. Ripple의 웹 기반 Android 에뮬레이터의 절대 경로는 http://localhost:4400/views/home/HomeView.html입니다.

이 경로는 WP8 또는 Win8에서는 작동하지 않지만 예외도 발생시키지 않습니다. 화면이 그냥 비어 있습니다. Win8 앱의 디버그 실행 중 절대 경로는 ms-appx://io.cordova.turnstile/www/views/home/HomeView.html입니다.

나는 무엇이 잘못 될지 모른다. WinJS의 최신 버전과 WinJS 빌드에 포함 된 타이핑을 사용하고 있습니다.

편집 퍼즐의 또 다른 조각 : this sample는 코르도바와 WinJS를 사용하지만, 타이프 라이터 없습니다. 모든 것은 자바 스크립트에 있습니다. 자체 네비게이터 기능도 가지고 있습니다. 이것은 Win8 및 WP8에서 작동하는 것 같습니다. 내가 말할 수있는 한, WinJS 라이브러리에서 같은 함수를 호출하고있다. 나는이 샘플과 내가하려고하는 것 사이에 큰 차이점을 발견 할 수 없다.

편집 # 2 OK Win8에서 실행하면, 자바 스크립트 콘솔이 오류를 뱉어 시작되었음을 발견 한 후, 나는이 메시지를 얻을 :

사실
APPHOST9623: The app couldn’t resolve ms-appx://57059lmcpherson.turnstile/views/home/HomeView.css because of this error: RESOURCE_NOT_FOUND. 

, 이러한 메시지의 무리가있다 . 그래서 뭔가 잘못된 것이 있습니다.

경로의 시작 슬래시 사용에 대한 내용은 Windows/Cordova 앱에서 용납되지 않으므로 다시 작성하려고 시도했습니다. javascript 파일이 html 파일과 동일한 하위 디렉토리에 있으면 경로 참조는 슬래시가없는 파일 이름이어야합니다. 그러나, 자바 스크립트 콘솔은 Win8에서 (빌드 중에 생성 된) www 폴더의 루트를 의미하는 것으로 해석되었음을 보여줍니다. "/views/home/HomeView.css"를 사용하여 실제 경로로 하드 코딩하려고하면 여전히 파일을 찾을 수 없습니다. HTML 문서의 본문이 자바 스크립트 콘솔이 머리에 스크립트를로드하려고 시도했음을 나타내는 경우로드되지 않는 이유는 정확히 알 수 없습니다.

답변

3
edit - 11/14/2014 - post CTP3 release! 

MDHA 템플릿의 또 다른 문제는 ... winstore-compat입니다.js shim 파일을 사용하여 타사 라이브러리를 Windows 8 응용 프로그램 모델 (안드로이드 또는 iOS와 같은 webview가 아닌 ​​네이티브 액세스)와 호환되도록 만들면 WinJS 탐색 모델을 사용할 때 MDHA 템플릿에 문제가 발생합니다. 로컬 html 조각을 루트 html 페이지의 div로 여는 중 ... shim이이 조각을 가로 채고 전체 페이지가 자동으로 실패하게하는 방식으로 수정합니다. 심을 주석 처리하면 탐색 기능이 작동합니다. (이것은 merges/windows/scripts/platformOverrides.js에 있습니다.) 다른 타사 라이브러리를 사용할 수 없기 때문에 이것은 영구적 인 솔루션이 아닙니다.

문제는 WinJS github 발행 tracking page here에 등록됩니다.

end edit 

하나의 해결책은 여전히 ​​불만이지만, 공백 템플릿으로 시작하는 대신 단일 페이지 탐색의 알려진 작동 예제로 시작하는 것입니다.

This sample 이전에 링크 된 모든 JavaScript를 사용하고 단일 페이지 탐색과 함께 작동합니다. 나는 원래의 index.html과 index.js를 남겨 두었지만 모든 서브 페이지와 스크립트를 대체했다. 여전히 효과가 있습니다. 그런 다음 TypedMVVM 프레임 워크 파일에 추가했고 여전히 작동했습니다.

Typescript를 사용하여 내 자신의 단일 페이지 탐색을 구현 ​​한 방법이 무엇인지 잘 모르겠지만 지금은이 대안을 사용해 주셔서 감사합니다.

편집 - 또한 "/"문자는 Win8/WP8 프로젝트의 경로가 잘 작동하지 않는다는 것을 발견했습니다. 선행 점 "./"을 사용하거나 모든 경로를 현재 HTML 파일과 관련시켜야했습니다. (많은 ".."가 이전 디렉토리로 이동)

edit2 경로의 첫 번째 점은 매우 중요합니다. Win8 및 WP8 응용 프로그램에서의 바인딩은 전혀 작동하지 않았으며 마침내 페이지의 스크립트에서 간단한 문구까지 추적했습니다.

이 작동하지 않습니다

WinJS.UI.Pages.define("./views/main/MainView.html", new MainView()); 

내가 이것을 발견 한 후 뭔가를 깨는 느낌 :

WinJS.UI.Pages.define("/views/main/MainView.html", new MainView()); 

이 작업을 수행합니다.