typescript - 其余的猫头鹰 : Knockout BindingHandlers with Typescript?

Question

我正在认真尝试遵循 this 的已接受答案.我的大部分包都使用 Knockout、Typescript、MVC、VS2017 和节点模块。我遇到的问题是绑定(bind)没有被调用但没有任何构建错误。

provide a definition file (say myBindings.d.ts)

add the following code

  interface KnockoutBindingHandlers {
        csharpTypes: KnockoutBindingHandler;
    }

Reference this definition file in your extensions.ts file

---

因此我创建了一个像这样的customKoBindings.d.ts。

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

interface KnockoutBindingHandlers {
    dataTablesForEach: KnockoutBindingHandler;
}

---

我尝试在我的 cshtml 中应用绑定(bind)。我是否需要以某种方式将 ko.bindingHandler 拉入我的 ViewModel 以使其可用于 View ？

<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>

---

答案是将绑定(bind)添加到 extensions.ts，所以我创建了一个新文件。绑定(bind)码来自here .我将如何引用我创建的界面？什么应该指向这个文件？

扩展.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 ，我试图在我的 tsconfig.json 中引用上面的 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();