Knockout: righe della tabella selezionabili senza estendere il modello?

Question

Ho il seguente modello di tabella che è resa attraverso l'eliminazione diretta:

  <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> 

Ora voglio fare le righe cliccabili e vuole assegnare una classe CSS, se viene selezionata una riga. È possibile selezionare solo 1 riga (!) Alla volta, quindi è necessario deselezionare gli altri.

Il modo più semplice sarebbe estendere il mio modello (classe prodotto) con una proprietà selezionata ma ciò distruggerebbe il mio mapping 1: 1 con il lato server.

Come si può risolvere questo problema? Come gestiresti questo?

Answer 1

Questa era la mia soluzione finale ora, pulsanti di opzione senza supplemento nascosti:

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

e l'implementazione selectedProduct all'interno del ViewModel:

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

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

Answer 2

È possibile aggiungere un gruppo di pulsanti di opzione nascosti alla tabella e quando viene selezionata la riga chiamando selectProduct il pulsante di opzione è selezionato.

Ciò garantisce che sia selezionata una sola riga.

In alternativa è possibile scrivere un custom binding utilizzando il jQuery .data() per specificare la riga selezionata.