使用 requirejs 和 typescript 未定义敲除 ko答案

【问题标题】：knockout ko is undefined using requirejs and typescript使用 requirejs 和 typescript 未定义敲除 ko
【发布时间】：2013-04-01 03:36:45
【问题描述】：

我的打字稿文件生成以下输出，但我得到一个 ko 在我的 AppViewModel 中未定义。欢迎任何关于我如何解决这个问题的指示。带有打字稿的视觉工作室解决方案在这里：https://github.com/s093294/typescript-knockout

/Scripts/App/config.js

require.config({
    baseUrl: '/Scripts/App/',
    paths: {
        'jQuery': '/scripts/jquery-1.9.1',
        'knockout': '/scripts/knockout-2.2.1.debug',
        'AppViewModel': '/Scripts/ViewModels/AppViewModel'
    },
    urlArgs: "bust=" + (new Date()).getTime(),
    shim: {
        jQuery: {
            exports: '$'
        },
        'knockout': {
            deps: [
                "jQuery"
            ],
            exports: 'ko'
        },
        'AppViewModel': {
            deps: [
                'knockout'
            ]
        }
    }
});
require([
    'AppViewModel'
], function (avm) {
    var viewmodel = new avm.AppViewModel();
    ko.applyBindings(viewmodel);
    alert('hello world - SUCCESS');
});

/Scripts/ViewModels

define(["require", "exports", "knockout"], function(require, exports) { // I would like ko to be in the function handle, but typescript cant do this. But it should be in the global scope also right?
    var AppViewModel = (function () {
        function AppViewModel() {
            this.title = ko.observable();
            this.title('My Sample');
        }
        AppViewModel.prototype.setTitle = function (title) {
            this.title(title);
        };
        return AppViewModel;
    })();
    exports.AppViewModel = AppViewModel;    
})

index.html

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />    
    <title>Home</title>
</head>
<body>
    Did you get a hello world?
    <div data-bind="text: title"></div>

    <script data-main="/Scripts/App/config" type="text/javascript" src="~/scripts/require.js"></script>

</body>
</html>

【问题讨论】：

标签： knockout.js requirejs typescript

【解决方案1】：

我通过以下方式破解了它，但如果人们能找到更好的方法，我希望任何 cmets。

require(['knockout','AppViewModel'], (koo,avm) => {
    (<any>window).ko = koo;
    var viewmodel = new avm.AppViewModel();
    ko.applyBindings(viewmodel);
    alert('hello world - SUCCESS');

});

【讨论】：

你找到更简洁的方法了吗？
是的，使用最新的 Typescript，一切都可以使用 nuget 等的类型定义。多尝试搜索一下，如果找不到可行的解决方案，您可以发送电子邮件至 pks@s-innovations.net，我会在周末尝试查找示例。

【解决方案2】：

首先尝试加载淘汰赛，看起来您的视图模型是一个编译的 TypeScript 模块。手动加载淘汰赛而不是依赖项可能会给您更多的控制权。

require([
    'knockout',
    'AppViewModel'
], function (ko, avm) {
    var viewmodel = new avm.AppViewModel();
    ko.applyBindings(viewmodel);
    alert('hello world - SUCCESS');
});

还要确保将敲除作为 AppViewModel 的一个部门删除

【讨论】：

它使 ko 在配置中可用。但不在 AppViewModel 中。 ko 没有在全局范围内定义。
加载时间是我的问题。我在同一个包中同时拥有 KO 和 KO.Mapping，但它失败了。我把包分开了，它成功了。

【解决方案3】：

对不起，对于我的原始答案，您是否尝试过将 config.js 文件中的 /Scripts/ 引用大写？

【讨论】：

我相信 OP 是在谈论运行时错误与编译时错误。看起来他已经发布了编译好的 javascript，这意味着它构建得很好。
这是我自己的问题，你链接到，它不能解决问题。这个问题是对我遇到的问题的最小解决方案，即 ko 没有定义。请更具体地说明使示例正常工作所需的条件。
@dmck 是正确的。编译工作正常，这是一个运行时错误， ko 未在全局范围内定义。