Selects the dependent variable knockout.js

Question

[Refer to the updates below]

I am trying to make a knockout depending on the choice, it is intended to select a “product” by these attributes, for example, a product can have a “size” and a “material”, if I select a “size”, a knockout script will make a request for a backend and get which material "is available for the selected size, in other words, if an attribute is selected, other attributes are filtered out to show only available values ​​(" all sizes ": 1,2, 3,4,5," aluminum ": 1,4).

The list of attributes is completely dynamic, there are about 80 attributes that can be associated with products in any way.

Is there a “best practice” for this situation?

I am trying to solve it with code like this, before I have time:

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: With the Dnyanesh link to ko.subscribe (), I achieved these results, so far not everything is all right, but progress:

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

UPDATE 2: In the end, it was resolved using knockout.reactor and knockout.mapping plugins.

https://stackoverflow.com/a/3186269/how-to-setup-statement-in-javascript/232837#816623

Answer 1

For the dependent choice, I think you can use the subscription as follows

 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> 

I know that I'm only talking about a part of the solution to your problem, but I think you need to separate your data object in order to bind it to various controls.