1

我需要更改tr background-color鼠标单击它的时间。我使用敲除绑定click事件，因为当用户单击每个表行时我需要更新我的视图模型。

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

演示：http: //jsfiddle.net/tzD4T/391/

我的视图模型：

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>

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

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

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

4

1 回答 1

2

如果您正在使用 Knockout 尝试使用 jQuery 解决问题，则不应该是您的首选。

如果这样做，更 KO 的方法是定义一个像 red 这样的 css 类，并根据选择使用css绑定切换该 css 类：

.red {
    background-color: red;
}

在您的视图模型中：

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

演示JSFiddle。

另一种方法是isSelected在您的各个项目上拥有一个属性。然后你可以isSelected在你的处理程序中设置属性，selectRow并在你的 css 绑定中使用这个 newisSelected而不是父$parent.seletedRow() == $data表达式。

于 2013-07-08T15:30:30.157 回答