如何使 Typescript 和 Knockout.js 与 MVC 应用程序一起工作

Question

将淘汰赛 .js viewModel 绑定到 MVC 问题。

我尝试了至少 5 个教程，但它们看起来都彼此不同，但对我没有任何帮助。我在构建应用程序时没有收到任何错误。

TS 文件：

/// <reference path="../typings/knockout/knockout.d.ts" />
/// <reference path="../typings/jquery/jquery.d.ts" />

export module HopCRM {
    export class ContactViewModel {
        text: string = "Test";
        public test: KnockoutObservable<string>;

    constructor() {
        console.log("hello")
        this.test = ko.observable("Test testing testing")

    }             
}

}

我的 CSHTML：

<h2 data-bind="text: test">Waiting for viewModel</h2>

<script src="~/Scripts/Typescript/ContactViewModel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1        /jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>

<script type="text/javascript">
    var viewModel;
    (function () {
        viewModel = new HopCRM.ContactViewModel();
        ko.applyBindings(viewModel);  
    });
</script>

我期望来自公共测试或至少简单的 console.log 的绑定

Answer 1

为了使用导出和模块，需要使用 webpack。 如果您不需要这种复杂性，请尝试仅使用没有任何导出/导入的类：

你的 ts 文件：

class ContactViewModel {
        text: string = "Test";
        public test: KnockoutObservable<string>;

    constructor() {
        console.log("hello")
        this.test = ko.observable("Test testing testing")

    }             
}

用法（在cshtml中）：

const viewModel = new ContactViewModel();
ko.applyBindings(viewModel);

看我的工作小提琴：https://jsfiddle.net/koljada/dgnyspwa/3/