knockout.js - 如何防止依赖可观察量的递归

Question

我的 KnockoutJS 代码有一个问题，它创建了一个无限循环。

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

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 , 在底部。