html - 突出显示我的表格的行，其中复选框被剔除检查

Question

我有一个 html 表，第一列上有一个复选框。我想突出显示用knockout检查复选框的行。

<table class="defaultGrid">
<thead>
    <tr>
        <th>Check</th>
        <th>ID</th>
        <th>Name</th>
    </tr>
</thead>
<tbody data-bind="foreach: model.Things">
    <tr>
        <td><input type="checkbox" data-bind="click: $root.selectThing " /></td>
        <td data-bind="text: ID"></td>
        <td data-bind="text: Name"></td>
    </tr>
</tbody>
</table>

这是关于 jsFiddle 的示例：http: //jsfiddle.net/jJ4H6/1/

我不知道该怎么做。我不想在我的模型上添加额外的属性，例如“isSelected”。

任何的想法？

谢谢。

Answer 1

我肯定会在您的“事物”中添加一个可观察到的淘汰赛，以确定您的 tr 元素是否具有黄色背景。

但是，如果您真的不想在视图模型中添加类似的内容，则必须在selectThing函数中添加一些逻辑来为您处理此问题，例如

self.selectThing = function(item, event) {
        $(event.target).parent().parent().addClass('selected');
   }; 

Answer 2

看看这个 Jfiddle http://jsfiddle.net/jJ4H6/27/

 $(function() {
Thing = function(id, name, selected) {
    var self = this;
    self.ID = id, 
    self.Name = name
    self.isChecked = ko.observable(false);
};

function viewModel() {
    var self = this;
    self.model = {};
    self.model.CurrentDisplayThing = ko.observable();
    self.model.Things = ko.observableArray(
        [
            new Thing(1, "Thing 1"),
            new Thing(2, "Thing 2"),
            new Thing(3, "Thing 3")
        ]);
    self.selectThing = function(item) {

    };
}
ko.applyBindings(new viewModel());

});