淘汰賽“與”綁定，級聯下拉菜單，重新加載選定的值不起作用

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

簡短回答：下拉列表沒有設置，因為您設置為self.category()的object和loadPresetData其他下拉列表在sampleModel （或sampleProductCategories中的sampleProductCategories中不存在。

是的，有一個對象看起來和JSON.parse()創建的對象具有相同的屬性和嵌套數組，但它們是完全不同的對象。 他們將無法通過Strict Equality Comparison or "=== comparison" 。 您可以通過設置sampleProductCategories數組本身的category和其他級聯值來證明此假設。

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更新時，knockout 會在sampleProductCategories查找此對象。 它存在，因此category不會被設置為undefined 。

這是一個更新的小提琴