Javascript Knockout.js:计算的可观测值未按预期更新

编辑：为函数PopulatedDropdown和函数isSystemCorrect添加了代码（见底部）

编辑2我将其缩小了一点，问题似乎出现在计算可观测的arrayFilter函数中。无论我尝试什么，它都返回一个空数组。我已经检查过self.testsuites（）在筛选之前看起来正常，但筛选仍然失败。

我的计算可观察、筛选测试套件有问题

从screendump中可以看到，testsuites observable已正确填充，但计算的observable仍为空。我还试着从下拉菜单中选择另一个选项，而不是“付款”，以查看这是否会触发可观察的，但它没有

我认为每次更改self.testsuites（）或self.dropdownSelected（）时，计算出的可观测值都会被更新，但它们似乎都不会触发

我做错了什么

我只想在选择下拉选项后，每次更改它们中的任何一个时，让计算的可观察过滤器过滤TestSuite

function ViewModel() {
    var self = this;

    // The item currently selected from a dropdown menu
    self.dropdownSelected = ko.observable("Payment");

    // This will contain all testsuites from all dropdown options
    self.testsuites = ko.mapping.fromJS('');

    // This will contain only testsuites from the chosen dropdown option
    self.filteredTestsuites = ko.computed(function () {
        return ko.utils.arrayFilter(self.testsuites(), function (testsuite) {
            return (isSystemCorrect(testsuite.System(), self.dropdownSelected()));
        });
    }, self);

    // Function for populating the testsuites observableArray
    self.cacheTestsuites = function (data) {
        self.testsuites(ko.mapping.fromJS(data));
    };


    self.populateDropdown = function(testsuiteArray) {

        for (var i = 0, len = testsuiteArray().length; i < len; ++i) {

            var firstNodeInSystem = testsuiteArray()[i].System().split("/")[0];

            var allreadyExists = ko.utils.arrayFirst(self.dropdownOptions(), function(option) {
                return (option.Name === firstNodeInSystem);
            });

            if (!allreadyExists) {
                self.dropdownOptions.push({ Name: firstNodeInSystem });
            }
        }
    };
}


$(document).ready(function () {

    $.getJSON("/api/TestSuites", function (data) {
        vm.cacheTestsuites(data);
        vm.populateDropdown(vm.testsuites());
        ko.applyBindings(vm);
    });
}

---

按照注释中的建议-重写cacheTestsuites方法：

self.testsuites = ko.observableArray();
self.filteredTestsuites = ko.computed(function () {
    return ko.utils.arrayFilter(self.testsuites(), function (testsuite) {            
        return (isSystemCorrect(testsuite.System(), self.dropdownSelected()));
    });
});
self.cacheTestsuites = function (data) {
    var a = ko.mapping.fromJS(data);
    self.testsuites(a());
};

---

这里唯一不同的是从映射函数中展开ObservalArray。

也许您还应该向我们展示

PopulatedDropdown

和

isSystemCorrect

，因为“bug”很可能发生在那里。添加了函数：）我要尝试的第一件事是调用带有和不带的Observales妄想症。比如

self.testsuites

和

self.testsuites（）

。我见过很多情况下改变“呼叫”带括号或不带括号的可观察对象to修复了各种无声错误。

system

和

partialSystem

参数应该是什么样子，如果我们想要

true

结果？

cacheTestsuites

调用正在包装

testsuites

的内容，导致第一个参数

arrayFilter

不是一个数组，因此会导致计算问题。就在筛选

console.log（self.testsuites（））

之前，您将看到这个问题。

self.testsuites = ko.observableArray();
self.filteredTestsuites = ko.computed(function () {
    return ko.utils.arrayFilter(self.testsuites(), function (testsuite) {            
        return (isSystemCorrect(testsuite.System(), self.dropdownSelected()));
    });
});
self.cacheTestsuites = function (data) {
    var a = ko.mapping.fromJS(data);
    self.testsuites(a());
};