使用 knockout.js 突出显示表格行

我正在努力学习淘汰赛。我想在单击行中的链接时突出​​显示表行。我很难理解上下文this, e以及淘汰赛如何相互作用JQuery。我不能像标准 jquery 函数一样构建淘汰函数吗？

 <table>
    <thead>
        <tr>
            <th></th>
            <th>Name</th>
            <th>Cat</th>
            <th>Size</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: components">
        <tr>
            <td></td>
            <td><a data-bind="text: Name, click: $parent.highlightComponent" href="#"></a></td>
            <td data-bind="text: Category"></td>
            <td data-bind="text: Size"></td>
        </tr>
    </tbody>
</table>

然后我的视图模型......

function MyViewModel() {

    this.components = ko.observableArray();
    this.selectedComponent = ko.observable();

    this.highlightComponent = function(e) {

        console.log($(this).parents("tr"));

        $(this).closest("tr").siblings().removeClass("diffColor");
        $(this).parents("tr").toggleClass("diffColor", e.clicked);
    }
}

Add an IsHighlighted中每个项目的属性components数组来指示该项目是否突出显示：

this.IsHighlighted = ko.observable(false);

然后在 HTML 中打开该属性click并有你的TR.diffColor绑定到该属性的类：

<tbody data-bind="foreach: components">
        <tr data-bind="css: { diffColor: IsHighlighted }">
            <td></td>
            <td><a data-bind="text: Name, click: IsHighlighted" href="#"></a></td>
            <td data-bind="text: Category"></td>
            <td data-bind="text: Size"></td>
        </tr>
</tbody>

Update:

根据您的请求，一次只允许一项突出显示的项目，请尝试添加HighlightedRowIndex可观察到根视图模型：

this.HighlightedRowIndex = ko.observable();

在你的 HTML 中：

<tbody data-bind="foreach: components">
    <tr data-bind="css: { diffColor: $root.HighlightedRowIndex() == $index }">
        <td></td>
        <td><a data-bind="text: Name, click: $root.HighlightedRowIndex.bind(null, $index)" href="#"></a></td>
        <td data-bind="text: Category"></td>
        <td data-bind="text: Size"></td>
    </tr>
</tbody>