Navigation to views outside of index.html and back

5 posts, 0 answers
  1. John
    John avatar
    3 posts
    Member since:
    Sep 2013

    Posted 11 Oct 2013 Link to this post

    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.
  2. John
    John avatar
    3 posts
    Member since:
    Sep 2013

    Posted 11 Oct 2013 Link to this post

    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.
  3. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 16 Oct 2013 Link to this post

    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.
  4. John
    John avatar
    3 posts
    Member since:
    Sep 2013

    Posted 16 Oct 2013 Link to this post

    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.
  5. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 17 Oct 2013 Link to this post

    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.
Back to Top