ノックアウトのテーブルからobsservableArrayレコードを選択

Question

ノックアウトのテーブルでラジオボタンのバインディングを設定する方法を理解しようとしています。テーブルのラジオボタンが選択されたら、私は好きです。選択したレコード全体がモデルで使用可能になります。無線入力にバインディングを設定する方法があまりよく分かりません。私は値のバインディングのために$ parentと関数を使う必要があると仮定します？

ここはフィドルです。 （ラジオボタンが選択されている場合、選択したレコードは今、何もしない、私はそれが移入されたい）

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

あなたがコードを動作させるには2つのステップを実行する必要があります。

まず、ラジオボタンにバインディングを適用します。

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

checkedValueは、現在のラジオボタンに対応した実際の値が含まれている必要があります。この場合、単純な（スカラー）値ではなく従業員オブジェクト全体である変数$dataを参照します。

checkedバインディングは、現在選択されている従業員を含む監視対象を参照する必要があります。デフォルト値として空のオブジェクトを渡さないでください

this.selectedRow = ko.observable(); 

：

第二には、selectedRowプロパティが定義されている行を修正します。それ以外の場合は、withバインディングが正しく機能しません。

選択した従業員を表示する2番目のブロックにバインディングの構文を固定すると、thisのようなものになります。