Wie aktualisiert man die 'Optionen'-Bindung in einer Ko-Multi-Select-Komponente?

Question

Ich habe eine Multi-Select-Komponente, die ich mit einer 'Optionen' Bindung gebunden habe, die 'Optionen' werden basierend auf dem Wert aktualisiert, den ich in einer anderen Multi-Auswahl-Komponente auswähle. Unten ist die erste Multiauswahl Komponente

<select data-bind="multiple: true, required: true, options:repositoriesForSelect, value: selectedRepository"></select> 

Basierend auf dem Wert in dieser Komponente ausgewählt, ist die Optionen der zweiten Komponente

<select data-bind=" multiple: true,required: true,options: branchesForSelect,value: selectedBranch"></select> 

mit dem berechneten Variablen Auffrischen der zweiten Optionen zu aktualisieren:

Das funktioniert gut, aber zusätzlich zu den oben genannten möchte ich die "Zweigniederlassungen" basierend auf den Werten in t aktualisieren er selbe Komponente. Das heißt, wenn die "Zweigniederlassung" die Werte "A", "B", "C" enthält, dann möchte ich bei der Auswahl von "A" "Zweigniederlassung" aktualisieren, um nur "C" in der Liste der Optionen anzuzeigen.

Kann mir bitte jemand eine Anleitung geben? Bitte lassen Sie mich in Kommentaren wissen, wenn die Frage unklar ist.

Dank

Answer 1

Sie auf dem richtigen Weg ist durch die zweite Option Liste eines berechnete machen. Dies müssen Sie noch tun: Verwenden Sie innerhalb des berechneten Werts den Wert selectedRepository, um ein Array von Optionen zurückzugeben, die mit der Auswahl verknüpft sind. Durch Verwendung dieses Werts stellt knockout sicher, dass nach der value Variable der ersten ausgewählten Änderungen die zweite Optionsliste erneut ausgewertet wird.

Nach der Klärung der Frage in den Kommentaren:

Ändern der Werte der Auswahl selbst nach Benutzereingabe eine schlechte Idee von einer UX Perspektive ist (wenn Sie mich fragen), aber sicher durchgeführt werden kann. Der folgende Code zeigt Ihnen wie. Wenn die erste Option einer Mehrfachauswahl aktiv ist, werden die anderen ausgeblendet.

Hier ist ein Beispiel:

var repositoryBranches = { 
 
    a: ["All", 1, 2, 3, 4, 5, 6], 
 
    b: ["All", 0, 7, 8], 
 
    c: ["All", 9, 10] 
 
}; 
 

 
var VM = function() { 
 
    var self = this; 
 
    
 
    this.repositoryKeys = ["a", "b", "c"]; 
 
    this.selectedRepository = ko.observable("a"); 
 
    
 
    this.selectedBranches = ko.observableArray([]); 
 
    this.branchesForSelectedRepository = ko.computed(function() { 
 
    var allBranchesForRepo = repositoryBranches[self.selectedRepository()]; 
 
    // We're making an exception if the first one is selected: 
 
    // don't show any other options if the selected one is the first one 
 
    if (self.selectedBranches()[0] === allBranchesForRepo[0]) { 
 
     return ["All"]; 
 
    } 
 
    
 
    return allBranchesForRepo; 
 
    }); 
 
    
 
    // Clear selection when changing repository 
 
    this.selectedRepository.subscribe(function clearSelection() { 
 
    self.selectedBranches([]); 
 
    }); 
 
}; 
 

 
ko.applyBindings(new VM());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<select data-bind="options:repositoryKeys, value: selectedRepository"> </select> 
 
<select multiple="true" data-bind="options:branchesForSelectedRepository, selectedOptions: selectedBranches"></select>

(fiddle)

Lassen Sie mich wissen, wenn Sie Hilfe benötigen Sie eine schöne Art und Weise zu finden, "Zweige" verlinken auf "Repositories". Idealerweise haben die "Repositories" ihre eigenen Modelle, die eine Reihe von "Zweigen" enthalten. Sie könnten dann Ihr berechnetes Array so definieren wie return self.firstSelection().branches;