淘汰赛，可选择的表格行

Question

我正在使用 KO.js 来绑定具有多行的表体。如果用户点击该行的任意位置，我希望该行被突出显示。

这是我目前的代码

HTML

 <table border="1">
    <thead>
        <tr>
            <th></th>
            <th>Name</th>
            <th>Last Edited</th>
            <th>Type</th>
            <th>Author</th>
            <th>Preview</th>
            <th>Delete</th>
        </tr>
    </thead>
    <tbody>
        <tr data-bind="click: $root.selectItem, css: {'selected':$root.selectedItem() == $data}">
            <td style="width: 27px"></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>Pre</td>
            <td>Del</td>
        </tr>
    </tbody>
</table>

JavaScript

var App = new function () {
   var self = this;

// Public Properties
    self.selectedItem = ko.observable();
    };
};

ko.applyBindings(App);

CSS

.selected
{
    background-color:red;
}

这是我到目前为止所做的事情

http://jsfiddle.net/Z53dB/

关于 SO 有类似的问题，到目前为止我一直在关注它们，但我 我没有太大的成功

任何人都可以就我缺少的东西提出建议

谢谢

Answer 1

您将click 绑定到selectItem 函数而不使用selectItem 函数。

self.selectItem = function( data ) {
    self.selectedItem( data );
};

示例：http://jsfiddle.net/Z53dB/1/