将KnockoutJS与TypeScript和RequireJS一起使用时，ko是未定义的

我正在学习如何定义视图模型并使绑定正常工作

以下是查看模式：

module MyApp {
    export class MyViewModel {
        public clicked: KnockoutObservable<boolean>;

        constructor() {
            this.clicked = ko.observable(false);
        }

        myClickEvent() {
            this.clicked(true);
        }
    }
}

问题是当以下行出现时：

this.clicked = ko.observable(false);

当触发click事件（似乎绑定到HTML元素OK）时，浏览器中会发生以下错误：

未捕获引用错误：未定义ko

在以前的尝试中，我使用了

define('myviewmodel', ['ko'], (ko) => {

等，以确保满足要求，但使用这种方法，我看不到如何使用模块和导出一个类作为视图模型

你对我做错了什么有什么建议吗

---

谢谢。

我认为问题最终是由于试图使用一个类造成的，而我本应根据文档返回一个函数

它现在运行良好。下面的方法允许一个应用程序上有多个视图模型，同时有一个主应用程序视图模型为整个范围提供通用功能

我想知道是否有更好/更喜欢的方法

初始化

 require.config({
    baseUrl: "../Scripts",
    paths: {
        jquery: "jquery-2.1.1.min",
        knockout: "knockout-3.1.0"
    }
});

require(["jquery", "knockout", "appViewModel"], ($, ko, appViewModel) => {
    $(document).ready(() => {
        ko.bindingHandlers.stopBinding = {
            init: () => {
                return { controlsDescendantBindings: true };
            }
        };
        ko.virtualElements.allowedBindings.stopBinding = true;

        ko.applyBindings(new appViewModel());
    });
});

appViewModel.ts

define(["knockout", "firstnameViewModel", "lastnameViewModel"], (ko, firstNameViewModel, lastnameViewModel) => {
    return () => {
        this.fnvm = new firstNameViewModel();
        ko.applyBindings(this.fnvm, document.getElementById("fn"));

        this.lnvm = new lastnameViewModel();
        ko.applyBindings(this.lnvm, document.getElementById("ln"));

        this.fullName = ko.computed((): string => {
            return this.fnvm.firstName() + " " + this.lnvm.lastName();
        }, this);

        this.clearNameFields = (): void => {
            this.lnvm.clear();
        };;
    };
});

define(["knockout"], (ko) => {
    return function () {
        this.firstName = ko.observable("Bert");
        this.firstNameCaps = ko.computed((): string => {
            return this.firstName().toUpperCase();
        }, this);
    };
});

define(["knockout"], (ko) => {
    return function () {
        this.lastName = ko.observable("Muppet");

        this.clear = (): void => {
            this.lastName("");
        };
    };
});

firstnameViewModel.ts

define(["knockout", "firstnameViewModel", "lastnameViewModel"], (ko, firstNameViewModel, lastnameViewModel) => {
    return () => {
        this.fnvm = new firstNameViewModel();
        ko.applyBindings(this.fnvm, document.getElementById("fn"));

        this.lnvm = new lastnameViewModel();
        ko.applyBindings(this.lnvm, document.getElementById("ln"));

        this.fullName = ko.computed((): string => {
            return this.fnvm.firstName() + " " + this.lnvm.lastName();
        }, this);

        this.clearNameFields = (): void => {
            this.lnvm.clear();
        };;
    };
});

define(["knockout"], (ko) => {
    return function () {
        this.firstName = ko.observable("Bert");
        this.firstNameCaps = ko.computed((): string => {
            return this.firstName().toUpperCase();
        }, this);
    };
});

define(["knockout"], (ko) => {
    return function () {
        this.lastName = ko.observable("Muppet");

        this.clear = (): void => {
            this.lastName("");
        };
    };
});

lastnameViewModel.ts

define(["knockout", "firstnameViewModel", "lastnameViewModel"], (ko, firstNameViewModel, lastnameViewModel) => {
    return () => {
        this.fnvm = new firstNameViewModel();
        ko.applyBindings(this.fnvm, document.getElementById("fn"));

        this.lnvm = new lastnameViewModel();
        ko.applyBindings(this.lnvm, document.getElementById("ln"));

        this.fullName = ko.computed((): string => {
            return this.fnvm.firstName() + " " + this.lnvm.lastName();
        }, this);

        this.clearNameFields = (): void => {
            this.lnvm.clear();
        };;
    };
});

define(["knockout"], (ko) => {
    return function () {
        this.firstName = ko.observable("Bert");
        this.firstNameCaps = ko.computed((): string => {
            return this.firstName().toUpperCase();
        }, this);
    };
});

define(["knockout"], (ko) => {
    return function () {
        this.lastName = ko.observable("Muppet");

        this.clear = (): void => {
            this.lastName("");
        };
    };
});

htmlpage1.html

<html>
<head>
    <script type="text/javascript" data-main="Scripts/init.js" src="Scripts/require.js"></script>
</head>
<body>
    <!-- ko stopBinding: true -->
    <div id="fn">
        <p>First name: <input data-bind="value: firstName" /></p>
        <p>First name capitalized: <strong data-bind="text: firstNameCaps"></strong></p>
    </div>
    <!--/ko-->
    <!-- ko stopBinding: true -->
    <div id="ln">
        <p>Last name: <input data-bind="value: lastName" /></p>
    </div>
    <!--/ko-->
    <p>Full name: <strong data-bind="text: fullName"></strong></p>
    <button data-bind="click:clearNameFields">Clear</button>
</body>
</html>

名字：

名字大写：

姓氏：

全名：

清楚的

---

跳过绑定技术是借用自。

您有一个输入错误：

knoctout:“knockout-3.1.0”

应该是

knockout:“knockout-3.1.0”，

。。。