ノックアウトJS観測可能、選択項目の削除と再追加

Question

私はノックアウト観測に精通していますが、この問題は少し難解です。

だから、あなたには、いくつかのデータを持っていると仮定します。var data = ['cat', 'dog', 'bird']

は今、あなたは、このデータを使用する2回のドロップダウンを持っているので、両方が同じデータが移入されていると仮定することができます。

私がドロップダウンで猫を選択した場合、ドロップダウンで猫が見えないはずです。それは削除する必要があります。どのように鳥を選んでAを倒すとドロップダウンBから削除し、猫を選択肢として再追加する必要があります。ドロップダウンBから猫を選択した場合は、それをAから削除する必要があります。

今どこに行ったのですか？ノーどこ他のその後：

viewModel.dropDownA.subscribe(function(selectedValueFromB){ }); 
viewModel.dropDownB.subscribe(function(selectedValueFromA){ }); 

私はきちんとこれらを設定した場合、私はBをドロップダウンになるだろうかのようにA、ドロップダウンおよびその逆で何が起こっているのかを聞いても、わからないのですか？

ヘルプ

Answer 1

あなたが計算された機能で、かなり簡単にこれを行うことができますドロップダウンの数が少ないを扱っている場合。

HTML：

<select data-bind="options: optionsA, optionsCaption: '', value: selectedA"></select> 
<select data-bind="options: optionsB, optionsCaption: '', value: selectedB"></select> 

JS：

var self = this; 

    self.data = ['cat', 'dog', 'bird']; 
    self.selectedA = ko.observable(); 
    self.selectedB = ko.observable(); 

    self.optionsA = ko.computed(function(){ 
     return self.data.filter(function(item){ 
     return item !== self.selectedB(); 
     }); 
    }); 

    self.optionsB = ko.computed(function(){ 
     return self.data.filter(function(item){ 
     return item !== self.selectedA(); 
     }); 
    });