WinJs의 뷰 상태 변경 이벤트는 어디에 있습니까?

Question

보기 상태가 스냅에서 채우기에서 전체 화면으로 바뀌면 Windows 8에서,

어떻게 이러한 이벤트를 잡아 WinJs로 응답 할 수 있습니까?

Answer 1

보기 상태 변경 사항을 잡는 방법에 대한 블로그 게시물 this을 참조하십시오. 기본적으로 권고는 다음과 같이 뷰 상태를 확인 후 resize 이벤트를 잡기로 귀결 : 당신이 윈도우 8 template for Javascript에 대한 마이크로 소프트 비주얼 스튜디오 익스프레스 2012 RC를 보면 당신은 탐색기 같은 것을 볼 수

window.addEventListener("resize", onResize); 


function onResize() { 
    // Update view for the new window size 
    updateView(); 
} 

function updateView() { 
    // Query for the current view state 
    var myViewState = Windows.UI.ViewManagement.ApplicationView.value; 

    var viewStates = Windows.UI.ViewManagement.ApplicationViewState; 
    var statusText; 

    // Assign text according to view state 
    switch (myViewState) { 
     case viewStates.snapped: 
      statusText = "This app is snapped!"; 
      break; 
     case viewStates.filled: 
      statusText = "This app is in filled state!"; 
      break; 
     case viewStates.fullScreenLandscape: 
      statusText = "This app is full screen landscape!"; 
      break; 
     case viewStates.fullScreenPortrait: 
      statusText = "This app is full screen portrait!"; 
      break; 
     default: 
      statusText = "Error: Invalid view state returned."; 
      break; 
    } 

. JS : 뷰 상태 변경이 CSS에 지정된 CSS 속성 또는 레이아웃에 영향을 미칠 때

window.onresize = this._resized.bind(this); 

_resized: function(args) { 
    if (this.pageControl && this.pageControl.updateLayout) { 
     this.pageControl.updateLayout.call(this.pageControl, this.pageElement, appView.value, this.lastViewstate); 
    } 
    this.lastViewstate = appView.value; 
}, 

//*page*.js 

updateLayout: function (element, viewState, lastViewState) { 
    /// <param name="element" domElement="true" /> 
    var listView = element.querySelector(".itemslist").winControl; 
    if (lastViewState !== viewState) { 
      if (lastViewState === appViewState.snapped || viewState === appViewState.snapped) { 
       var handler = function (e) { 
       listView.removeEventListener("contentanimating", handler, false); 
       e.preventDefault(); 
      } 
      listView.addEventListener("contentanimating", handler, false); 
      var firstVisible = listView.indexOfFirstVisible; 
      this._initializeLayout(listView, viewState); 
      if (firstVisible >= 0 && listView.itemDataSource.list.length > 0) { 
       listView.indexOfFirstVisible = firstVisible; 
      } 
     } 
    } 
}, 

_initializeLayout: function (listView, viewState) { 

    if (viewState === appViewState.snapped) { 
     listView.layout = new ui.ListLayout(); 
    } else { 
     listView.layout = new ui.GridLayout(); 
    } 
}, 

this MSDN 페이지에 따르면 당신은 또한 미디어 쿼리를 사용할 수 있습니다. 다른 모든 변경 사항에 대해서는 onResize를 사용해야합니다.