WinJS.UI.Pages and navigator.js broken unload functionality

Question

Imagine a page registers a hotkey (using the great mousetrap.js) in its init() handler. It will of course unbind that key in the unload() handler.

So now imagine we have 2 pages, both registering for the same hotkey "f5".

WinJS.UI.Pages.define("page1.hml", {
  init: function() { 
    Mousetrap.bind("f5", function() {});
  }
  unload: function() {
     Mousetrap.unbind("f5");
  }
}

WinJS.UI.Pages.define("page2.hml", {
  init: function() { 
    Mousetrap.bind("f5", function() {});
  }
  unload: function() {
     Mousetrap.unbind("f5");
  }
}

When page2 is active, no hotkey "f5" is registered anymore. Thats due to the way navigator.js calls the unload method of "page1" after everything happened for "page2".The "f5" key registered by "page2" is unbound by page1's unload handler.

Answer 1

If you look at Top related threads on the left, you will see that unload() firing after loading another page is a known issue. I don't think it's considered a bug.

If you need to bind/unbind the hotkey in mousetrap.js, then you don't want to call Mousetrap.unbind if the location has changed to page2. You might try this in each page's unload() function, making sure that page2 is not the current page:

  unload: function() {
     if(WinJS.Navigation.location != "page2.html") {
         Mousetrap.unbind("f5");
     }
  }

In other words, if the page has changed to another page that registers the hotkey, you don't want to call Mousetrap.unbind. 

Answer 2

Yeah Mike, I saw the top related threads. Your idea is good, now I need to put that into a more generic way of handling things.