淘汰赛：可选择表格行而不扩展模型？答案

【问题标题】：Knockout: Selectable table rows without extending the model?淘汰赛：可选择表格行而不扩展模型？
【发布时间】：2012-03-26 11:44:09
【问题描述】：

我有以下通过敲除呈现的表格模板：

            <table class="gv" data-bind="visible: products().length > 0">
                <thead>
                    <th>Type</th>
                    <th>Name</th>
                </thead>
                <tbody data-bind="foreach: products">
                    <tr data-bind="click: $root.selectProduct">
                        <td data-bind="text: type"></td>
                        <td data-bind="text: name"></td>
                    </tr>
                </tbody>
            </table>

现在我想让这些行可点击，并且如果选择了一行，我想分配一个 css 类。一次只能选择 1 (!) 行，因此必须取消选中其他行。

最简单的方法是使用选定的属性扩展我的模型（产品类），但这会破坏我与服务器端的 1:1 映射。

我应该如何解决这个问题？您将如何处理？

【问题讨论】：

标签： knockout.js

【解决方案1】：

这是我现在的最终解决方案，没有额外的隐藏单选按钮：

<tr data-bind="click: $root.selectProduct, css: { 'active-row': $root.selectedProduct() === $data }">

以及 ViewModel 中的 selectedProduct 实现：

function AppViewModel() {
    // Private
    var self = this;

    // Public Properties
    self.selectedProduct = ko.observable();

【讨论】：

为了回答的完整性，我很乐意看到 selectProduct 已定义。
@TelegramSam 有点晚了，但是到了。
@jtkrause 为什么你的 selectProduct 属性是一个 observableArray 而不仅仅是一个 observable - 一个对象 - 当你只允许单选时？
如果用户进入这一行会发生什么？
在这里聚会真的很晚了，但是如何将self.selectedProduct 绑定到与点击的行相关联的产品？

【解决方案2】：

您可以在表格中添加一个隐藏的单选按钮组，并在选择行时调用selectProduct 选择单选按钮。

这样可以确保只选择一行。

或者，您可以使用 jQuery .data() 编写 custom binding 来指定选定的行。

【讨论】：

单选按钮听起来不错，它使用标准浏览器/html 技术来处理唯一选择。你也喜欢这个解决方案吗？
这就是我首先要解决的问题 - 但我会意识到，如果将来我需要多项选择，我将不得不重写它。
这绝对不会发生！谢谢！
嗯，你能给我一个简单的例子吗？使用“”，我无法选择任何这些单选按钮。以及如何将 css 绑定绑定到选中的单选按钮？ jQuery?
以编程方式选择selectProduct函数中的单选按钮[stackoverflow.com/questions/977137/…。由于单选按钮将成为activeproduct 组的一部分，因此只能选择一个。

【解决方案3】：

我为自己和你创建了一个 jsfiddle，因为回答的那个实际上不起作用

关键是对所选项目使用可观察对象和利用敲除对当前项目的自动绑定来进行点击事件的组合：

ViewModel = function() {
  self = this;
  this.selectedItem = ko.observable();
  this.items = ko.observableArray();

}
ViewModel.prototype.selectItem = function(item) {
  self.selectedItem(item);
}

和html：

  <ul class="results__container">
    <!-- ko foreach: items -->
    <li class="results__item" data-bind="css: { 'results__item--selected': $root.selectedItem() === $data }, click: $root.selectItem">
      <span data-bind="text: Title"></span>
    </li>
    <!-- /ko -->
  </ul>

http://jsfiddle.net/enorl76/9hLgfzot/

【讨论】：