Greetings! I created a new app, using the "Kendo UI Drawer (JavaScript)" template. I noticed that the views were in separate files (not how the app I worked on a year or so ago was laid out) so I followed this pattern. The app is nearly completed and ready for publishing except for one issue - after I post a form to Everlive, I need to navigate back to the home view.
app.js looks like this (some models removed for brevity):
(
function
() {
// store a reference to the application object that will be created
// later on so that we can use it if need be
var
app;
// create an object to store the models for each view
window.APP = {
models: {
home: {
title:
'Home'
},
evalSession: {
title:
'Session Evaluation'
,
ds:
new
kendo.data.DataSource({
transport: {
read: {
url:
"data/agenda.json"
,
dataType:
"json"
}
}
}),
},
}
};
// this function is called by Cordova when the application is loaded by the device
document.addEventListener(
'deviceready'
,
function
() {
navigator.splashscreen.hide();
app =
new
kendo.mobile.Application(document.body, {
initial:
'views/home.html'
});
},
false
);
}());
And, in views\evalSession.html, the code on the submit button contains this:
data.create({
'sessionName'
: document.getElementById(
'sessionName'
).value,
'sessionId'
: document.getElementById(
'sessionId'
).value,
'contentScore'
: checkedContent,
'knowledgeScore'
: checkedSpeaker,
'overallScore'
: checkedSession,
'wantMore'
: checkedMore,
'comments'
: document.getElementById(
'comments'
).value
},
function
(data){
alert(
'Thank you!'
);
//var app = new kendo.mobile.Application(document.body);
app.navigate(
"views\home.html"
);
},
function
(error){
alert(
'Please try again, there was an error: '
+ JSON.stringify(error));
});
As posted here, there is an error that "app" is undefined. This makes no sense to me as the first lines of app.js create the var app with a comment that specifically states "store a reference to the application object that will be created later on so that we can use it if need be".
If I create a new app (commented out above), the page does navigate correctly, but subsequent use of the app is fragile - you might be able to navigate to another page or not - it quickly becomes non-responsive.
Clearly, this is an issue of scope, and I wish my JavaScript experience matched my other language skills so I could recognize how to make a globally defined app variable. What is the correct way to be able to navigate via JavaScript. Please be specific (that is, take a moment to post a snippet of how to implement). I found a few posts on blogs, SO, etc. about this but none offered a concrete solution. Thanks!
Scott