我有一个带有复选框的淘汰表(对于这里的示例,我将每行限制为一个复选框)。当单击复选框时,它应该切换状态(如您所期望的那样)。但是,我在表行上也有一个单击事件和选择事件,这与复选框冲突…
<table>
<tbody data-bind="foreach: namespace.divResults.model">
<tr data-bind="click: $root.selectItem, css: {selected: $root.isSelected($data)}">
<td data-bind="text: Title"></td>
<td data-bind="text: Surname"></td>
<td data-bind="text: PostCode"></td>
<td><input type="checkbox" data-bind="checked: Excluded, click: $root.toggleExcluded"></td>
<td data-bind="text: Notes" style="display:none"></td>
<tr>
<tbody>
<table>
<div>
<!-- ko with: $root.selectedItem -->
<textarea data-bind="textInput:Notes"></textarea>
</div>
和javascript:
(function(ns) {
ns.divResults = null;
var resultsViewModel = function() {
var self = this;
self.model = ko.observableArray();
self.selectedItem = ko.observable();
self.selectItem = function(row){ self.selectedItem(row); }
self.isSelected = function (row) { return self.selectedItem() === row; }
self.toggleExcluded = function() {
return true;
}
}
}
我试过使用clickBubble事件,但这会阻止单击事件对表行的操作,在任何情况下都可以正常工作。我发现点击一行的复选框正确地改变了它的状态,但当行点击做它的事情时,它会被放回去。
我使用了一个实际的复选框,不确定这是否符合您的要求,无论如何,这是带有复选框的列
<td>
<input type="checkbox" data-bind="checked: Excluded"/>
</td>
具有checked绑定的复选框处理的是同时设置Excluded标志和检查复选框。在行click处理程序中,我返回true以允许事件向下传播到复选框,否则复选框将无法工作,因为事件不会向下传播到它
self.selectItem = function (row) {
self.selectedItem(row);
return true;
};
下面是一个工作示例,我在底部添加了一个输入,显示了Excluded的状态
http://jsfiddle.net/5dk0hqnc/8/