Knockout“with”binding,cascading dropdown,reload selected values not working
问题描述:
我有一个淘汰赛的例子,使用“With”绑定来创建一个级联下拉菜单。Knockout“with”binding,cascading dropdown,reload selected values not working
下拉式工作正常,如果我选择值,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>
答
简短的回答:在下拉菜单中没有得到设置,因为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
谢谢你这么多,这正是我想要的。我应该想到这种方法,但却陷入了一种思维方式......好的答案,简洁而简洁。 – fntstk