Question

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

这是我的代码sofar

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/

淘汰赛，可选择的桌子排

1 个答案: