Navigation to views outside of index.html and back

[John]

I am using your KendoUI sample app as a starting point. On the Login view, once logged in, I have added a button to go to a mileage page. So after login, there would be a logout button and a mileage button.

I have created an html page in a folder named views.
views/mileage.html
I also created a .js file named mileage.js

so the relevant code block in index.html looks like this...

<button class="metrobutton cw40" id="btnGotoMileage" data-bind="click: onMileageClick, visible: isLoggedIn">Mileage</button>
<button class="metrobutton cw40" id="logout" data-bind="click: onLogout, visible: isLoggedIn">Logout</button>

the onMileageClick in login.js looks like this

onMileageClick: function(){
  window.location = "views/mileage.html";
},

Once logged in, when I tap the mileage button, it redirects me to views/mileage.html

I have my mileage.js setup pretty much like the login.js

(function (global)

{

    var MileageViewModel,

    app = global.app = global.app || {};

 

    MileageViewModel = kendo.data.ObservableObject.extend({

        startingmileage: "",

        endingmileage: "",

 

         

        onSubmitMileage: function ()

        {

            var that = this,

            startingmileage = that.get("startingmileage").trim(),

            endingmileage = that.get("endingmileage").trim();

 

            if (startingmileage === "" || endingmileage === "")

            {

                navigator.notification.alert("Both fields are required!",

                function ()

                {

                }, "Mileage submission failed", 'OK');

                return;

            }

            //that.set("isLoggedIn", true);

        },

      

        onGotoMainMenu: function ()

        {

             //NEED HELP HERE

        },

         

        clearForm: function ()

        {

            var that = this;

            that.set("startingmileage", "");

            that.set("endingmileage", "");

        }

    });

     

    app.mileageService =

    {

        viewModel: new MileageViewModel()

    };

})(window);

So what happens is, when i tried to navigate back to the screen that contained the logout and mileage buttons(the view displayed after succesful login) from mileage.html, it was taking me back to the login screen BEFORE login making me login again. I just want the mileage.html to redirect back to the previous screen.

Also, I am not sure if I have my javascript setup right to interact with the kendoui model.

[John]

I guess what Im really not understanding is the functions inside the kendo.data.observableobject and how the global app and global variables are passed between two javascript files. Are there no examples that show how to branch off from the index.html to another page while keeping the global variables entact, which i think has a lot to do with the issue of it making me login again after I called the history.go(-1) or history.back...or maybe I just dont understand the kendo javascript backbone.

[Steve]

Hi John,

I suspect the problem comes from the fact that you use window.location to navigate. Kendo UI has its own way of navigating between views using navigate method, for more information review the navigate method documentation.

Regards,
Steve
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.

[John]

Thanks, I've been reading through the Kendo UI Mobile docs, but it was just confusing me why your Icenium Kendo UI example leaves out things like navigating to remote views. For someone just starting out with both Graphite and Kendo UI, one would think that the examples in Icenium would be a little more inclusive of key functions.

[Steve]

Hello John,

The Icenium templates are exactly what the name suggests - templates. You can start with blank and end up using Kendo UI DataViz. Their purpose is not to cover the functionality of Kendo UI, for that purpose one should refer to their documentation and examples.

Regards,
Steve
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.