knockout.js bağımlı değişken örneğin bir ürünün için,

Question

Ben özelliklere göre bir "ürün" seçim yapmak niyetiyle, nakavt seçer bağlıydı yapmaya çalışıyorum

[altındaki güncellemelerini bakınız] seçer "boyut" ve "malzeme" olabilir, "boyut" seçtiysem, bir nakavt betiği arka tarafa bir istek yapar ve seçili boyut için hangi "malzeme" nin kullanılabilir olduğunu, başka bir deyişle bir özellik seçildiyse, diğer öznitelikleri sadece mevcut değerleri göstermek için filtrelenir ("tüm boyutlar": 1,2,3,4,5; "alüminyum": 1,4).

Özellikler listesi tamamen dinamiktir, ürünlere isteğe bağlı olarak bağlanabilecek yaklaşık 80 özellik vardır.

Bu durum için "en iyi uygulamalar" var mı?

Henüz başarılı olamadı, böyle koduyla çözmeye çalışıyorum:

var ViewModel = function(data) { 
    var self = this; 
    self.data = data; 
    self.attributes = ko.observableArray(); 
    self.data.forEach(function(item, i, a) { 
     // I passed .self to catch it later 
     // in products as view_model.attributes(). 
     self.attributes.push(new VariableProduct(item, self)); 
    }) 
}; 

var VariableProduct = function(item, view_model) { 
    var self = this; 
    self.attribute_name = ko.observable(item.name); 
    self.attribute_value = ko.observable('--'); 

    // list of attribute values 
    self.attribute_values = ko.computed(function() { 
     var result = {}; 
     view_model.attributes().forEach(function(attribute, i, a) { 
      // here I try to filter each attributes lists by values 
      // it doesn't work well 
      if (attribute.attribute_name() != self.attribute_name() && self.attribute_value() != '--') { 
       result = attribute.attribute_values().filter(
         function(value) { 
          return value.indexOf(self.attribute_value()) >= 0; 
         }); 
      } 
     }); 
     return result; 
    }); 
}; 

GÜNCELLEME 1:) (ko.subscribe için Dnyanesh en atıfla i bu sonuçları achived ettik değilmi 't Tamam henüz değil ama bir ilerleme:

http://jsfiddle.net/xwild/65eq14p3/

GÜNCELLEME 2: o solv oldu sonunda knockout.reactor ve knockout.mapping eklentileri ile ed. Detaylar ve cevap ile birlikte

Related stackoverflow question. bağımlı İçin

Answer 1

Sana şekilde

var vm = { 
 
     sizes: ko.observableArray([ 
 
      { name: 'size 1', id: 1}, 
 
      { name: 'size 2', id: 2}, 
 
      { name: 'size 3', id: 3}, 
 
      { name: 'size 4', id: 4} 
 
     ]), 
 
     selectedSize : ko.observable(0), 
 
    
 
    }; 
 
     
 
      vm.selectedSize.subscribe(function(newValue){ 
 
       alert('Selected Size is ---> ' + newValue) 
 
      // Here at this point call your ajax or backend method and bind the values which are coming form 
 
     }); 
 
     
 
    ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script> 
 
<select data-bind=" 
 
    options: sizes, 
 
    optionsText: 'name', 
 
    optionsValue: 'id', 
 
    value: selectedSize, 
 
    optionsCaption: 'Choose Size...'""> 
 
</select> 
 
    
 
<select data-bind=" 
 
    options: material, 
 
    optionsText: 'name', 
 
    optionsValue: 'id', 
 
    value: selectedMaterial, 
 
    optionsCaption: 'Choose Material...'""> 
 
</select>

ben senin sorunun çözümü yalnızca bir bölümüne bahsediyorum biliyorum ama aşağıdaki abone kullanabilirsiniz düşünüyorum seçmek, sana bölmek gerektiğini düşünüyorum veri nesnesini çeşitli denetimlere bağlamak.