猫头鹰的其余部分:用打字记录击倒BindingHandlers？

Question

我正认真地努力遵循这的公认答案。对于我的大多数包，我使用的是Knockout、类型记录、MVC、VS2017和节点模块。我遇到的问题是绑定没有被调用，但是没有任何构建错误。

提供一个定义文件(例如myBindings.d.ts) 添加以下代码 接口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，因此我创建了一个新文件。绑定代码来自这里。如何引用我创建的接口？什么应该指向这个文件？

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文档测试中，它们只是这样做的，我现在已经在viewModel的构造函数中尝试过了，但是init和update仍然没有被调用：

(ko.bindingHandlers).countInits ={ init: function() { initCalls++ } }；

更新2:

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

更新3:

在回顾这个文章之后，我尝试使用customKoBindings.d.ts中的节点模块引用来引用上面的customKoBindings.d.ts。这也没能解决问题。

{
  "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();