select obsservableArray Datensatz aus der Tabelle in Knockout

Question

versuchen, herauszufinden, wie die Radio Button-Bindungen in einer Tabelle in Knockout einrichten. Ich möchte, wenn der Radiobutton auf dem Tisch ausgewählt ist. Der gesamte ausgewählte Datensatz ist im Modell verfügbar. nicht ganz sicher, wie man die Bindung am Radioeingang einrichtet. Ich nehme an, ich muss $ Eltern und eine Funktion für die Wertbindung verwenden?

hier ist die Geige. (Die ausgewählte Datensatz alles tun, nicht gerade jetzt würde Ich mag es aufgefüllt werden, wenn das Optionsfeld ausgewählt ist)

https://jsfiddle.net/othkss9s/5/

HTML

<table> 
<thead> 
    <tr> 
    <th>Select</th> 
    <th>First</th> 
    <th>Last</th> 
    <th>Dept</th> 
    </tr> 
</thead> 
    <tbody data-bind='foreach: employees'> 
    <tr> 
     <td><input type="radio" name="employees"></td> 
     <td data-bind='text: first'></td> 
     <td data-bind='text: last'></td> 
     <td data-bind='text: dept'></td> 
    </tr> 
    </tbody> 
</table> 

<div data-bind="with: selectedRow"> 
<h2> 
    Selected Record 
    </h2> 
<p> 
    First: <span data-bind="first" ></span> 
</p> 
<p> 
    Last: <span data-bind="last" ></span> 
</p> 
<p> 
    Dept: <span data-bind="dept" ></span> 
</p> 

</div> 

JS

function employee(first, last, dept) { 
    this.first = ko.observable(first); 
    this.last = ko.observable(last); 
    this.dept = ko.observable(dept); 
} 

function model() { 
    var self = this; 
    this.employees = ko.observableArray(""); 
    this.selectedRow = ko.observable({}); 

}; 

var myViewModel = new model(); 

$(document).ready(function() { 
    ko.applyBindings(myViewModel); 
    myViewModel.employees.push(
    new employee("Bob","Jones", "Hr") 
); 
    myViewModel.employees.push(
    new employee("Sarah","Smith", "It") 
); 
    myViewModel.employees.push(
    new employee("John","Miller", "It") 
); 


}); 

Answer 1

Sie müssen zwei Schritte ausführen, damit der Code funktioniert.

Zunächst gelten Bindungen Radiobuttons:

<input type="radio" data-bind="checked: $root.selectedRow, checkedValue: $data" /> 

checkedValue sollte Istwert enthalten, der die aktuelle Optionsfeld entspricht. In diesem Fall beziehen wir uns auf die $data Variable, die ein ganzes Mitarbeiterobjekt ist, und nicht auf einen einfachen (skalaren) Wert.

checked Bindung sollte sich auf eine Observable beziehen, die den aktuell ausgewählten Mitarbeiter enthält.

Zweitens, korrigieren Sie die Zeile, in der die selectedRow Eigenschaft definiert ist:

this.selectedRow = ko.observable(); 

nicht leer Objekt als Standardwert übergeben. Ansonsten funktioniert die with Bindung nicht korrekt.

Indem Sie die Bindingsyntax in Ihrem zweiten Block korrigieren, der den ausgewählten Mitarbeiter anzeigt, erhalten Sie so etwas wie this.