knockout.js - 使用requirejs和typescript未定义knockout ko - Thinbug

使用requirejs和typescript未定义knockout ko

时间：2013-04-09 15:44:48

标签： knockout.js requirejs typescript

我的打字稿文件生成以下输出，但我的AppViewModel中未定义ko。关于如何解决这个问题的任何指示都是受欢迎的。带有打字稿的visual studio解决方案在这里：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');
});

/脚本/的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>

3 个答案:

答案 0 :(得分：3)

我用以下方式攻击它，但如果人们能找到更好的方法，我想要任何评论。

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

});

答案 1 :(得分：1)

首先尝试加载knockout，看起来你的viewmodel是一个已编译的TypeScript模块。手动加载敲除而不是依赖可能会给你更多的控制。

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

同时确保将knockout作为AppViewModel的dep删除

答案 2 :(得分：0)

很抱歉，我的原始答案是你在config.js文件中尝试过大写/ Scripts / reference吗？