Question

运行下面的代码时出现javascript运行时错误。访问Uncaught TypeError: Cannot read property 'name' of null时，dep3中的self.dep2().name。

如果我将dep2的声明移到dep1之上，则错误就会消失。这是Knockout中的一个错误还是我做错了什么？在我看来dep3由于dep1在重新计算dep2之前更改而被重新计算，但我希望Knockout能够处理这种情况。

function ViewModel () {
    var self = this;

    self.root = ko.observable(null);

    self.dep1 = ko.computed(function () {
        return self.root() ? self.root().prop1 : null;
    });

    self.dep2 = ko.computed(function () {
        return self.root() ? self.root().prop2 : null;
    });

    self.dep3 = ko.computed(function () {
        if (self.dep1()) {
            return self.dep2().name;
        }
    });
}

globalViewModel = new ViewModel();

globalViewModel.root({
    prop1: {name: "ThisIsPropOne"},
    prop2: {name: "thisIsPropTwo"}
});

Answer 1

您对评估依赖项的方式是正确的。对root的更改将触发dep1和dep2重新评估，但dep1的更改会首先触发dep3。

在这种情况下，一个选项是限制dep3，如：

self.dep3 = ko.computed(function () {
    if (self.dep1()) {
        return self.dep2().name;
    }
}).extend({ throttle: 1 });

否则，请在此处结帐Michael Best的延迟更新插件：https://github.com/mbest/knockout-deferred-updates，它将以比仅限制更强大的方式正确处理此问题。

在KnockoutJS中，是否存在必须声明计算值的特定顺序？

1 个答案: