淘汰赛:可以在不扩展模型的情况下选择表格行吗? [英] Knockout: Selectable table rows without extending the model?

问题描述

我有以下通过剔除呈现的表格模板:

I have the following table template that is rendered through 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(！)行，因此必须取消选中其他行.

Now I want to make the rows clickable and want to assign a css class if a row is selected. Only 1 (!) row could be selected at a time, so others have to be unchecked.

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

The simplest way would be to extend my model (product class) with a selected property but this would destroy my 1:1 mapping with the server side.

我应该如何解决此问题? 您将如何处理?

How should I solve this issue? How would you handle this?

推荐答案

这是我现在的最终解决方案，没有多余的隐藏单选按钮:

This was my final solution now, no extra hidden radio buttons:

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

以及ViewModel中的selectedProduct实现:

And the selectedProduct implementation within the ViewModel:

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

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

这篇关于淘汰赛:可以在不扩展模型的情况下选择表格行吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！