2013-07-14 3 views
1

쇼핑 바구니 예제와 마찬가지로 패키지 목록이 있으며 가격은 위치에 따라 다릅니다.knockoutjs 종속성 선택 상자 문제 묶는 자식 선택 상자

뷰 모델
<select data-bind="options: packages, 
        optionsCaption: 'Select...', 
        optionsText: 'name', 
        value: selectedPackage">     
</select> 

<select data-bind="options: locationOptions, 
        optionsCaption: 'Select...', 
        optionsText: 'location', 
        value: selectedLocation"> 
</select> 

<span data-bind="with: selectedPackage"> 
    <p>You have chosen <b data-bind="text: name"></b> (<span data-bind="text: description">)</span> 
    In location <b data-bind="text: location"></b></p> 
    <p>Total is <b data-bind="text: total"></b></p> 
</span> 

: 여기

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

가 jsfiddle에게 있습니다 http://jsfiddle.net/KN4P6/6/

답변

5

this fiddle

한 번 봐 내가보기에 종속 선택 상자합니다 (locationOptions)를 결합 할 수 없습니다입니다
<select data-bind="options: packages, 
        optionsCaption: 'Select...', 
        optionsText: 'name', 
        value: selectedPackage">     
</select> 

<!-- ko with : selectedPackage --> 

<select data-bind="options: locationOptions, 
        optionsCaption: 'Select...', 
        optionsText: 'location', 
        value: $parent.selectedLocation"> 
</select> 

<!-- /ko --> 

<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: $parents[1].total"></b></p> 
    <!-- /ko --> 
</span> 

See fiddle

도움이되기를 바랍니다.