1

我正在尝试将此 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>
4

1 回答 1

2

工作演示

我对你的代码做了简单的修改。我不完全理解您到底需要做什么，所以请检查我的代码并告诉我我是否正确，或者您需要了解我的更改。

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 -->
于 2013-07-14T22:40:22.067 回答