Question

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

            <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映射。

我该如何解决这个问题？你会怎么处理这个？

Answer 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();

Answer 2

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

这确保只选择一行。

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

Answer 3

我为自己和您创建了一个jsfiddle，因为回答的人实际上没有用

该键是对所选项目使用可观察项，并对点击事件利用挖空对当前项目的自动绑定的组合：

bind

和html：

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

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

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

Knockout：可选表格行而不扩展模型？

3 个答案: