OJET - 在离开我的页面之前如何提醒用户？

Question

I am working on a single page application using Oracle JET. In the page I'm building, I'm trying to alert the user when they try to leave the page without saving their changes. So when leaving the page I want to:

• Intercept the routing.
• Check if there are any changes.
• Give a popup if there are changes.
• Continue with routing if there aren't any unsaved changes.

I believe that this should be possible using the ojRouter ( doc link here ), but I have not gotten it to work. I have tried many approaches, but this is what I have ended up with so far:

EDIT: I have gotten a little further and managed to successfully access the canExit property, I edited my code block below. However, this still does not block routing.

oj.Router.sync().then(() => {
   const letrouterState = oj.Router.rootInstance;
   letrouterState.currentState().canExit = ableToExit();
});

function ableToExit() {
  let canExit;
  //function that will check if the page has unsaved changes
  if (ableToExit()) {
    canExit = false;
  } else {
    canExit = true;
  }
  return canExit;
}

I have also tried to use window.onhashchange . However, this only triggers an event when opening the page my page, not when leaving it.

I hope I made my problem clear and I am happy to clarify any of my request if needed. Would someone be able to help me? Thank you for your time in advance.

-Wouter

Answer 1

The ModuleViewModel interface implements the optional canExit method, which gets invoked on the beforeStateChange event of ModuleRouterAdapter . Assuming you use ModuleRouterAdapter in conjunction with <oj-module> , this is relatively easy to implement, you simply need to return a Promise and then either resolve or reject that.

Answer 2

Because intervening with the entire router became a very messy solution, we have decided to adjust the requirements and not do this anymore. Thanks to anyone that tried to help. Moral of the story is not to try this:).