如何解决提取数据后淘汰数据表行
我有一个视图模型,该模型通过剔除绑定到模式弹出窗口。模态中有一个按钮,用于获取数据(实际上是从服务器获取的ajax,但对于本示例来说只是从一些静态代码获取),然后将该数据绑定到表并将其转换为DataTable。淘汰赛将添加数据表。
获取数据并正确呈现数据表。但是,我需要能够通过单击它们来选择行,并且看起来这些databind语句在获取数据后没有得到处理。
这是HTML:
<a href="#" class="btn btn-default" data-bind="click: initArray">Init Table</a>
<a href="#" class="btn btn-default" data-bind="click: swapArray">Swap Table Array</a>
<div id="datatablescontainer" style="border: 1px solid green;"></div>
<div id="datatableshidden" style="display:none;" >
<table class="datatable">
<thead>
<tr>
<th>first</th>
<th>last</th>
</tr>
</thead>
<tbody data-bind="foreach: rows">
<tr data-bind="click: $parent.testAlert">
<td align="center" data-bind="text: firstName"></td>
<td align="center" data-bind="text: lastName"></td>
</tr>
</tbody>
</table>
</div>
这是脚本:
// Here's my data model
var viewmodel = function() {
this.rows = ko.observable(null);
this.datatableinstance = null;
this.initArray = function() {
var rowsource1 = [
new ChildVM({ "firstName" : "John","lastName" : "Smith"}),new ChildVM({ "firstName" : "Mary","lastName" : "Smith" })
];
this.redraw(rowsource1);
}
this.swapArray = function() {
var rowsource2 = [
new ChildVM({ "firstName" : "James","lastName" : "Smith" }),new ChildVM({ "firstName" : "Alice",new ChildVM({ "firstName" : "Doug","lastName" : "Smith" })
];
this.redraw(rowsource2);
}
this.redraw = function(rowsource) {
this.rows(rowsource);
var options = { paging: false,"order": [[0,"desc"]],"searching":true };
var datatablescontainer = $('#datatablescontainer');
var html = $('#datatableshidden').html();
//Destroy datatable
if (this.datatableinstance) {
this.datatableinstance.destroy();
datatablescontainer.empty();
}
//Recreate datatable
datatablescontainer.html(html);
this.datatableinstance = datatablescontainer.find('table.datatable').DataTable(options);
}
this.testAlert = function() {
alert('test');
}
};
var ChildVM = function(data) {
var self = this;
if(data != null)
{
self.firstName = data.firstName;
self.lastName = data.lastName;
}
this.testAlert = function() {
alert('test');
}
}
ko.applyBindings(new viewmodel()); // This makes Knockout get to work
*更新小提琴 https://jsfiddle.net/websitewill/rgsw2odp/17/
我在主VM和ChildVM上都有testClick。我已经尝试过$ parent.testClick,只是在表行databind中使用testClick。都不会被调用(但也不会报告错误)。
感谢您的帮助。 会
解决方法
弄清楚了。 看起来就像在加载新结果并创建DataTable之后在applyBindings之前调用cleanNode一样。
ko.cleanNode(dataTableContainer.find('table.definitions-datatable')[0]);
ko.applyBindings(this,dataTableContainer.find('table.definitions-datatable')[0]);
此处更新了小提琴:https://jsfiddle.net/websitewill/rgsw2odp/35/
谢谢, 会
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。