2017-11-15 9 views
1

내 SAPUI5 응용 프로그램에서 주 레이아웃 컨테이너로 sap.tnt.Toolpage를 사용하고 있습니다. SideNavigation은 응용 프로그램 링크 목록을 보여 주며 mainContents는 sap.ui.core.routing.Router를 사용하여 동적으로로드됩니다. 사용자가 탐색하는 것을 방지하는 방법은 무엇입니까?

내가이 다음 내 데이터 소스에서 데이터 컨트롤을의 결합하는 상세보기를로드

var router = sap.ui.core.UIComponent.getRouterFor(this); 
router.navTo("MyDetailRoute", { 
    detailItemId: oItem.getBindingContext("oDataSourceName").getProperty("DETAILID") 
}); 

을 사용하고 상세 페이지로 이동합니다.

변경 사항을 서버에 다시 저장하도록 사용자를 기억하려고 할 때 문제가 발생합니다. 기본적으로 사용자가 a) 내비게이션을 중단하여 a) 사용자가 변경 사항을 취소하거나, b) 변경 사항을 저장하거나, c) 세부 정보 페이지에 머물고 싶을 때. a)와 b)는 쉽게 구현할 수 있지만 탐색을 방지하는 방법을 알지 못합니다.

내보기 onBeforeHide에 가입하여 지금까지 시도했다 :

var view = this.getView(); 
var that = this; 
view.addEventDelegate({ 
    onBeforeHide: function (evt) { 
     var oModel = that.getModel("oDataSourceName"); 
     if (oModel.hasPendingChanges()) { 
      // How to prevent leaving the page? 
     } 
    } 
}); 

작동하지 않는 내가 시도한 것 :

  1. evt.preventDefault를();
  2. evt.stopPropagation();
  3. throw 'something';

옵션 3) 실제로

누구 아이디어가 있습니까 ... 탐색을 방지하지만, URL 그럼에도 불구하고 변화하기 때문에 나중에 문제로 연결?

편집 : cschuff의 답변 덕분에 제대로 작동 할 수있었습니다. 미래에 같은 문제가 누군가를 위해 :

// In onInit: Subscribe to onBeforeHide in order to un-register event handler for hashchange 

onInit: function() {   
    this.getRouter().getRoute("MyDetailRoute").attachPatternMatched(this.onNavigated, this); 

    var view = this.getView(); 
    var that = this; 

    view.addEventDelegate({ 
     onBeforeHide: function (evt) { 
      $(window).off('hashchange'); 
     } 
    }); 
} 


// Then in onNavigate stoppen the router, saving the current window location and subscribing to hashchange (only once) 
// In hashchange use helper variable m_bSelfURLSetting to prevent the function from running when triggered by URL restore (above) 
// In the handler checking for pending changes and either resore the old URL or starting the router again if the user wants to quit or if there are no changes 

onNavigated: function (oEvent) {    

    this.getRouter().stop(); 
    this.m_strHref = window.location.href; 
    var that = this; 

    $(window).off('hashchange').on('hashchange', function (e) { 
     if (that.m_bSelfURLSetting) { 
      that.m_bSelfURLSetting = false; 
      return; 
     } 

     var oModel = that.getModel("oDataSourceName"); 
     if (oModel.hasPendingChanges()) { 
      var leave = confirm('There are unsaved changes.\r\n\r\nDo you really want to leave the page?'); 
      if (!leave) { 
       // re-set the URL 
       that.m_bSelfURLSetting = true; 
       window.location.href = that.m_strHref; 
      } 
      else { 
       that.getRouter().initialize(false); 
       oModel.resetChanges(); 
      } 
     } else { 
      that.getRouter().initialize(false); 
     } 
    }); 
} 

이 결정적으로 하나가 자랑하는 코드의 종류 ... 윈도우 객체에

+0

가장 좋은 방법은? 나는 시도하지 않았다. – cschuff

+1

기본적으로 솔루션에서 router.stop()을 호출합니다. 1. 구체적인 단계를 통해 내 게시물을 업데이트했습니다. 당신의 도움을 주셔서 감사합니다! –

+0

위대한! 도와 줘서 다행 :) – cschuff

답변

1

해결책 1 : 라우터 방법 stopinitialize을 사용하여 라우팅을 완전히 비활성화 할 수 있습니다. 이렇게하면 URL 해시의 변경 내용을 듣지 않아 모든 라우팅 트리거가 무시됩니다. 컨트롤러에서

:

var oRouter = sap.ui.core.UIComponent.getRouterFor(this); 
oRouter.stop(); 

// later 
// passing true will interpret and navigate to the current hash (since 1.48.0) 
oRouter.initialize(true); 

솔루션 # 2 : sap.ui.core.routing.HashChanger 이벤트를 사용하여 자체 라우팅 인터럽트. hashChangedhashReplaced은 라우터에서 내부적으로 사용합니다. sap.ui.core.routing.RouterrouteMatched 또는 beforeRouteMatched을 취소 할 수 있습니다 (문서에서 힌트를 제공하지 않음).

솔루션 # 3 : 덜 제한적인 해결책은 특정보기에서 라우팅을 트리거하는 모든 작업을 방해하는 것입니다. 브라우저 백 또는 수동으로 url-hash를 변경하면 여기서도 작동합니다 (기본 JS 이벤트 beforeunloadhashchange이 여기에서 도움이 될 수 있음).

BR Chris