我有一个类似以下的json结构:
var scenario = {
paints: [
{
product: 'Super Paint',
sheens: [
{ sheen: 'Satin', cost: 42 },
{ sheen: 'Semi-Gloss', cost: 50 }
]
},
{
product: 'Cashmere',
sheens: [
{ sheen: 'Flat', cost: 42 },
{ sheen: 'Medium Lustre', cost: 50 }
]
}
],
walls: {
"sheen":"Flat",
"paintProduct":"Cashmere",
},
ceiling: {
"sheen":"Flat",
"paintProduct":"Cashmere",
}
};
我现在想出要根据给定的可涂漆项目制作下拉菜单,具体如下:
function getSheens(paintProduct) {
if (paintProduct) {
for (var i = 0; i < self.scenario.paints.length; ++i) {
if (self.scenario.paints[i].product === paintProduct) {
return self.scenario.paints[i].sheens;
}
}
}
return null;
}
self.scenario.walls.sheens = ko.computed(function() {
return getSheens(self.scenario.walls.paintProduct());
});
self.scenario.ceiling.sheens = ko.computed(function() {
return getSheens(self.scenario.ceiling.paintProduct());
});
这是html:
<div class="item edit-walls" data-bind="with: scenario.walls">
<label>Product</label>
<select class="form-control paint-product" data-bind="options:$parent.scenario.paints, optionsText:'product', optionsValue:'product', value:paintProduct"></select>
<label>Sheen</label>
<select class="form-control paint-sheen" data-bind="options:$parent.scenario.walls.sheens, optionsText:'sheen', optionsValue:'sheen', value:sheen"></select>
</div>
更换给定项目的涂料产品时,应重新装入新选择的涂料产品的光泽。
油漆产品的选定值和物品的光泽,即墙壁,存储在墙壁物体中。
我想避免的是为每种不同的项目类型重复计算的淘汰赛。有没有办法让这种情况在全球范围内发生并以某种方式传递给上下文?
我正在使用knockout.js,knockout.viewmodel.js和jQuery。