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

Question

我正在努力学习淘汰赛。单击行中的链接时，我想突出显示该行。我有一个很难理解的范围内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);
    }
}

Answer 1

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>

更新：

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

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>