Question

点击鼠标时，我需要更改tr background-color。我使用knockout绑定click事件，因为我需要在用户点击每个表行时更新我的viewmodel。

我需要在我的viewmodel中调用$(row).css('background-color', 'red');。

我的观点模型：

function ViewModelTrazas(data) {
var self = this;
self.trazas = ko.observableArray();
array = self.trazas;
self.selectRow = function (row) {
    self.seletedRow(row);
    // HERE I SHOULD CHANGE THE TR BG
    // SOMETHIN LIKE THIS:
    // $(row).css('background-color', 'red');
}
self.seletedRow = ko.observable();
}

html：

<div id="gridAndDetail">
<table style="width: 100%">
    <tr>
        <td>
            <div style="margin-top:-4px;
                                height: 200px; overflow:auto;">
                <table id="datagrid" style="width: 100%;">
                    <thead style="text-align:left">
                        <tr>
                            <th>Date</th>
                            <th>Machine</th>
                            <th>Event type</th>
                            <th>Detail</th>
                        </tr>
                    </thead>
                    <tbody data-bind="foreach: trazas">
                        <tr data-bind="click: $parent.selectRow">
                            <td data-bind=" text: Fecha"></td>
                            <td data-bind=" text: Maquina"></td>
                            <td data-bind=" text: TipoEvento"></td>
                            <td data-bind=" text: Mensaje"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </td>
    </tr>
</table>

（使用jquery click事件绑定器可以完成这项工作，但我不知道为什么我无法使用此选择器选择所有tr：

$('#datagrid tr').click(function(){});

它只匹配表格的thead部分。）

Answer 1

如果您正在使用Knockout尝试用jQuery解决问题，那么不应该是您的第一个选择。

如果这样做的话，更多的KO方法是定义一个类似红色的css类，并根据选择切换css类和css binding：

.red {
    background-color: red;
}

在你的viewmodel中：

<tr data-bind="click: $parent.selectRow, 
               css: {red:  $parent.seletedRow() == $data}">

演示JSFiddle.

另一种方法是在您的个别物品上拥有isSelected属性。然后，您可以在isSelected处理程序中设置selectRow属性，并在css绑定中使用此新isSelected而不是父{4}}表达式。

在knockout viewmodel中调用jquery方法

1 个答案: