如何使用样式绑定突出显示表格行？

Question

我需要根据表格中的选定行显示详细信息视图。 我想显示当前在表中选择了哪一行。 是否可以使用“样式”绑定来做到这一点？

我创建了一个JSFidle ，其中包含一些说明这个想法的代码......或缺乏，因为它当前所有行在行点击时都会改变颜色。 这是代码：

<table>
   <tr>
       <th>Name</th>
       <th>Sales</th>
       <th>Price</th>
    </tr>
  <tbody data-bind='template: { name: "fieldTemplate", foreach: viewModel.items}'></tbody>
</table>


<script type="text/html" id="fieldTemplate">
    <tr >
         <td> ${name}</td>
         <td>${sales}</td>
         <td>${price}</td>
    </tr>
</script>

这是 Javascript：

var viewModel = {
    items: ko.observableArray([
            { name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
            { name: "Speedy Coyote", sales: 89, price: 190.00 },
            { name: "Furious Lizard", sales: 152, price: 25.00 },
            { name: "Indifferent Monkey", sales: 1, price: 99.95 },
            { name: "Brooding Dragon", sales: 0, price: 6350 },
            { name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
            { name: "Optimistic Snail", sales: 420, price: 1.50 }
        ])
};  

所以我想我需要一个对当前行的引用，或者给我的项目添加一个样式属性然后绑定到这个，然后在点击事件中改变。 有任何想法吗？

Answer 1

您需要将点击事件绑定到表格的每一行。 单击一行后。 然后在事件处理程序中，您可以更改所选行的颜色 + 您可以显示新的详细信息

像这样 > http://jsfiddle.net/wrzFx/11/

Answer 2

我将通过 jQuery live事件在表格行上绑定一个选择事件。 在侦听器内部，我将更改viewModel中selectedRow属性的值

这听起来可能不是一种淘汰赛的做事方式，但只要它有效，我就可以接受。

顺便说一句，由于某种原因，我无法在 jsFiddle 中运行 jQuery 模板。