Knockout: Selectable table rows without extending the model?

Question

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>

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.

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?

Answer 1

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

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

And the selectedProduct implementation within the ViewModel:

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

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

Answer 2

You could add a hidden radio button group to the table, and when the row is selected calling selectProduct the radio button is selected.

This ensures that only one row is selected.

Alternatively you could write a custom binding using the jQuery .data() to specify the selected row.