This is a migrated thread and some comments may be shown as answers.

Programmatic Navigation?

16 Answers 1353 Views

Application

This is a migrated thread and some comments may be shown as answers.

16 Answers, 1 is accepted

answered on 02 Feb 2012, 01:30 PM

Hi,

My wild guess is that you are calling the navigate method before the application is fully initialized (and the initial view is present).

Here is the code I tried:

<!DOCTYPE html>

<html>

<head>

<title></title>

<link href="http://cdn.kendostatic.com/2012.1.124/styles/kendo.mobile.all.min.css" rel="stylesheet" />

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script src="http://cdn.kendostatic.com/2012.1.124/js/kendo.all.min.js"></script>

</head>

<body>

<div data-role="view" data-init="verifyLogin">

Index

</div>

<div data-role="view" data-init="verifyLogin" id="login">

Login

</div>

<script>

var app = new kendo.mobile.Application();

function verifyLogin() {

app.navigate("#login");

}

</script>

</body>

</html>

Regards,
Petyo
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 02 Feb 2012, 02:56 PM

Just to clarify, this doesn't work right now:

app.kendoMobileApplication = new kendo.mobile.Application(document.body,

{

layout: "landing-layout"

});

app.initViewModel();

app.kendoMobileApplication.bind("viewInit", function (e) {

var viewName = e.view.element[0].id;

if (viewName == "tattoos" && !app.theViewModel.hasInitialized) {

app.kendoMobileApplication.hasInititalized = true;

if (!app.theViewModel.isAuthenticated) {

app.kendoMobileApplication.navigate("#login");

}

});

The "viewInit" or "viewShow" events fire and I can test for the view name to see if it has happened...but since I am calling navigate and the navigation seems to not have happened yet on the 'tattoos' view, the back button on the login page goes to a non-existent page. I think you're calling the viewInit and viewShow earlier than the journal (history) is happening. Is this intended?

answered on 02 Feb 2012, 03:34 PM

Hi,

Your observations are correct. Both events occur before the URL hash is changed, so the back button won't work in this case.

An (ugly) workaround is to push the history hash in the event.

<!DOCTYPE html>

<html>

<head>

<title></title>

<link href="http://cdn.kendostatic.com/2012.1.124/styles/kendo.mobile.all.min.css" rel="stylesheet" />

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script src="http://cdn.kendostatic.com/2012.1.124/js/kendo.all.min.js"></script>

</head>

<body>

<div data-role="view" id="index">

Index

</div>

<div data-role="view" id="login">

Login

<a data-role="backbutton">Back</a>

</div>

<script>

var loggedIn = false;

var app = new kendo.mobile.Application(document.body, {

viewShow: function(e) {

var viewID = e.view.element.attr("id");

if (viewID == "index" && !loggedIn) {

loggedIn = true;

kendo.history.navigate("#index");

app.navigate("#login");

}

});

</script>

</body>

</html>

Greetings,
Petyo
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 25 Sep 2012, 02:24 PM

Thanks. I feel like this might be obvious but how do I get a handle to the layout object to bind to those events? I'm creating the mobile Application in javascript and specifying the layout using the 'layout' configuration option that is passed to the Application constructor.

Update: Ok, I found the attributes that can be added to the layout markup for hooking these events (data-init="" data-show=""). Note: it would be nice if you could do this purely in javascript (possibly through a .getLayout() method on the application object). As it stands I have to add these methods to the global javascript namespace which doesn't feel right.