3

我正在尝试使用具有值的选项激活两个选择字段，例如。<option value='...'>...</option>使用 Knockoutjs。

它使用基于第一个选择字段中所选值的值填充第二个选择字段选项。

仅供参考，我找到了http://knockoutjs.com/examples/cartEditor.html，但这也不使用 optionsValue 所以它没有帮助。

这是我的看法：

<select data-bind="options: list,
                   optionsCaption: 'Select...',
                   optionsText: 'location',
                   optionsValue: 'code',
                   value: selectedRegion">                 
</select>
<!-- ko with : selectedRegion -->
<select data-bind="options: countries,
                   optionsCaption: 'Select...',
                   optionsText: 'location',
                   optionsValue: 'code',
                   value: $parent.selectedCountry">
</select>
<!-- /ko  -->

这是我的看法：

var packageData = [
    {
        code : "EU",
        location: 'Euprope',
        countries : [
            { location: "England", code: 'EN' },
            { location: "France", code: 'FR' }
        ]
    },
    {
        code : "AS",
        location: 'Asia',
        countries : [
            { location: "Korea", code: 'KO' },
            { location: "Japan", code: 'JP' },
        ]
    }
];

function viewModel(list, addons) {
    this.list = list;
    this.selectedRegion = ko.observable();
    this.selectedCountry = ko.observable();
}

ko.applyBindings(new viewModel(packageData));

如果在上面运行，我会收到以下 JS 错误。

Uncaught ReferenceError: Unable to parse bindings.
Bindings value: options: countries,
                   optionsCaption: 'Select...',
                   optionsText: 'location',
                   optionsValue: 'code',
                   value: $parent.selectedCountry
Message: countries is not defined

如果我在视图中丢失 'optionsValue: 'code,' 行（一个用于第一个选择字段，另一个用于第二个选择字段。但是这不会填充选项值，这不是我想要的。

例如，<option value>...</option>代替<option value="[country code]">...</option>.

有人可以帮助我修复我的代码<option value="[country code]">...<option>吗？

提前非常感谢。

4

1 回答 1

5

问题是，当您设置optionsValue属性时selectedRegion，现在只填充了代码。code 属性下面没有国家属性，因此绑定失败。解决此问题的一种方法是使用计算的 observable 根据selectedRegion代码返回国家/地区。

self.countryList = ko.computed(function () {
    var region = self.selectedRegion();
    var filtered = ko.utils.arrayFirst(self.list, function (item) {
        return item.code == region;
    });
    if (!filtered) {
        return []
    } else {
        return filtered.countries;
    }
});

然后，您只需更改绑定以使用计算的：options: $root.countryList。

工作示例：http: //jsfiddle.net/infiniteloops/AF2ct/

于 2013-11-10T04:45:56.040 回答