问题描述
我正认真地遵循.我的大多数软件包都使用Knockout，Typescript，MVC，VS2017和节点模块.我遇到的问题是绑定没有被调用，但是没有任何构建错误.
I am trying in earnest to follow the accepted answer for this. I'm using Knockout, Typescript, MVC, VS2017 and node modules for most of my packages. The problem I'm having is that the binding does not get called but don't have any build errors.
添加以下代码
interface KnockoutBindingHandlers {
csharpTypes: KnockoutBindingHandler;
}
在您的extensions.ts文件中引用此定义文件
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中应用绑定.我是否需要以某种方式将ko.bindingHandler放入我的ViewModel中，以使其可用于视图?
I try to apply the binding in my cshtml. Do I need to pull in the ko.bindingHandler into my ViewModel in some way for it to be available for the 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>
答案说要将绑定添加到extensions.ts，所以我创建了一个新文件.绑定代码来自这里.我将如何引用我创建的接口?该文件应该指向什么?
The answer says to add the binding to extensions.ts, so I created a new file. Binding code comes from here. How would I reference the interface I created? What should be pointing to this file?
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 };
}
};
}
}
更新:
在定型文档的测试中他们只是这样做，我现在已经在viewModel的构造函数中尝试过了，但是init和update仍然没有被调用:
In the DefinitelyTyped documentation's test they just do this, which I've now tried in the constructor of my viewModel but init and update still are not called:
(<any>ko.bindingHandlers).countInits = { init: function() { initCalls++ } };
更新2:
在这个项目中我没有使用requireJS.链接KnockoutBindingHandler是否需要?
I have not used requireJS in this project. Is it needed for linking the KnockoutBindingHandler in?
更新3:
查看了此文章 ，我尝试使用tsconfig.json中的节点模块引用上述customKoBindings.d.ts.这也没有解决.
After reviewing this article, I've attempted to reference the above customKoBindings.d.ts with the node modules reference in my tsconfig.json. This did not it fix either.
{
"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"
]
}
更新丢失计数:可行！
Update Lost Count:It works!
将此添加到extensions.ts的顶部:
/// <reference path="./customKoBindings.d.ts" />
在我的main.ts中添加了此内容:
in my main.ts added this:
import { KnockoutExtensions} from "./Common/extensions"
const koExt = new KnockoutExtensions();
推荐答案
将其添加到extensions.ts的顶部:
/// <reference path="./customKoBindings.d.ts" />
在我的main.ts中添加了此内容:
in my main.ts added this:
import { KnockoutExtensions} from "./Common/extensions"
const koExt = new KnockoutExtensions();
这篇关于其余的猫头鹰:用Typescript敲除BindingHandlers?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！