탐색 모델
그리드, 분할 및 탐색 앱 프로젝트 템플릿에 사용된 탐색 모델은 JavaScript를 사용하여 Windows용으로 작성된 여러 페이지의 Windows 스토어 앱에 권장되는 탐색 모델입니다. 이 모델에서 페이지의 URI를 통해 로드된 논리 HTML 페이지는 앱 수준의 단일 컨텍스트로 로드됩니다. 논리 페이지는 대체로 사용자 작업에 대한 응답으로 필요에 따라 앱 컨텍스트에 로드됩니다. 일반적으로 웹 개발자는 이 유형의 탐색 모델을 단일 페이지 탐색이라고 합니다. navigator.js 파일에서 탐색 모델을 구현합니다. 단일 페이지 탐색 모델은 보다 매끄럽고 앱과 유사한 페이지 간 전환을 제공하며, 스크립트가 언로드되지 않으므로 더 쉽게 상태를 관리할 수 있게 해 줍니다.
빈 템플릿 같은 기타 프로젝트 템플릿에는 navigator.js 파일이 포함되어 있지 않습니다. 이 템플릿에서는 navigator.js 프로젝트 파일을 수동으로 추가하지 않는 경우 사용자 지정 탐색을 구현해야 합니다. 페이지 간 탐색을 위해 WinJS.Navigation.navigate를 사용하는 경우 WinJS.Navigation.navigate는 탐색을 직접 수행하지 않는다는 점을 기억해야 합니다. 이 함수는 현재 위치와 관련된 상태 개체를 저장한 후 WinJS.Navigation.onnavigated 이벤트를 호출하는 래퍼 함수입니다. JavaScript를 사용하는 Windows 스토어 앱에서 단일 페이지 탐색을 사용하는 예제 및 탐색에 대한 자세한 내용은 빠른 시작: 단일 페이지 탐색 사용을 참조하세요.
앱에 가장 적합한 탐색 패턴을 선택하는 방법을 보려면 탐색 패턴을 참조하세요. 또한 앱 기능 전체 프로세스 시리즈의 일부로 플랫 탐색 패턴의 작동 방법을 참조하세요.
그리드 형태, 분할 및 탐색 앱 템플릿에서 사용되는 단일 페이지 탐색 모델에서, 앱의 탐색 컨트롤(default.html에 있음)로 선언된 DIV 요소는 모든 앱 페이지에 대한 콘텐츠 호스트를 제공합니다. DIV 요소는 JavaScript용 Windows 라이브러리의 data-win-control 특성을 사용하여 탐색 컨트롤로 선언되며, 이 컨트롤이 앱의 탐색 모델을 제공합니다. 모든 페이지 콘텐츠는 이 DIV에 로드됩니다. 여기에 표시된 요소는 분할 템플릿의 default.html에 포함되어 있습니다.
<div id="contenthost" data-win-control="Application.PageControlNavigator"
data-win-options="{home: '/pages/items/items.html'}">
</div>
여기에 표시된 탐색 컨트롤 PageControlNavigator는 탐색에 사용되는 여러 기능을 정의합니다. 이 컨트롤은 navigator.js에서 구현됩니다.
WinJS.Namespace.define("Application", {
PageControlNavigator: WinJS.Class.define(
// Define the constructor function for the PageControlNavigator.
function PageControlNavigator(element, options) {
// Initialization code.
}, {
// Members specified here.
}
), // . . .
});
생성자 함수가 탐색 컨트롤을 초기화합니다. 몇 가지 중요한 작업에는 WinJS.Navigation.onnavigating 이벤트와 같은 WinJS 이벤트에 대한 처리기 설정과 앱의 홈페이지 설정 등이 있습니다. 홈 값은 contenthost DIV 요소의 data-win-options 특성에 지정됩니다.
// Initialization code.
this.home = options.home;
// . . .
// The 'nav' variable is set to WinJS.Navigation.
addRemovableEventListener(nav, 'navigating', this._navigating.bind(this), false);
addRemovableEventListener(nav, 'navigated', this._navigated.bind(this), false);
콘텐츠 호스트에 로드되는 페이지는 WinJS.UI.Pages 네임스페이스에 정의된 페이지 컨트롤입니다. 페이지 컨트롤은 논리 페이지의 역할을 하는 HTML, CSS 및 JavaScript의 모듈식 단위입니다. 페이지 컨트롤을 사용하는 경우 라이브러리에서 미리 정의된 순서로 자동으로 호출하는 미리 정의된 메서드 집합이 있습니다. WinJS.UI.Pages.define 함수는 이러한 구현에 대한 메서드를 표시합니다. 다음은 split.js(분할 앱 템플릿)에 있는 define 함수의 일부입니다.
WinJS.UI.Pages.define("/pages/split/split.html", {
// . . .
ready: function (element, options) {
// ready function implementation.
},
// . . .
});
프로젝트 템플릿은 마지막 내부 페이지 컨트롤 메서드인 ready 함수를 구현하고 일부 서식 파일에서는 init 함수를 구현합니다. split.js에 정의된 다른 함수는 템플릿과 관련이 있습니다. ready 함수는 페이지가 로드되고 완전히 처리되었을 때 호출됩니다. 이 함수에는 각 페이지의 초기화 코드가 포함되어야 합니다. 이 코드는 각 페이지에 고유합니다.
팁 내부 페이지 컨트롤 함수는 load, init, processed, ready순으로 호출됩니다. 일반적으로 ready 및 init 함수만 Windows 스토어 앱에서 구현됩니다. 자세한 내용은 IPageControlMembers.init를 참조하세요.
새 페이지로 이동하기 위해 각 템플릿 앱은 WinJS.Navigation.navigate를 호출합니다. 이 호출이 발생하면 탐색 컨트롤이 HTML 파일을 콘텐츠 호스트 DIV 요소에 논리 페이지로 로드합니다. 템플릿 페이지에 있는 여러 함수는 다음과 같이 WinJS navigate 함수를 호출합니다.
- _itemInvoked 함수 - 목록 보기의 항목 선택을 처리합니다. 현재 페이지 및 컨텍스트에 따라 개별 항목이나 그룹이 선택될 수 있습니다.
- _selectionChanged 함수 - split.html(분할 템플릿)의 항목 선택을 처리합니다.
일부 템플릿에서는 현재 보기 상태에 따라 HTML 페이지의 JavaScript 파일에 있는 특정 함수가 뒤로 단추 기록을 수정할 수도 있습니다. 예를 들어 분할 앱 템플릿에서는 앱이 마스터/자세히 보기라는 템플릿 정의 보기 상태에 있는 경우 앱이 뒤로 단추 기록을 수정합니다. 자세한 내용은 Windows 스토어 앱용 JavaScript 프로젝트 템플릿에서 "보기 상태 처리" 섹션을 참조하세요.