使用基因敲除表突出显示表格行 [英] Highlight table row using knockout.js

问题描述

我正在尝试学习淘汰赛.单击行内的链接时，我要突出显示该行.我很难理解this，e的上下文以及敲除与JQuery的交互方式.我不能像标准的jQuery函数那样构建敲除函数吗?

I'm trying to learn Knockout. I want to highlight a table row when clicking on an link within the row. I'm having a hard time understanding the context of this, e and how knockout interacts with JQuery. Can I not build knockout functions just as standard jquery functions?

 <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>

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

And then my view model...

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);
    }
}

推荐答案

在components数组中的每个项目上添加一个IsHighlighted属性，以指示该项目是否突出显示:

Add an IsHighlighted property on each item in the components array to indicate whether the item is highlighted:

this.IsHighlighted = ko.observable(false);

然后在您的HTML中，打开click上的该属性，并将您的TR.diffColor类绑定到该属性:

Then in your HTML, turn on that property upon click and have your TR.diffColor class bound to that property:

<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>

更新:

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

As per your request to only allow one highlighted item at a time, try to add HighlightedRowIndex observable to the root view-model:

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>

这篇关于使用基因敲除表突出显示表格行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！