全局 App 变量不断返回未定义

Question

好的一点背景知识，我正在尝试使用带有打字稿的 kendo-mobile，使用 Visual Studios 新的多设备混合应用程序项目设置。我有一个名为 main.ts 的文件，其中包含以下代码：

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

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

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

剑道应用程序的初始化发生在 MyApplication 构造函数中。同样在同一个构造函数中，我传入初始视图，以便剑道应用程序知道首先显示哪个视图。下面是 MyApplication 类的代码。

/// <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;

所以在我的 index.html 中，我还调用了 requirejs，它应该调用 main.js 并实例化我的全局 App 变量。

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

现在，在我试图在主 div 上显示 (primaryview.html) 的视图中，我已将 data-show 属性设置如下：

data-show="App.PrimaryController.OnViewShow"

当存在 data-show 属性时，我收到一条错误消息，提示“无法读取未定义的 'PrimaryController' 的属性” - 即我的全局 App 变量永远不会被实例化。

如果我删除了 data-show 属性，那么它会“显示” App 变量被实例化，因为 primaryview.html 按预期显示，并且如前所述，我正在为 MyApplication 的构造函数中设置初始视图。关于实例化是否发生，我唯一的疑问是因为我在 main.ts 中设置了断点，但即使删除了数据显示并显示了视图，它们也从未命中。

有人对这里发生的事情有任何想法吗？我想也许我需要在 main.ts 中包含对 require.config() 的调用，我尝试使用从谷歌搜索中找到的示例进行设置，但没有任何效果。

Answer 1

一旦您发出 import 语句，您的文件就会被包裹在 define 中，并且文件中的全局变量不再是 global 即在 @987654322 上可用@所以：

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

应用程序不在窗口中。

您可以执行以下操作以放入窗口：

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