相关疑难解决方法(0)

是否有任何使用TypeScript和KnockoutJS的示例？我只是好奇他们将如何一起工作？

编辑

这就是我所拥有的,似乎有效

declare var ko: any;
declare var $: any;
class ViewModel {
    x = ko.observable(10);
    y = ko.observable(10);

}

$(() => {
    ko.applyBindings(new ViewModel());
});

这会生成以下Javascript:

var ViewModel = (function () {
    function ViewModel() {
        this.x = ko.observable(10);
        this.y = ko.observable(10);
    }
    return ViewModel;
})();
$(function () {
    ko.applyBindings(new ViewModel());
});

我想认真地遵循公认的答案此.我正在为我的大多数软件包使用Knockout,Typescript,MVC,VS2017和节点模块.我遇到的问题是绑定不会被调用,但没有任何构建错误.

提供定义文件(比如myBindings.d.ts)

添加以下代码

  interface KnockoutBindingHandlers {
        csharpTypes: KnockoutBindingHandler;
    }

Run Code Online (Sandbox Code Playgroud)

在extensions.ts文件中引用此定义文件

因此我创建了customKoBindings.d.ts这样的.

/// <reference path="../../node_modules/@types/knockout/index.d.ts" />

interface KnockoutBindingHandlers {
    dataTablesForEach: KnockoutBindingHandler;
}

我尝试在我的cshtml中应用绑定.我是否需要以某种方式将ko.bindingHandler拉入我的ViewModel才能使其可用于视图？

<table style="width: 100%" id="copyEmpTrainingSearchResultsTable" class="display" cellspacing="0">
                                                <thead>
                                                    <tr>
                                                        <th data-bind="sort: { arr: employees, prop: 'firstName' }">First Name</th>
                                                        <th data-bind="sort: { arr: employees, prop: 'lastName' }">Last Name</th>
                                                        <th data-bind="sort: { arr: employees, prop: 'jobTitle' }">Job Title</th>
                                                        <th data-bind="sort: { arr: employees, prop: 'primaryManager' }">Manager</th>
                                                        <th data-bind="sort: { arr: employees, prop: 'department' }">Department</th>
                                                        <th>Trainings</th>
                                                    </tr>
                                                </thead> …