knockout.js和observable不更新，即使有断点遍历

Question

我遇到了一个问题，即一个可观察对象没有更新，即使我逐步完成，即使我尝试手动更新它，它仍然保留相同的旧值。下面，如果self.divisionId发生变化，则计算出的可观测self.divisionBrackets运行。self.divisionBracketId(divisionBrackets[0].Id)运行并且具有与前一个不同的值，但当我退出它时，self.divisionBracketId仍然具有相同的值？日志记录之前和之后显示相同的值，即使使用不同的值进行了更新。

您可以在此处查看链接。

 function Brackets() {
        var self = this;
        self.loaded = ko.observable(false);
        self.divisionId = ko.observable();
        self.divisionBracketId = ko.observable();
        self.divisions = ko.observableArray([]);
        self.brackets = [];
        self.divisionBrackets = ko.computed(function () {
            var divisionId = self.divisionId();
        self.divisionBracketId(null);
        var divisionBrackets = ko.utils.arrayFilter(self.brackets, function(bracket) {
            return bracket.DivisionId == divisionId;
        });
        console.log("Division Brackets Count: " + divisionBrackets.length);
        if (divisionBrackets.length > 0) {
            console.log("Selected Division Bracket ID: " + divisionBrackets[0].Id);
            console.log("Before Update: " + self.divisionBracketId());
            self.divisionBracketId(divisionBrackets[0].Id);
            console.log("After Update: " + self.divisionBracketId());
        }
        return divisionBrackets;
        });
        self.search = function() {
            self.loaded(true);
            resize();
        };
        self.divisionBracketId.subscribe(function(_) {
            app.showProgress();
        });
        self.init = function (options) {
            self.divisions(options.divisions);
            self.brackets = options.brackets;
            app.applyBindings();
        };
    };

Answer 1

我像Jeff说的那样通过订阅来修复它。

self.divisionBrackets = ko.computed(function () {
            var divisionId = self.divisionId();
            return ko.utils.arrayFilter(self.brackets, function(bracket) {
                return bracket.DivisionId == divisionId;
            });
        });
        self.divisionBrackets.subscribe(function (divisionBrackets) {
            if (divisionBrackets.length > 0) {
                self.divisionBracketId(divisionBrackets[0].Id);
            }
        });

Answer 2

为了更新计算的可观测值，必须在函数中的某个位置读取另一个可观测值。如果是这样，计算出的可观测值将依赖于该可观测值。

尽管您在filter函数中读取了divisionId，但不能保证该函数会被调用。在初始化时，这从来都不是因为self.brackets最初是一个空数组。

要解决此问题，只需读取filter函数之外的id即可。然后，只要divisionId发生变化，计算的值就会更新。此外，也要考虑使brackets可观测，这样，如果该数组发生变化，它仍然会更新。

self.divisionBrackets = ko.computed(function () {
    self.divisionBracketId(null);
    var divisionId = self.divisionId(); 
    var divisionBrackets = ko.utils.arrayFilter(self.brackets, function(bracket) {
        return bracket.DivisionId == divisionId;
    });
    if(divisionBrackets.length > 0)
        self.divisionBracketId(divisionBrackets[0].Id);
    return divisionBrackets;
});