Question

我正在尝试将此jsfiddle淘汰赛http://jsfiddle.net/KN4P6/7/从使用select转换为单选按钮。

我陷入困境我相信与无线电值不是实际对象有关的事情，并且位置相关绑定失败。我尝试的方法是：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 -->

Knockout使用选择字段将表单转换为无线电输入

1 个答案: