猫头鹰的其余部分：Knockout BindingHandlers with Typescript？

Question

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

提供定义文件（比如myBindings.d.ts）

添加以下代码

  interface KnockoutBindingHandlers {
        csharpTypes: KnockoutBindingHandler;
    }

在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>
                                                <tbody data-bind="dataTablesForEach: {data: trainingEmployeeSearchResults, dataTableOptions: {}}">
                                                    <tr>
                                                        <td data-bind="text: firstName"></td>
                                                        <td data-bind="text: lastName"></td>
                                                        <td data-bind="text: jobTitle"></td>
                                                        <td data-bind="text: primaryManager"></td>
                                                        <td data-bind="text: department"></td>
                                                        <td><button data-bind="click:$parent.seeTrainings"><i class="fa fa-eye"></i></button></td>
                                                    </tr>
                                                </tbody>
                                            </table>

---

答案说要将绑定添加到extensions.ts，所以我创建了一个新文件。绑定代码来自here。我如何参考我创建的界面？什么应该指向这个文件？

extensions.ts

import * as ko from "knockout"
import * as $ from "jquery";

export class KnockoutExtensions {
    // Constructor
    constructor() {
        ko.bindingHandlers.dataTablesForEach = {
            page: 0,
            init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
                console.log("init for dataTablesForEach");
                var options = ko.unwrap(valueAccessor());
                ko.unwrap(options.data);
                if (options.dataTableOptions.paging) {
                    valueAccessor().data.subscribe(function (changes) {
                        var table = $(element).closest('table').DataTable();
                        ko.bindingHandlers.dataTablesForEach.page = table.page();
                        table.destroy();
                    }, null, 'arrayChange');
                }
                var nodes = Array.prototype.slice.call(element.childNodes, 0);
                ko.utils.arrayForEach(nodes, function (node: Node) {
                    if (node && node.nodeType !== 1) {
                        node.parentNode.removeChild(node);
                    }
                });
                return ko.bindingHandlers.foreach.init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
            },
            update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
                console.log("update for dataTablesForEach");
                var options = ko.unwrap(valueAccessor()),
                    key = 'DataTablesForEach_Initialized';
                ko.unwrap(options.data);
                var table;
                if (!options.dataTableOptions.paging) {
                    table = $(element).closest('table').DataTable();
                    table.destroy();
                }
                ko.bindingHandlers.foreach.update(element, valueAccessor, allBindings, viewModel, bindingContext);
                table = $(element).closest('table').DataTable(options.dataTableOptions);
                if (options.dataTableOptions.paging) {
                    if (table.page.info().pages - ko.bindingHandlers.dataTablesForEach.page == 0)
                        table.page(--ko.bindingHandlers.dataTablesForEach.page).draw(false);
                    else
                        table.page(ko.bindingHandlers.dataTablesForEach.page).draw(false);
                }
                if (!ko.utils.domData.get(element, key) && (options.data || options.length))
                    ko.utils.domData.set(element, key, true);
                return { controlsDescendantBindings: true };
            }
        }; 
    }
}

---

更新：

在DefinitelyTyped documentation's test中他们只是这样做，我现在已经在我的viewModel的构造函数中尝试了但是仍然没有调用init和update：

 (<any>ko.bindingHandlers).countInits = { init: function() { initCalls++ } };

---

更新2：

我没有在这个项目中使用requireJS。是否需要链接KnockoutBindingHandler？

---

更新3：

在回顾了这个article之后，我试图在我的customKoBindings.d.ts中引用上面的tsconfig.json和节点模块参考。这也没有解决。

{
  "compilerOptions": {
    "outDir": "./wwwroot/build/",
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es6",
    "module": "amd",
    "moduleResolution": "node"
  },
  "files": [
    "./Scripts/Common/customKoBindings.d.ts"
  ],
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

---

更新丢失数：它有效！

将此添加到extensions.ts的顶部：

/// <reference path="./customKoBindings.d.ts" />

在我的main.ts添加了这个：

import { KnockoutExtensions} from "./Common/extensions"
const koExt = new KnockoutExtensions();

Answer 1

将此添加到extensions.ts的顶部：

/// <reference path="./customKoBindings.d.ts" />

在我的main.ts添加了这个：

import { KnockoutExtensions} from "./Common/extensions"
const koExt = new KnockoutExtensions();