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