0

我有一个如下的 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。

4

1 回答 1

1

您基本上是在询问是否可以将“墙壁”和“天花板”标准化为一个概念。你当然可以。让我们打电话给他们paintables。将您的数据结构更改为如下所示：

var scenario = {
    paints: [/* omitted */],
    paintables: [
        { 
          "name":"walls",
          "sheen":"Flat",
          "paintProduct":"Cashmere"
        },
        { 
          "name":"ceiling",
          "sheen":"Flat",
          "paintProduct":"Cashmere"
    }]
};

然后，您可以拥有一个构造函数，该函数以 DRY 方式Paintable实现您对 s 的逻辑。sheen

于 2015-09-20T16:40:12.720 回答