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

Kendo UI Lifecycle

3 Answers 670 Views

General Discussions

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

Team asked on 30 Jan 2014, 10:43 AM

Hi,

I'm a new user of Kendo UI and i have trouble to understand the lifecycle of the application with Cordova.

Here, i would like to do different actions if the user is online or offline (redirect, show different content, ...).
I can't put the code in the app.Bootstrap.show() method because the variable navigator.connection is initialized only after the deviceReady event is fired.
I try with the after-show event but that's the same : the event is fired before the deviceReady event.

How can i do this ?

Thanks a lot for your help,
Antoine.

app.js :

var app = (function (win) {

'use strict';

var onDeviceReady = function() {

//Do some stuff

};

// Handle "deviceready" event

document.addEventListener('deviceready', onDeviceReady, false);

// Initialize KendoUI mobile application

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

transition: 'slide',

skin: 'flat',

initial: 'bootstrap'

});

return {

mobileApp: mobileApp

};

}(window));

bootstap.js :

var app = app || {};

app.Bootstrap = (function () {

'use strict'

var bootstrapViewModel = (function () {

var show = function (e) {

// Check if user is online and do some stuff

               // By accessing navigator.connection

};

return {

show: show

};

}());

return bootstrapViewModel;

}());

<body>

<div id="bootstrap" data-role="view" data-show="app.Bootstrap.show">

<div class="view-content">

<h1>My app</h1>

<div class="content"></div>

</div>

....

</body>

3 Answers, 1 is accepted

answered on 31 Jan 2014, 10:04 AM

I've followed your advice and change my code in app.js like this :

var app = (function (win) {

'use strict';

var onDeviceReady = function() {

// Initialize KendoUI mobile application

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

transition: 'slide',

skin: 'flat',

initial: 'bootstrap'

});

};

// Handle "deviceready" event

document.addEventListener('deviceready', onDeviceReady, false);

return {

mobileApp: null

};

}(window));

Now i can access to the connection properties during the show/inits events, thanks !
But i've still a problem. If the user isn't online, i want to redirect him to another view.

Like this :

var app = app || {};

app.Bootstrap = (function () {

'use strict'

var bootstrapViewModel = (function () {

var show = function (e) {

if ($.inArray(navigator.connection.type, [Connection.UNKNOWN, Connection.NONE]) !== -1) {

app.mobileApp.navigate('#anotherview');

}

};

return {

show: show

};

}());

return bootstrapViewModel;

}());

And i got this error : "Uncaught TypeError: Cannot call method 'navigate' of null" because app.mobileApp isn't still initialized.
That works if i do this, but that's sounds like a crappy workaround, is it ? :

setTimout(function() {

app.mobileApp.navigate('#somewhereelse");

}, 500);

Thanks for your help,
Antoine