WinJS listview itemtemplate 다른 페이지로 이동

알아낼 수없는 다음과 같은 문제점이 있습니다. 나는 listview와 pageControl있다. 목록에는 항목 템플릿 설정이 있으며 js 스크립트에서 목록을 바인딩합니다. 항목을 클릭하면 다른 pageControl을 탐색 할 때 이벤트 핸들러를 추가했습니다. 이벤트가 발생하지만 WinJS.Navigation.Navigate 할 때 두 번째 페이지가로드되지 않습니다.WinJS listview itemtemplate 다른 페이지로 이동

1 페이지 HTML :

<div class="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template"> 
     <div style="width: 100%; height: 100%;"> 
      <!-- Displays the "title" field. --> 
      <h4 data-win-bind="innerText: name"></h4> 

      <!-- Displays the "picture" field. --> 
      <img src="#" style="width: 100%; height: 100%;" data-win-bind="alt: name; src: imageDefault" /> 
     </div> 
    </div> 


    <div class="collection fragment"> 
     <header aria-label="Header content" role="banner"> 
      <button class="win-backbutton" aria-label="Back" disabled type="button"></button> 
      <h1 class="titlearea win-type-ellipsis"> 
       <span class="pagetitle">Welcome to collection </span> 
      </h1> 
     </header> 
     <section aria-label="Main content" role="main"> 

      <div id="basicListView" 
       data-win-control="WinJS.UI.ListView" 
       data-win-options="{itemDataSource : Data.items.dataSource, 
        itemTemplate: select('.mediumListIconTextTemplate'), 
        layout: {type: WinJS.UI.GridLayout, maxRows:1}}"> 
      </div> 

     </section> 
    </div>

페이지 1 JS :

WinJS.UI.Pages.define("/pages/guitarCollection/guitarCollection.html", { 
     // This function is called whenever a user navigates to this page. It 
     // populates the page elements with the app's data. 
     ready: function (element, options) { 
      var list = document.getElementById("basicListView"); 
      list.itemDataSource = Data.items.dataSource; 
      list.addEventListener("iteminvoked", this._itemInvoked); 

      WinJS.UI.processAll(); 
     }, 

     unload: function() { 
      // TODO: Respond to navigations away from this page. 
     }, 

     updateLayout: function (element, viewState, lastViewState) { 
      /// <param name="element" domElement="true" /> 

      // TODO: Respond to changes in viewState. 
     }, 

     _itemInvoked: function (args) { 
      var name = Data.items.getAt(args.detail.itemIndex).name; 
      WinJS.Navigation.navigate("/pages/page2/page2.html", { name: name}); 
     } 

    });

출처

2012-11-19 Ioni

알아낼 수 있습니다. 올바른 탐색 경로를 따르지 않았습니다. PageControl을 사용하고 있기 때문에 page1을 호출하는 페이지는 ' Ioni

탐색의 유형 표기 일반적인 기술이있어 주목에 : http://msdn.microsoft.com/en-us/library/windows/apps/jj663505.aspx

링크 처리기 함수 만들기
일반 href처럼 탐색하는 대신 탐색 프레임 워크를 사용하는 href의 클릭 이벤트를 가로 채기. 당신의 home.js

 

linkClickEventHandler: function (eventInfo) { 
      eventInfo.preventDefault(); 
      var link = eventInfo.target; 
      WinJS.Navigation.navigate(link.href); 
     }

이 추가 한 다음 준비 이벤트에 다음 코드를 추가

 

// This function is called whenever a user navigates to this page. It 
// populates the page elements with the app's data. 
ready: function (element, options) { 
    WinJS.Utilities.query("a").listen("click", this.linkClickEventHandler, false); 
    .. 
    ..

href를 클릭

이 차단되고 탐색 프레임 워크가 사용됩니다 -이 가정 default.js에 내비게이션 컨트롤이 있습니다. 그렇지 않으면 내비게이션 컨트롤이 예상대로 작동하지 않습니다 (내비게이션 컨트롤이 이러한 이벤트에 연결하기 때문에) default.html에 다음과 같은 nav 컨트롤이 있습니다.

 

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

출처

2013-03-08 08:05:04

WinJS listview itemtemplate 다른 페이지로 이동

답변

관련 문제