使用knockout.js突出显示表格行

我正在努力学习Knockout。 我想在单击行中的链接时突出​​显示表行。 我很难理解这个的背景，以及淘汰如何与JQuery交互。 我可以像标准的jquery函数一样构建knockout函数吗？

  
 
 
 
 
Name
 
Cat
 
Size
 
 
 
 
 
 
 
 
 
 
  

然后我的视图模型……

 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类绑定到该属性：

更新：

根据您的请求，一次只允许一个突出显示的项目，尝试将HighlightedRowIndex observable添加到根视图模型：

 this.HighlightedRowIndex = ko.observable(); 

在你的HTML中：