global App variable keeps coming back as undefined

Question

Ok a little background, I am attempting to use kendo-mobile with typescript using Visual Studios new multi-device hybrid app project setup. I have a file named main.ts that contains the following code:

/// <reference path="../typings/require.d.ts" />

import MyApplication = require('../app/MyApplication');
var App: MyApplication;   

document.addEventListener("deviceready", function ()
{    
   App = new MyApplication();
}, false);

The initialization of the kendo application is happening within the MyApplication constructor. Also in the same constructor I pass in the initial view so that the kendo app knows which view to display first. Below is the code for the MyApplication class.

/// <reference path="../typings/require.d.ts" />

import PrimaryController = require("../app/controllers/PrimaryController");

class MyApplication
{
    KendoApp: kendo.mobile.Application;
    PrimaryController: PrimaryController;

    constructor()
    {
        this.InitializeControllers();
        this.InitializeKendoApp();
    }

    private InitializeControllers()
    {
        this.PrimaryController = new PrimaryController(this);
    }

    private InitializeKendoApp()
    {
        var appOptions: kendo.mobile.ApplicationOptions = {};
        appOptions.initial = this.PrimaryController.View;
        appOptions.layout = "app-layout";
        appOptions.transition = "slide";

        this.KendoApp = new kendo.mobile.Application($(document.body), appOptions);
    }
}

export = MyApplication;

So in my index.html I also have this call to requirejs which should be calling main.js and instantiating my global App variable.

<script src="scripts/frameworks/require.js" data-main="scripts/app/main.js"></script>

Now in the view that I am trying to display (primaryview.html) on the main div I have set the data-show attribute as follows:

data-show="App.PrimaryController.OnViewShow"

When the data-show attribute is present I am getting an error that says "Cannot read property of 'PrimaryController' of undefined" - i.e. my global App variable is never instantiated.

If I remove the data-show attribute then it "appears" that the App variable gets instantiated because the primaryview.html displays as expected and as mentioned earlier I'm setting the initial view within the constructor for MyApplication. My only doubts as to whether or not the instantiation is occuring is because I set breakpoints in main.ts but they never hit even when the data-show has been removed and the view displays.

Anyone have any ideas as to whats going on here? I thought maybe I needed to include a call to require.config() in main.ts and I tried to set that up using examples I found from googling around but nothing worked.

Answer 1

As soon as you make an import statement your file becomes wrapped in a define and your global variables in the file are no longer global i.e. available on window so :

import MyApplication = require('../app/MyApplication');
var App: MyApplication;  

App is not on window.

You can do the following though to put in on window:

document.addEventListener("deviceready", function ()
{    
   (<any>window).App = new MyApplication();
}, false);