獲取​​值與Knockout JS並放入div

Question

我有一個隱藏最後一列的html表。當我點擊一個表格行時，我想把這個隱藏的列值放到div中。這裏有一個小提琴：

http://jsfiddle.net/tzD4T/390/

劫型號：

function ViewModelTrazas(data) { 
     var self = this; 
     self.trazas = ko.observableArray(); 
     array = self.trazas; 
    } 

    function push(){ 
     array.push({ 
      Fecha: ko.observable('a'), 
      Maquina: ko.observable('b'), 
      TipoEvento: ko.observable('c'), 
      Mensaje: ko.observable('d') 
     }); 
    } 

    ko.applyBindings(new ViewModelTrazas(), document.getElementById('divDataGrid')); 
    push(); 

表：

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

我試圖用jQuery，但這個樣本做代碼沒有工作：

$('datagrid tr').click(function(){ 
var detail = $(this).val(); 
// put the value into div 
    ... 
} 

Answer 1

看看this fiddle。這很簡單。 我剛剛添加了一個selectedRow obsevable和selectRow事件處理程序。

的觀點：

<table style="width: 100%"> 
    <tr> 
     <td> 
      <div id="divDataGrid" 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> 
<br/> 
<span>Detail:</span> 
<br/> 
<div data-bind="with: seletedRow"> 
    <div data-bind="text: Mensaje"></div> 
</div> 

JS：

var array; 

function ViewModelTrazas(data) { 
    var self = this; 
    self.trazas = ko.observableArray(); 
    array = self.trazas; 
    self.selectRow = function (row) { 
     self.seletedRow(row); 
    } 
    self.seletedRow = ko.observable(); 
} 

[...] 

See fiddle