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

Question

我想认真地遵循公认的答案此.我正在为我的大多数软件包使用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,所以我创建了一个新文件.绑定代码来自这里.我如何参考我创建的界面？什么应该指向这个文件？

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:

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

---

更新2:

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

---

更新3:

在阅读了本文之后,我尝试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();