Отображение описания в нокаут при нажатии Заголовок

Question

У меня есть страница asp.net mvc2, где я показываю данные с названиями и описаниями с помощью нокаута. Я хочу скрыть описания и показать описание на основе щелчка. любая помощь будет оценена по достоинству. Также я хотел бы применить тег h1 к заголовку.

<div id="dataDiv"> 
<table style="text-align: left" border="0"> 
    <tbody> 
     <!-- ko foreach: list --> 
     <tr> 
      <td colspan="2" data-bind="text: title"> 
      </td>    
     </tr> 
     <tr> 
      <td colspan="2" data-bind="text: description"> 
      </td> 
     </tr> 
     <tr> 
      <td colspan="2"> 
       <hr style="border-top: 1px dotted #f00; color: #fff; background-color: #fff; height: 1px; 
        width: 100%;" /> 
      </td> 
     </tr> 
     <!-- /ko --> 
    </tbody> 
</table> 

Answer 1

Является ли это то, что вы ищете?

Работа демо http://jsfiddle.net/Rgxy9/

HTML:

<table style="text-align: left" border="0"> 
    <tbody data-bind="foreach: list"> 
     <tr> 
      <td colspan="2" data-bind="click: $root.select"> 
       <h1 data-bind="text: title" /> 
      </td>    
     </tr> 
     <tr data-bind="visible: $root.selected() == $data"> 
      <td colspan="2" data-bind="text: description"> 
      </td> 
     </tr> 
     <tr> 
      <td colspan="2"> 
       <hr style="border-top: 1px dotted #f00; color: #fff; background-color: #fff; height: 1px; 
        width: 100%;" /> 
      </td> 
     </tr> 
    </tbody> 
</table> 
<script type="text/javascript"> 

    var item = function(title, desc) { 
     this.title = ko.observable(title); 
     this.description = ko.observable(desc); 
    }; 

    var vm = function() { 
     var self = this; 
     this.list = ko.observableArray([new item('some', 'desc'), 
           new item('som2', 'desc2')]); 

     this.selected = ko.observable(); 
     this.select = function(item) { 
      self.selected(item); 
     }; 
    }; 

    ko.applyBindings(new vm()); 
</script>