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

Kendo UI Lifecycle

3 Answers 130 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Team
Top achievements
Rank 1
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>
    <!--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

Sort by
0
Kevin
Top achievements
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
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
0
Kevin
Top achievements
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....

app.mobileApp = new kendo.mobile.Application(document.body, {
    transition: 'slide',
    skin: 'flat',
    initial: 'bootstrap'
});
Tags
General Discussions
Asked by
Team
Top achievements
Rank 1
Answers by
Kevin
Top achievements
Rank 1
Team
Top achievements
Rank 1
Share this question
or