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 :
bootstap.js :
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> <!--Home--> <div id="bootstrap" data-role="view" data-show="app.Bootstrap.show"> <div class="view-content"> <h1>My app</h1> <div class="content"></div> </div> </div> ....</body>3 Answers, 1 is accepted
0
Kevin
Top achievements
Rank 1
Rank 1
answered on 31 Jan 2014, 03:14 AM
What error are you getting, what problem are you having etc? You really haven't given any info about what trouble you have run into. As far I know you should be able to access the connection properties within any views show event as to even create a kendo app you first have to initialize it from within the deviceready event, thus anything after that will be after device ready.
0
Team
Top achievements
Rank 1
Rank 1
answered on 31 Jan 2014, 10:04 AM
I've followed your advice and change my code in app.js like this :
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 :
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 ? :
Thanks for your help,
Antoine
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
0
Kevin
Top achievements
Rank 1
Rank 1
answered on 31 Jan 2014, 03:38 PM
I think in this case javascript scope has gotten you. When you declare var on something inside an anonymous function .... (= function() {) it makes it local to that function.
try removing the var from the kendo app declaration like so....
try removing the var from the kendo app declaration like so....
app.mobileApp = new kendo.mobile.Application(document.body, { transition: 'slide', skin: 'flat', initial: 'bootstrap'});