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

您需要使用订阅而不是dependsObservable（）。每次viewModel更改时都会触发dependsObservable，因此名称。添加给旅行者==更改viewModel

看看here

订阅在底部描述here。

如何使用依赖的observable来防止递归

1 个答案: