Where to init Kendo Mobile Application in Durandal

I am trying to use Kendo's Mobile widgets inside of my PhoneGap Durandal project. See sample source project here: https://github.com/rodneyjoyce/DurandalKendoMobile/tree/master/App

I don't understand where to put the Kendo initilisation code (the widgets do not render without this):

    window.kendoMobileApplication = new kendo.mobile.Application($(document.body), {
        skin: "flat"
    });

I have tried to put it into the Index.html, shell.html and into a particular Durandal page view (x.html), shell.js, main,js and x.js but none of these work.

My Index page has these links in it:

    <script src="css/telerik/js/kendo.all.min.js"></script>
    <link href="css/telerik/styles/kendo.mobile.flat.min.css" rel="stylesheet" />

My Durandal View has the following HTML with Kendo Mobile widgets:

<section>
    1
    <div id="kendoindex">
        <div data-kendo-role="view" data-kendo-title="View">
            <header data-kendo-role="header">
                <div data-kendo-role="navbar">
                    <span data-kendo-role="view-title">Title</span>
                </div>
            </header>
            <ul data-kendo-role="listview">
                <li>Item 1</li>
                <li>Item 2</li>
            </ul>
        </div>
    </div>
    2
</section>

and my ViewModel for this View:

define(function (require)
{
    function viewModel()
    {

        var self = this;
        self.activate = activate;

        function activate()
        {
            //window.kendoMobileApplication = new kendo.mobile.Application($("#kendoindex"), {
            //    skin: "flat"
            //});
        }
    }

    var vm = new viewModel();
    return vm;
});

If I don't call kendoMobileApplication then the Kendo Mobile widgets are not rendered (it just shows "1 Title 2" with no CSS (ie. Kendo is not transforming them).

Everything seems to be keyed on where to call this: kendoMobileApplication in Durandal.

I followed the Durandal guidelines to give the Kendo bindings their own namespace: http://durandaljs.com/documentation/KendoUI/

UPDATE 1

I have created a simple Durandal 1.2 project which highlights the problem with Kendo Mobile and Durandal (and PhoneGap, but irrelevant here)), namely:

The only way to get the Mobile controls to render properly is to call kendo.mobile.Application. However this cannot find the right HTML element if it is put into a different file and loaded with Durandal. I cannot find the right place to put this init code as it throws this error: “Uncaught Error: Your kendo mobile application element does not contain any direct child elements with data-role="view" attribute set. Make sure that you instantiate the mobile application using the correct container.”

kendoIndex.html is NOT Durandal but shows how it should be rendered if the kendo.mobile.Application is called correctly (Run this first to see what we are trying to achieve)

Shell : Has the Kendo Layout which does not get rendered. Home View: Has the simple Kendo Mobile view – this does not get rendered. About: A simple HTML page without Kendo

Source is on Guthub – if anyone can get Kendo Mobile working with Durandal I would appreciate it (or at least confirm if it is impossible (Telerik are no help at all on this)). https://github.com/rodneyjoyce/DurandalKendoMobile/tree/master/App

Solution

Here's a working demo, which shows the correct start screen, but doesn't show the about view on navigation click. There's probably some extra work required to either remove kendo's or Durandal's router functionality.

http://rainerat.spirit.de/DurandalKendoMobile/App/#/

There were a couple of things required to make it work. https://github.com/RainerAtSpirit/DurandalKendoMobile/commits/master

Kendo requires that the host element and all 'view' and 'layout' elements are in the DOM and that 'view' and 'layout' are child of the container element. After updating the view html to reflect this the right place to create the kendo app would be home.js

define(function( require ) {
    var ctor = function() {

    };

    ctor.prototype.activate = function() {
        console.log("Home activate");
    };

    ctor.prototype.viewAttached = function() {
        var $kendoHost = $('#kendoHost');
        // Workaround for height = 0.
        // Additional code required to calculate on windows.resize
        $kendoHost.height($(window).height());
        this.app = new kendo.mobile.Application($kendoHost, {
            skin: "flat"
        });

        console.log("Home viewAttached", this.app, $kendoHost.height());

    };

    return ctor;
});

Last kendo determines kendoHost height as 0, which prevents that the correctly rendered view show up. As a workaound I'm using $kendoHost.height($(window).height()); right before creating the app addresses.

As said in my comment above I'm still not sure if I'd recommend combining those two SPA frameworks as you might encounter more glitches like that while building your app. That said I'd love to hear about your progress :).