knockoutjs 依赖选择框绑定子选择框问题 [英] knockoutjs dependent select boxes problems binding child select box

问题描述

类似于knockoutjs购物车的例子，我有一个包裹列表，价格取决于位置.我无法将依赖选择框(locationOptions)与视图绑定:

Similar to the knockoutjs shopping cart example, I have a list of packages, and the price depends on the location. I am unable to bind the dependent select box (the locationOptions) with the view:

<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/

Here is the jsfiddle http://jsfiddle.net/KN4P6/6/

推荐答案

看看这个小提琴

<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>

看小提琴

希望能帮到你.

这篇关于knockoutjs 依赖选择框绑定子选择框问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！