Navigation via JavaScript

[Scott Buchanan]

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

 

 

[Scott Buchanan]

I have coded the navigation like this

function(data){
    alert('Thank you!');
    var app = new kendo.mobile.Application($(document.body));
    app.navigate("views/home.html");
},

And it seems to be ok.  I still think this is creating another app and worry about how many can exist before the app becomes unstable.  How does this look?  Is there a better method?

Thanks,
Scott

 

 

[Ventsislav Georgiev]

Hello Scott,

Thank you for contacting us.

You are right, it is indeed an issue of scope. The app variable is local to the function scope it is declared in. If you need to use it in other scope you should attach it to the window object.

I have edited your example code:
app.js

(function () {
    var app = {
        models: {
            home: {
                title: 'Home'
            },
            evalSession: {
                title: 'Session Evaluation',
                ds: new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "data/agenda.json",
                            dataType: "json"
                        }
                    }
                }),
            },
        }
    };

    document.addEventListener('deviceready', function () {
        navigator.splashscreen.hide();

        app.mobileApp = new kendo.mobile.Application(document.body, {
            initial: 'views/home.html'
        });
    }, false);

    window.APP = app;
})();

and your navigation would then be:

function (data) {
    alert('Thank you!');
    window.APP.mobileApp.navigate("views\home.html");
}

Also, please note there shouldn't be more than one kendo.mobile.Application for the same document element (document.body) and it is generally only one in the whole mobile application. Having this in mind, we have plans for improving our templates in the future, so that it is easier for our clients to start a new project.

In case you need any further assistance, don't hesitate to contact us.

Regards,
Ventsislav Georgiev
Telerik

 

 

[Scott Buchanan]

Ventsislav,

That is an awesome response - complete, accurate, and works!

Thank you.
Scott