如何防止依赖可观察量的递归

Question

我的 KnockoutJS 代码存在创建无限循环的问题。

假设在我的视图模型中，我有一个代表去度假的人数的值。该值绑定到一个选择列表，以便客户可以更改人数。

var viewModel = {
    selectedTravellerCount:  ko.observable(),
    travellers: ko.observableArray([])       
}

当选择列表的值发生变化（即旅行者的数量发生变化）时，我想显示一系列选择列表，以允许客户输入每个旅行者的年龄。

我假设我需要创建一个依赖于 UI 中呈现的 selectedTravellerCount 的可观察对象。

viewModel.travellerCount = ko.dependentObservable(function() {
    var tQ = this.selectedTravellerCount();
    alert("count:" + tQ);
        for (var i = 0; i < tQ; i++) {
        alert("adding");
        var t = new traveller();
        alert("a");
        t.Age = 18;
        alert("b");
        this.travellers.push(t);
        alert("added");
    }
}, viewModel);

当页面首次呈现时，这可以正常工作。然而，第一次更改选择列表时，dependentObservable 函数会被重复调用并到达 alert("b") 行。

因此，在我看来，旅行者被推送到旅行者数组，然后导致函数再次运行，然后无限重复。

但是，我认为该函数应该仅依赖于 selectedTravellerCount 值的变化。

我缺少什么？

我也尝试过：

var viewModel = {
   selectedTravellerCount:  ko.observable(),
   travellers: ko.observableArray([])
   addTraveller: function (age) {
       alert(age);
       this.travellers.push({ age: age });
   }         
}

viewModel.travellerCount = ko.dependentObservable(function() {
    var tQ = this.selectedTravellerCount();
        for (var i = 0; i < tQ; i++) {
            this.addTraveller(18);
    }
}, viewModel);

Answer 1

您需要使用订阅而不是dependObservable()。每次 viewModel 更改时都会触发 dependentObservable，因此得名。添加到旅行者==更改viewModel

看看这里

订阅描述此处，位于底部。