淘汰赛，可选择的桌子排 [英] Knockout, selectable table row

问题描述

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

I'm using KO.js to bind a table body with many rows. If the user clicks anywhere on the row, I want that row be highlighted.

这是我的代码sofar

this is my code 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

JavaScript

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

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

ko.applyBindings(App);

Css

.selected
{
    background-color:red;
}

这是我到目前为止的小提琴

this is the fiddle of what I have go so far

http://jsfiddle.net/Z53dB/

关于SO我也有类似的问题，到目前为止我已经跟着他们了，但我b $ b没有太大的成功

There are similar questions on SO and I have followed them so far but I am not having much success

任何人都可以建议，我缺少什么

Can anyone advise, on what I am missing

谢谢

推荐答案

绑定单击到 selectItem 函数，不带 selectItem 函数。

You bind click to selectItem function without selectItem function.

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

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

这篇关于淘汰赛，可选择的桌子排的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！