녹아웃 "with"바인딩, 계단식 드롭 다운, 선택한 값을 다시로드하지 않음

Question

"With"바인딩을 사용하여 계단식 드롭 다운을 만드는 녹아웃 예제가 있습니다.

값을 선택하면 드롭 다운이 제대로 작동하며 해당 선택 옵션마다 4 개의 드롭 다운 메뉴가 계단식으로 표시됩니다.

그러나 드롭 다운 설정을 저장하고 싶습니다. 페이지로드시 값을 미리 설정하는 것과 마찬가지로 저장된 값을 다시 가져올 수 있습니다.

드롭 다운에서 선택한 후 'save'를 호출하여 관찰 가능 값을 로그 아웃합니다. 그러나 '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 배열 자체의 다른 계단식 값을 설정하여이 가설을 증명할 수 있습니다. 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]); 
}; 

지금, 녹아웃 가고 sampleProductCategories에서이 개체를 찾습니다. 그것이 존재하므로 category은 undefined으로 설정되지 않습니다.

여기에 있습니다. updated fiddle