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

【问题标题】：How to highlight a table row using style binding?如何使用样式绑定突出显示表格行？
【发布时间】：2011-10-03 10:32:46
【问题描述】：

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

我创建了一个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 }
        ])
};

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

【问题讨论】：

标签： javascript css knockout.js

【解决方案1】：

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

类似的东西 > http://jsfiddle.net/wrzFx/11/

【讨论】：

看起来很棒！但是如何在 jquery 事件处理程序中获取选定的“ko.observable”？我喜欢 'data-bind="click: function() { viewModel.showItem($data) }'。而且我正试图同时围绕 Knockout 和 Jquery ;)
好吧，你可以结合使用它们。class="clickableRow" data-bind="click: function() { viewModel.showItem($data) }"

【解决方案2】：

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

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

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

【讨论】：

将此行添加到他的 jsfiddle > ko.applyBindings(viewModel);
@nEEbz，哎哟！没注意。您的解决方案正是我所暗示的。