Knockout“with”binding，cascading dropdown，reload selected values not working

Question

我有一个淘汰赛的例子，使用“With”绑定来创建一个级联下拉菜单。

下拉式工作正常，如果我选择值，4个下拉式级联与每个相应的选择选项。

但是我想保存下拉设置，所以在页面加载时，我可以恢复保存的值，就​​像预设值一样。

在从下拉菜单中选择后，通过调用“保存”来记录可观察值的值。但在调用'loadPresetData'时不起作用，以模拟将数据映射到可观察的选定值。

我已经在下面分出了小提琴。 http://jsfiddle.net/turrytheman/3urLenmd/

var sampleModel=[{"products":[{"name":"1948 Porsche 356-A Roadster","year":[{"name":2015,"months":[{"name":"jan"},{"name":"april"},{"name":"dec"}]}]},{"name":"1948 Porsche Type 356 Roadster","year":[{"name":2014,"months":[{"name":"jan"},{"name":"april"},{"name":"dec"}]},{"name":2015,"months":[{"name":"oct"},{"name":"marc"},{"name":"feb"}]}]},{"name":"1949 Jaguar XK 120","year":[{"name":2019,"months":[{"name":"oct"},{"name":"jun"},{"name":"jul"}]},{"name":2013,"months":[{"name":"oct"},{"name":"marc"},{"name":"feb"}]}]}],"name":"Classic Cars"},{"products":[{"name":"1936 Harley Davidson El Knucklehead","year":[{"name":2011,"months":[{"name":"jan"},{"name":"nov"},{"name":"sep"}]}]},{"name":"1957 Vespa GS150","year":[{"name":2014,"months":[{"name":"jan"},{"name":"april"},{"name":"dec"}]},{"name":2015,"months":[{"name":"another"},{"name":"yet"},{"name":"another"}]}]}],"name":"Motorcycles"}]; 


var Cascading = function() { 
    var self = this; 
    self.category = ko.observable(); 
    self.product = ko.observable(); 
    self.years = ko.observable(); 
    self.month = ko.observable(); 

    // Whenever the category changes, reset the product selection 
    self.category.subscribe(function(val) { 
     self.product(undefined); 
    }); 
    self.product.subscribe(function(val) { 
     self.years(undefined); 
    }); 
    self.years.subscribe(function(val) { 
     self.month(undefined); 
    }); 

    // Operations 
    self.loadPresetData = function() { //simulating a load, recieved from AJAX, setting saved values 
     self.category(JSON.parse('{"products":[{"name":"1936 Harley Davidson El Knucklehead","year":[{"name":2011,"months":[{"name":"jan"},{"name":"nov"},{"name":"sep"}]}]},{"name":"1957 Vespa GS150","year":[{"name":2014,"months":[{"name":"jan"},{"name":"april"},{"name":"dec"}]},{"name":2015,"months":[{"name":"another"},{"name":"yet"},{"name":"another"}]}]}],"name":"Motorcycles"}')); 
     self.product(JSON.parse('{"name":"1936 Harley Davidson El Knucklehead","year":[{"name":2011,"months":[{"name":"jan"},{"name":"nov"},{"name":"sep"}]}]}')); 
     self.years(JSON.parse('{"name":2015,"months":[{"name":"jan"},{"name":"april"},{"name":"dec"}]}')); 
     self.month(JSON.parse('{"name":"april"}')); 
} 
    self.save = function() { 
     var data = {"category": ko.toJSON(ko.toJS(self.category)), 
        "product": ko.toJSON(ko.toJS(self.product)), 
        "years": ko.toJSON(ko.toJS(self.years)) , 
        "month": ko.toJSON(ko.toJS(self.month)) 
        } 
     console.log(data); 
    }; 
}; 

ko.applyBindings(new Cascading()); 

HTML：

<div class='liveExample'> 
    <div> 
     <select data-bind='options: sampleModel, optionsText: "name", optionsCaption: "Select...", value: category'> </select> 
    </div> 
    <div data-bind="with: category"> 
     <select data-bind='options: products, optionsText: "name", optionsCaption: "Select...", value: $parent.product'> </select> 
    </div> 
     <div data-bind="with: product"> 
     <select data-bind='options: year, optionsText: "name", optionsCaption: "Select...", value: $parent.years'> </select> 
    </div> 
     <div data-bind="with: years"> 
     <select data-bind='options: months, optionsText: "name", optionsCaption: "Select...", value: $parent.month'> </select> 
    </div> 
    <button data-bind='click: loadPresetData'>Load</button> 
    <button data-bind='click: save'>Save</button> 

    <div style="color: red"data-bind="text:'Category :' + ko.toJSON(category)"></div> 
    <div style="color: green"data-bind="text:'Product :' + ko.toJSON(product)"></div> 
    <div style="color: blue"data-bind="text:'Year :' + ko.toJSON(years)"></div> 
    <div style="color: black"data-bind="text:'Months :' + ko.toJSON(month)"></div> 
</div> 

Answer 1

简短的回答：在下拉菜单中没有得到设置，因为object你设置self.category()和loadPresetData其他下拉菜单不sampleModel（或sampleProductCategories中存在小提琴）。

是的，有一个对象，该看起来像，并具有相同的性质和嵌套数组作为对象JSON.parse()创建，但它们是完全不同对象。他们会失败Strict Equality Comparison or "=== comparison"。您可以通过设置category以及sampleProductCategories阵列本身的其他级联值来证明此假设。

self.loadPresetData = function() { 
    self.category(sampleProductCategories[1]); 
    self.product(sampleProductCategories[1].products[0]); 
    self.years(sampleProductCategories[1].products[0].year[0]); 
    self.month(sampleProductCategories[1].products[0].year[0].months[0]); 
}; 

现在，当category更新，淘汰赛进入和查找此对象sampleProductCategories。它存在，因此category将不会设置为undefined。

下面是一个updated fiddle