我正在认真尝试遵循this的可接受答案。我的大多数软件包都使用Knockout,Typescript,MVC,VS2017和节点模块。我遇到的问题是绑定(bind)没有被调用,但是没有任何构建错误。
因此,我创建了一个像这样的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。我将如何引用我创建的接口(interface)?什么应该指向该文件?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仍然没有被调用:
更新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();
最佳答案
将此添加到extensions.ts
的顶部:
/// <reference path="./customKoBindings.d.ts" />
在我的
main.ts
中添加了以下内容:import { KnockoutExtensions} from "./Common/extensions"
const koExt = new KnockoutExtensions();
关于typescript - 其余猫头鹰: Knockout BindingHandlers with Typescript?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47876958/