So currently in my windows 8 javascript app (based on the navigation template), upon navigation to the home page on app startup (home.html) from the default.js initialization point, in home.html's corresponding home.js file, I'm creating this gesture system to handle pinch to zoom and swiping back and forth (which works correctly):
(function () {
"use strict";
WinJS.UI.Pages.define("/pages/home/home.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
processed: function (element, options) {
MyGlobals.loadBooks();
if (!MyGlobals.localSettings.values['firstRunCompleted']) {
MyGlobals.localSettings.values['firstRunCompleted'] = true;
MyGlobals.loadXmlBooksIntoDatabase();
//MyGlobals.integrityCheck();
};
WinJS.Resources.processAll();
},
ready: function (element, options) {
var myGesture = new MSGesture();
var chapterContainer = document.getElementById("main-content-area");
myGesture.target = chapterContainer;
WinJS.Namespace.define("MyGlobals", {
myGesture: myGesture,
});
chapterContainer.addEventListener("MSGestureStart", this.gestureListener, false);
chapterContainer.addEventListener("MSGestureEnd", this.gestureListener, false);
chapterContainer.addEventListener("MSGestureChange", this.gestureListener, false);
chapterContainer.addEventListener("MSInertiaStart", this.gestureListener, false);
chapterContainer.addEventListener("MSGestureTap", this.gestureListener, false);
chapterContainer.addEventListener("MSGestureHold", this.gestureListener, false);
chapterContainer.addEventListener("pointerdown", this.gestureListener, false);
},
gestureListener: function (evt) {
console.log("in gesturelistener now");
if (evt.type == "pointerdown") {
MyGlobals.myGesture.addPointer(evt.pointerId);
return;
}
if (evt.type == "MSGestureStart") {
if (evt.translationX < -3.5) {
MyGlobals.nextChapterHandler();
};
if (evt.translationX > 3.5) {
MyGlobals.previousChapterHandler();
}
};
if (evt.type == "MSGestureChange") {
if (evt.scale < 1) {
MyGlobals.fontSizeModify("decrease");
};
if (evt.scale > 1) {
MyGlobals.fontSizeModify("increase");
}
};
},
The problem though is that when I navigate to another page using WinJS.Navigation.navigate(), when I then navigate back to home.html using WinJS.Navigation.navigate(), all of the above event listeners don't work, and seem to not be added to the chapterContainer (from inspecting the live DOM). However, all other event listeners that are in the ready: function, do work perfectly (other listeners omitted from above code). Is there something wrong that I'm doing here? Thanks a lot!
