Knockoutjs <select>基於另一個<select>不工作

我想激活兩個選項有值的選項，例如。 <option value='...'>...</option>使用Knockoutjs。Knockoutjs <select>基於另一個<select>不工作

然後它會根據第一個選擇字段中的所選值填充第二個選擇字段選項。

僅供參考，我找到了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：‘代碼，’行，我認爲（一個第一選擇字段，另一個用於第二選擇字段但是，這不填充選項值，這是不是我想。

例如，<option value>...</option>而不是<option value="[country code]">...</option>。

能有人幫我如何可以解決我的代碼，所以我得到<option value="[country code]">...<option>？

非常感謝提前。

來源

2013-11-10 user2975436

問題是，當您設置optionsValue屬性selectedRegion現在只填充代碼。代碼屬性下面沒有國家/地區屬性，因此綁定失敗。解決這個問題的一種方法是使用基於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-10 04:45:56

非常感謝。 – user2975436

Knockoutjs <select>基於另一個<select>不工作

回答

相關問題