knockout.js를 사용하여 테이블 행 강조 표시

Question

넉 아웃을 배우려고합니다. 행 내의 링크를 클릭 할 때 테이블 행을 강조 표시하려고합니다. this, e 및 knockout이 JQuery과 상호 작용하는 방식을 이해하는 데 어려움을 겪고 있습니다. 표준 jquery 함수처럼 녹아웃 함수를 빌드 할 수 있습니까?

<table> 
    <thead> 
     <tr> 
      <th></th> 
      <th>Name</th> 
      <th>Cat</th> 
      <th>Size</th> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach: components"> 
     <tr> 
      <td></td> 
      <td><a data-bind="text: Name, click: $parent.highlightComponent" href="#"></a></td> 
      <td data-bind="text: Category"></td> 
      <td data-bind="text: Size"></td> 
     </tr> 
    </tbody> 
</table> 

그리고 내보기 모델 ...

function MyViewModel() { 

    this.components = ko.observableArray(); 
    this.selectedComponent = ko.observable(); 

    this.highlightComponent = function(e) { 

     console.log($(this).parents("tr")); 

     $(this).closest("tr").siblings().removeClass("diffColor"); 
     $(this).parents("tr").toggleClass("diffColor", e.clicked); 
    } 
} 

Answer 1

는 항목이 강조 표시되어 있는지 여부를 나타 내기 위해 components 배열의 각 상품에 IsHighlighted 속성을 추가 : 다음

this.IsHighlighted = ko.observable(false); 

에서 귀하의 HTML은 click에 해당 속성을 켜고 TR.diffColor 클래스는 해당 속성에 바인딩되어 있습니다 :

<tbody data-bind="foreach: components"> 
     <tr data-bind="css: { diffColor: IsHighlighted }"> 
      <td></td> 
      <td><a data-bind="text: Name, click: IsHighlighted" href="#"></a></td> 
      <td data-bind="text: Category"></td> 
      <td data-bind="text: Size"></td> 
     </tr> 
</tbody> 

업데이트 :

귀하의 요청에 따라에 한 번에 하나 개의 강조 표시된 항목을 허용, 루트 뷰 - 모델에 관찰 HighlightedRowIndex를 추가하려고 :

this.HighlightedRowIndex = ko.observable(); 

와의를 귀하의 HTML :

<tbody data-bind="foreach: components"> 
    <tr data-bind="css: { diffColor: $root.HighlightedRowIndex() == $index }"> 
     <td></td> 
     <td><a data-bind="text: Name, click: $root.HighlightedRowIndex.bind(null, $index)" href="#"></a></td> 
     <td data-bind="text: Category"></td> 
     <td data-bind="text: Size"></td> 
    </tr> 
</tbody>