Ko multi select bileşeninde 'options' binding nasıl yenilenir?

Question

Çok seçenekli bir bileşenim var, 'seçenekler' bağladım ile sınırlandırdım, 'seçenekler' başka bir çoklu seçim bileşeninde seçtiğim değere göre yenilenir. Aşağıda 2 seçenekleri yenilemek için bilgisayarlı değişkenleri kullanarak ikinci bileşenin

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

seçenekleri yeniliyorum ilk çok seçme bileşen

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

bu bileşende seçilen değere dayanarak

şöyledir:

branchesForSelect = ko.computed(function(){ 
    //selectedRepository is an observable array here 
    //some logic 

}); 

İyi çalışıyor, ancak yukarıdakilere ek olarak, 'branchesForSelect'i t içinde seçilen değerlere göre yenilemek istiyorum. o aynı bileşen. Anlamı, 'branchForSelect' 'A', 'B', 'C', daha sonra 'A' seçimini içeriyorsa, seçenekler listesinde yalnızca 'C' göstermek için 'branchForSelect'i yenilemek istiyorum.

Birisi bana yol gösterebilir mi? Soru açık değilse lütfen yorumlarda bana bildirin.

Teşekkür

İkinci seçenek listesi bir bilgisayarlı yaparak doğru yoldayız

Answer 1

. Hala yapmanız gereken şey budur: Hesaplanan içinde, seçime bağlı bir dizi seçenek döndürmek için selectedRepository değerini kullanın. Bu değeri kullanarak, nakavt, ilk seçimin value değişkeninin değişmesinden sonra, ikinci seçenek listesinin yeniden değerlendirildiğinden emin olacaktır.

yorumlarında sorunun aydınlatılması sonra: değerlerini değiştirme

kullanıcı girişi bir UX perspektifinden kötü bir fikir (Bana sorarsanız) 'dir, ama kesinlikle yapılabilir sonra kendiliğinden seçin. Aşağıdaki kod size nasıl gösterecektir. Çoklu seçimin ilk seçeneği aktif olduğunda, diğerleri gizlenir.

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)

siz "dalları" ile "depo" bağlantı için güzel bir yol bulmak için yardıma ihtiyacınız varsa bana bildirin:

İşte bir örnek. İdeal olarak, "depolar" bir dizi "dal" içeren kendi modellerine sahiptir. Daha sonra hesaplanmış dizinizi return self.firstSelection().branches;