ノックアウトドロップダウンカスケードオプションが更新されない

Question

ノックアウトを使用して依存ドロップダウンのデフォルト値を設定しようとしています。

値がharcodedのときは機能しますが、ajaxリクエストから値を取得する必要があり、2番目のドロップダウンオプションは更新されません。値self.selectedStateは更新されますが、私はすでにオプションが設定されていないので、selectの値はバインドされていないと思います。これは、これまでの私のコードです：

function myViewModel(country, state) { 
 
\t var self = this; 
 
    self.selectedCountry = ko.observable(); 
 
\t self.selectedState = ko.observable(); 
 
    
 
    self.availableCountries = ko.observableArray([ 
 
    \t { 
 
    \t \t id: 1, name: 'United States', states: [ 
 
\t \t \t \t { id: 1, name: 'Alabama' }, 
 
     { id: 2, name: 'California' }, 
 
\t \t \t ] 
 
\t \t }, 
 
\t \t { 
 
\t \t \t id: 2, name: 'Canada', states: [ 
 
\t \t \t \t { id: 53, name: 'Alberta' }, 
 
\t \t \t ] 
 
\t \t } 
 
\t ]); 
 
    
 
    self.availableStates = ko.observableArray([]); 
 
\t 
 
    self.selectedCountry.subscribe(function() { 
 
\t \t self.availableStates([]); 
 
    
 
\t \t for (var i = 0; i < self.availableCountries().length; i++) { 
 
\t \t \t if (self.availableCountries()[i].id == self.selectedCountry()) { 
 
\t \t \t \t self.availableStates(self.availableCountries()[i].states); 
 
\t \t \t \t break; 
 
\t \t \t } 
 
\t \t } 
 
\t }); 
 
    
 
    self.selectedCountry(1).selectedState(2); 
 
} 
 

 
var viewModel = new myViewModel(); 
 
ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<select data-bind="options: availableCountries, optionsText: 'name', optionsValue: 'id', optionsCaption: 'Select a country...', 
 
value: selectedCountry"></select> 
 

 
<select data-bind="options: availableStates, optionsText: 'name',optionsValue: 'id', value: selectedState, visible: availableStates().length > 0" style="display:none"></select>

はオプションがアヤックスから得られた場合に行われる必要がある特別なものはありますか？

jsfiddle

Answer 1

問題は「具体的には、AJAXではありませんが、そのself.selectedStateはdoesnの事実しばらくの間（オプションがフェッチされている間）対応するoptionを持っています。 the docsから ：あなたはvalueが<select>要素にバインディングを使用する場合

通常は、それ はあなたが関連付けられているモデル値が選択されている<select>内のどの項目 記述することを意味します。しかし、モデル の値をリストに対応するエントリがないものに設定するとどうなりますか？ デフォルトの動作では、Knockoutがモデル値を に上書きして、ドロップダウンリストで既に選択されているものにリセットします。 は、モデルとUIが同期しなくなるのを防ぎます。

ただし、その動作を望まないことがあります。代わりに ノックアウトを使用して、モデル観測値が の値をとって<select>に対応するエントリがない場合は、valueAllowUnset: trueを指定します。この場合、モデル値を <select>で表すことができない場合は、<select>には、 の時刻に選択値がありません。これは視覚的には空白で表されます。

Answer 2

これは、計算された、観察を利用する絶好の機会です。計算は、この仕事に適していると思われます。これは、あなたのトラックの依存関係に独自の手動サブスクリプションを設定することを防ぐためです。それを試してみる - 私はこれを達成するために、あなたのコードの非常に少し変更しました。..

function myViewModel(country, state) { 
 
    var self = this; 
 
    self.selectedCountry = ko.observable(); 
 
    self.selectedState = ko.observable(); 
 

 
    self.availableCountries = ko.observableArray([{ 
 
    id: 1, 
 
    name: 'United States', 
 
    states: [{ id: 1, name: 'Alabama' }, 
 
      { id: 2, name: 'California' }, ] 
 
    }, 
 
    { id: 2, 
 
     name: 'Canada', 
 
     states: [{ id: 53, name: 'Alberta' }, ] 
 
    }]); 
 

 
    self.availableStates = ko.computed(function() { 
 
    var states = []; 
 
    for (var i = 0; i < self.availableCountries().length; i++) { 
 
     if (self.availableCountries()[i].id == self.selectedCountry()) { 
 
     states = states.concat(self.availableCountries()[i].states); 
 
     break; 
 
     } 
 
    } 
 
    return states; 
 
    }); 
 

 
    self.selectedCountry(1).selectedState(2); 
 
} 
 

 
var viewModel = new myViewModel(); 
 
ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<select data-bind="options: availableCountries, optionsText: 'name', optionsValue: 'id', optionsCaption: 'Select a country...', 
 
value: selectedCountry"></select> 
 

 
<select data-bind="options: availableStates, optionsText: 'name',optionsValue: 'id', value: selectedState, visible: availableStates().length > 0" style="display:none"></select>