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 に答える