使用選擇字段無線電輸入Knockout轉換表格

Question

我想轉換此jsfiddle敲除http://jsfiddle.net/KN4P6/7/從使用選擇單選按鈕。

我陷入困境我相信某事與電臺值不是實際的對象，並且位置依賴綁定失敗。我嘗試的的jsfiddle是在這裏：http://jsfiddle.net/4W7PZ/

<h1>Select Package:</h1> 
<div data-bind="foreach: packages" > 
    <div> 
     <input type="radio" name="optionsGroup" data-bind="attr: {value: name}, checked: $root.selectedPackage" /> 
     <span data-bind="text: name"></span> 
    </div>  
</div> 

<h1>Select Location:</h1> 
<!-- ko with : selectedPackage --> 
<div data-bind="foreach: locationOptions" > 
    <div> 
     <input type="radio" name="optionsGroup" data-bind="attr: {value: location}, checked: $parent.selectedLocation" /> 
     <span data-bind="text: location"></span> 
    </div>  
</div> 
<!-- /ko --> 

<h1>Details:</h1> 
<span data-bind="with: selectedPackage"> 
    <p>You have chosen <b data-bind="text: name"></b> (<span data-bind="text: description">)</span></p> 
     <!-- ko with : $parent.selectedLocation --> 
     In location <b data-bind="text: location"></b> 
    <p>Total is <b data-bind="text: price"></b></p> 
    <!-- /ko --> 
</span> 

Answer 1

Working Demo

我已經在你的代碼簡單的修改。我不完全理解你確實需要做什麼，因此請檢查我的代碼，並告訴我我是否正確，或者您需要了解我的更改。

function viewModel(packages, addons) { 
    var self = this; 
    this.packages = packages; 
    this.selectedPackage = ko.observable(); 
    this.selectedLocation = ko.observable(); 
    this.setSelectedPackage = function (data) {   
     self.selectedPackage(data); 
    } 
    this.setSelectedLocation = function (data) {   
     self.selectedLocation(data); 
    } 
    this.total = ko.computed(function() { 
     var x = 0; 
     return x; 
    }); 
} 

ko.applyBindings(new viewModel(packageData)); 

HTML標記

<div data-bind="foreach: packages"> 
    <div> 
     <input type="radio" name="optionsGroup" data-bind="attr: {value: name}, event:{change:$root.setSelectedPackage}" /> <span data-bind="text: name"></span> 

    </div> 
</div> 

<h1>Select Package:</h1> 

<!-- ko with : selectedPackage --> 
<div data-bind="foreach: locationOptions"> 
    <div> 
     <input type="radio" name="optionsGroup" data-bind="attr: {value: location}, event:{change:$root.setSelectedLocation}" /> <span data-bind="text:location"></span> 

    </div> 
</div> 
<!-- /ko -->