Grid App의 여러 항목 템플릿

Question

Grid 응용 프로그램 템플릿을 기반으로 Windows Store 응용 프로그램을 개발하고 있습니다. 새 프로젝트를 만들 때 응용 프로그램에 대해 생성 된 샘플 데이터가 있습니다. 앱에는 홈, 그룹화 된 항목 및 항목 세부 정보의 세 페이지 만 있습니다.

항목 세부 정보에 대해 다른 템플릿을 사용할 수 있는지 궁금해합니다. 그렇다면 어떻게해야합니까?

예를 들어, 스마트 폰 목록이 포함 된 그룹과 프린터 목록이 포함 된 그룹이 있습니다. 스마트 폰 항목 세부 정보 템플릿에서 "메모리 카드", "스피커폰"및 "운영체제"와 같은 필드가있는 반면 프린터 항목 세부 정보 템플릿에서는 "속도", "수락 됨 카트리지 "및"용지 크기 "가 있습니다.

항목 세부 템플릿을 추가하고 어떤 항목을 보았는지에 따라 올바른 템플릿을 사용하려면 어떻게해야합니까? http://babaandthepigman.wordpress.com/2012/02/08/datatemplateselector-winrt/을 살펴 보았지만 XAML 응용 프로그램에만 해당되는 것으로 보입니다. 저는 XAML/VB/C++/C#을 사용하지 않고 JavaScript와 HTML5만을 사용하고 있습니다.

Answer 1

그리드 프로젝트 템플릿의 세 페이지는 groupedItems ("허브"), groupDetail ("섹션") 및 itemDetail ("세부 사항")입니다. 나는 실제로 그들이 "허브", "섹션"및 "세부 사항"페이지에 이름을 짓기를 바랍니다.

허브 (groupedItems) 페이지의 항목 타일이 항목 유형에 따라 다르게 보이도록 여러 항목 템플리트가있는 경우, 가장 쉬운 방법은 여러 항목 템플리트 (WinJS.Binding.Template)를 HTML에 저장 한 다음 사용자 정의 템플리트 선택 기능을 작성하십시오. 그렇게 어렵지 않습니다. 내 codeSHOW 앱 (codeshow.codeplex.com)을 보면 예제를 볼 수 있습니다 ... home.js 페이지를 참조하십시오. 출처가 온라인이므로 해당 페이지 here을 볼 수 있습니다.

사용자가 허브에서 특정 항목을 클릭하면 전화 대 프린터에 대한 전체 정보 페이지로 연결될 수 있도록 여러 세부 정보 (itemDetail) 페이지가있는 경우를 말합니다. 단순히 여러 페이지가 있고 어떤 페이지로 이동했는지 지능적으로 파악해야합니다. 사용자가 허브에서 전화를 클릭하면 /pages/phone/phone.html로 이동합니다. 그들이 프린터를 클릭하면 /pages/printer/printer.html로 이동합니다.

마지막으로 엔티티 (예 : 휴대 전화 및 프린터)가 충분히 유사하면 하나의 페이지로 유지하면서 해당 페이지를 똑똑하게 만들어 올바른 항목의 템플릿을 수정할 수 있습니다. 이 경우 페이지 (WinJS.Binding.Template 다시)에 두 개의 템플릿을 만들 수 있으며 엔티티가 페이지 ('옵션'부분 ready(element,options))에 전달되면이를 검사하고 엔티티 유형을 살펴보십시오 (예 : 전화 또는 프린터) 데이터를 올바른 템플릿으로 렌더링합니다. codeSHOW의 Binding and Templating 및 Fragments and Pages 데모가 도움이 될 수 있습니다.

더 많은 도움이 필요하면 Microsoft Developer Evangelist (usdpe.ohours.org)와 1 : 1로 일정을 잡을 수 있습니다. 재미있어!