jquery - 如何从 KO 的绑定方法中更改表格行背景颜色？

Question

我正在使用 KO.js 绑定具有多行的表体。第一列有一些按钮，如果用户单击一行的按钮，我希望该行突出显示。但我不知道如何从 Ko 的绑定方法中引用表格行。

这是我正在谈论的小提琴。

和一些代码：

<table class="table table-bordered">
    <tbody data-bind="foreach: frameworks">
        <td>
            <button class=btn data-bind="click: $parent.doStuff">A</button>
        </td>
        <td data-bind="text: $data"></td>
    </tbody>
</table>


var App = new function () {
        var self = this;
        self.frameworks = ko.observableArray();
        self.doStuff = function () {
            //how to change table row color?
        };
    };

App.frameworks.push('bootstrap');
App.frameworks.push('knockout.js');
ko.applyBindings(App);

Answer 1

你很亲密。我已经用解决方案在这里更新了你的小提琴。

HTML

<table class="table table-bordered">
    <tbody data-bind="foreach: frameworks">
        <tr data-bind="css: {'selected':$root.selectedItem() == $data}">
            <td>
                <button class=btn data-bind="click: $root.doStuff">A</button>
            </td>
            <td data-bind="text: $data"></td>
        </tr>
    </tbody>
</table>

CSS

.selected
{
    background-color:red;
}

Javascript

    var App = new function () {
        var self = this;
        self.frameworks = ko.observableArray();
        self.selectedItem = ko.observable(null);
        self.doStuff = function (item) {
            self.selectedItem(item);
            //do other things here for the button click
        };
    };

    App.frameworks.push('bootstrap');
    App.frameworks.push('knockout.js');
    ko.applyBindings(App);