Question

我尝试使用KnockoutJS根据产品类别，产品制造商和产品型号创建一系列精选控件。

这很好用，级联按预期运行。

然而，最后一个下拉列表是由4个值的选择填充的，我希望所选的选项与产品的价值相匹配。

因此，我必须查询前3个下拉菜单的选定选项才能获得价格。

即。我需要知道所选产品的类别，制造商和型号才能获得价格。此查询似乎确实有效，但未设置价格下降的选定值。

在这个小提琴中，self.initialPrice返回750（它在一个警告框中返回以进行调试），但价格下拉列表的选定选项保持在250.

function GadgetsViewModel() {

    var self = this;

    self.gadgetTypes = ko.computed(function () {
        var gadgetTypes = Enumerable.From(gadgets)
            .Select(function (x) { return x.Type })
            .ToArray();
        var types = ko.utils.arrayMap(gadgetTypes, function (item) { return item })
        return ko.utils.arrayGetDistinctValues(types).sort();
    });
    self.selectedGadgetType = ko.observable();


    self.gadgetMakes = ko.computed(function () {
        var gadgetMakes = Enumerable.From(gadgets)
             .Where(function (x) { return x.Type == self.selectedGadgetType() })
            .Select(function (x) { return x.Make })
            .ToArray();
        var makes = ko.utils.arrayMap(gadgetMakes, function (item) { return item })
        return ko.utils.arrayGetDistinctValues(makes).sort();
    });
    self.selectedGadgetMake = ko.observable();


    self.gadgetModels = ko.computed(function () {
        var gadgetModels = Enumerable.From(gadgets)
             .Where(function (x) { return x.Type == self.selectedGadgetType() && x.Make == self.selectedGadgetMake() })
            .Select(function (x) { return x.Model })
            .ToArray();
        var models = ko.utils.arrayMap(gadgetModels, function (item) { return item })
        return ko.utils.arrayGetDistinctValues(models).sort();
    });
    self.selectedGadgetModel = ko.observable();


    self.priceBands = ko.computed(function () {
        var gadgetPriceBands = Enumerable.From(gadgetRates)
             .Where(function (x) { return x.Category == 2 })
            .Select(function (x) { return x.MaxValue })
            .ToArray();
        var priceBands = ko.utils.arrayMap(gadgetPriceBands, function (item) { return item })
        return ko.utils.arrayGetDistinctValues(priceBands);
    });


    self.initialPrice = ko.computed(function () {

        if (self.selectedGadgetType() != null && self.selectedGadgetMake() != null && self.selectedGadgetModel() != null) {
            var price = Enumerable.From(gadgets)
                 .Where(function (x) { return x.Type == self.selectedGadgetType() && x.Make == self.selectedGadgetMake() && x.Model == self.selectedGadgetModel() })
                .Select(function (x) { return x.Value })
                .ToArray();

            alert(price[0]);
            return price[0];

        }
    });

    self.selectedPriceBand = ko.observable(self.initialPrice());
}

ko.applyBindings(new GadgetsViewModel());

Answer 1

将选定的priceBand定义为可观察的：

self.selectedPriceBand = ko.observable();

更改计算的initialPrice，以便更新此可观察对象，如下所示：

alert(price[0]);
self.selectedPriceBand(price[0]);
return price[0];

删除重新定义observable的行：

self.selectedPriceBand = ko.observable(self.initialPrice());

执行此操作时，现有的observable将被销毁，并且绑定将丢失。新创建的observable不受任何限制。

如果你做了这么简单的修改，你的小提琴就会起作用：

http://jsfiddle.net/4LvLgjjy/1/

KnockoutJS - 根据计算的observable的输出设置选择列表的初始值

1 个答案: