Knockout JS Observables, entfernen und erneut hinzufügen wählen Sie Optionen

Question

Also ich bin vertraut mit Knockout Observablen, aber dieses Problem ist ein bisschen schwierig.

So übernehmen Sie einige Daten: var data = ['cat', 'dog', 'bird']

können nun annehmen, dass Sie zwei Dropdown-Menüs, die diese Daten verwenden, so sind beide mit gleichen Daten gefüllt.

Wenn ich Katze in Dropdown A wähle, dann sollte ich Katze in Dropdown B nicht sehen. Es sollte entfernt werden. Wie auch immer, wenn ich dann Vogel in ertrinke A auswähle, sollte er dann aus dem Dropdown B entfernt werden und Katze sollte als eine Auswahloption neu hinzugefügt werden. Das gleiche sollte gesagt werden, wenn ich Katze aus Dropdown B wähle, sollte es aus A entfernt werden.

Jetzt wo habe ich bekommen? Nein, wo andere dann:

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

Ich bin nicht einmal sicher, ob ich diese oben richtig eingestellt ist, wie, wie würde ich fallen lassen nach unten B hören, was in Drop-Down-A los ist und umgekehrt?

Hilfe

Answer 1

Wenn Sie mit einer kleinen Anzahl von Dropdown-Listen zu tun hat Sie diese ziemlich leicht mit berechneten Funktionen zu tun.

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(); 
     }); 
    });