Вызов методов jquery внутри режима просмотра нокаута

Question

Мне нужно изменить trbackground-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> 

(с использованием JQuery click событий связующий должен делать эту работу, но я не знаю, почему я 'm не может выбрать все мои 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 и использовать этот новый isSelected в вашей привязке css вместо родителей $parent.seletedRow() == $data.