Knockout: Wählbare Tabellenzeilen ohne Erweiterung des Modells?

Question

Ich habe die folgende Tabelle Vorlage, die durch Knockout wiedergegeben wird:

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

Jetzt möchte ich die Zeilen klickbare machen und wollen eine CSS-Klasse zuweisen, wenn eine Zeile ausgewählt ist. Es kann immer nur 1 (!) Zeile ausgewählt werden, andere müssen deaktiviert werden.

Der einfachste Weg wäre, mein Modell (Produktklasse) um eine ausgewählte Eigenschaft zu erweitern, aber dies würde mein 1: 1-Mapping mit der Serverseite zerstören.

Wie soll ich dieses Problem lösen? Wie würden Sie damit umgehen?

Answer 1

Das war jetzt meine endgültige Lösung, keine extra versteckte Radiobuttons:

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

Und die selectedProduct Umsetzung im Ansichtsmodell:

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

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

Answer 2

Sie können der Tabelle eine ausgeblendete Optionsfeldgruppe hinzufügen, und wenn die Zeile ausgewählt ist, die selectProduct aufruft, ist das Optionsfeld ausgewählt.

Damit wird sichergestellt, dass nur eine Zeile ausgewählt ist.

Alternativ können Sie eine custom binding mit dem jQuery .data() schreiben, um die ausgewählte Zeile anzugeben.