knockout.js abhängige Variable wählt

Question

[Bitte sehen Updates an der Unterseite]

Ich versuche Knockout wählt abhängig zu machen, es soll ein „Produkt“ Auswahl durch diese Attribute machen, zum Beispiel ein Produkt kann "size" und "material" haben, wenn ich "size" gewählt habe, macht ein knockout script eine Anfrage an das Backend und ruft ab, welches "Material" für die gewählte Größe verfügbar ist, dh wenn ein Attribut ausgewählt ist, andere Attribute werden herausgefiltert, um nur verfügbare Werte anzuzeigen ("alle Größen": 1,2,3,4,5; "Aluminium": 1,4).

Die Attributliste ist vollständig dynamisch, es gibt ungefähr 80 Attribute, die beliebig mit den Produkten verknüpft werden können.

Gibt es "Best Practices" für diese Situation?

Ich versuche, es so mit dem Code zu lösen, ohne Erfolg noch:

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

UPDATE 1: Mit Dnyanesh Verweis auf ko.subscribe(), habe ich diese Ergebnisse achived, isn ‚t ok noch nicht, aber ein Fortschritt:

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

UPDATE 2: Am Ende war es solv ed mit knockout.reactor und knockout.mapping Plugins.

Related stackoverflow question mit Details und die Antwort.

Answer 1

Für abhängige wählen Ich glaube, Sie

in folgender Weise abonnieren können

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>

Ich weiß, ich spreche nur ein Teil der Lösung für Ihr Problem, aber ich glaube, Sie müssen teilen Ihr Datenobjekt, um es an verschiedene Steuerelemente zu binden.