knockout.js зависимой переменной выбирает

Question

[Пожалуйста, смотрите обновления в нижней части]

Я пытаюсь сделать нокаут зависело выбирает, он предназначен, чтобы сделать выбор «продукт» по этим признакам, например, продукт может иметь «размер» и «материал», если я выбрал «размер», скрипт нокаута сделает запрос на бэкэнд и получит доступный «материал» для выбранного размера, другими словами, если выбран атрибут, другие атрибуты отфильтровываются, чтобы показывать только доступные значения («все размеры»: 1,2,3,4,5, «алюминий»: 1,4).

Список атрибутов полностью динамичен, существует около 80 атрибутов, которые могут быть связаны с продуктами произвольным образом.

Есть ли «лучшие практики» для этой ситуации?

Я пытаюсь решить с кодом, как это, без успеха еще:

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: со ссылкой Dnyanesh на ko.subscribe(), я уже achived эти результаты, ISN «т ок пока, но прогресс:

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

UPDATE 2: в конце концов, это было Солв ed с knockout.reactor и knockout.mapping плагинами.

Related stackoverflow question с подробностями и ответом.

Answer 1

Для зависимого выбор Я думаю, что вы можете использовать подписаться следующим образом

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>

Я знаю, что я имею в виду только часть решения вашей проблемы, но, я думаю, вам нужно разделить ваш объект данных привязывает его к различным элементам управления.