淘汰可观察订阅：超出最大调用堆栈

Question

我正在尝试编写一个程序，自动将两个单位相互转换并用转换后的值填充另一个单位，即月薪到小时工资转换器。

为了更好地展示我正在尝试做的事情，这是我的淘汰赛模型的精简版：

class Model {
    hourlyRate: KnockoutObservable<number>;
    monthlyRate: KnockoutObservable<number>;
    hoursPerWeek: KnockoutObservable<number>;

    constructor() {
        this.hourlyRate = ko.observable<number>();
        this.monthlyRate = ko.observable<number>();
        this.hoursPerWeek = ko.observable<number>(40);

        this.monthlyRate.subscribe((newValue: number) => {
            const hourlyRate = newValue * 3 / 13 / this.hoursPerWeek();
            this.hourlyRate(hourlyRate);
        });

        this.hourlyRate.subscribe((newValue: number) => {
            const monthlyRate = newValue * this.hoursPerWeek() * 13 / 3;
            this.monthlyRate(monthlyRate);
        });
    }
}

但是，这会导致调用堆栈超出异常（hourlyRate 更新 monthlyRate，然后更新 hourlyRate，后者又更新 monthlyRate...无限期）。

如何防止这种情况发生？

Answer 1

我认为这是使用 writable computed observables 的好地方。

这是一个片段（抱歉，我不精通打字稿）：

var viewModel = function(){
  this.hourlyRate = ko.observable();
  this.hoursPerWeek = ko.observable(40);
  this.monthlyRate = ko.pureComputed({
    read: function(){
      return this.hourlyRate() * this.hoursPerWeek() *13/3;
    },
    write: function(newValue){
      const hourlyRate = newValue * 3 / 13 / this.hoursPerWeek();
      this.hourlyRate(hourlyRate);
    },
    owner: this
  });
};

ko.applyBindings(new viewModel());

label {
  display: inline-block;
  width: 140px;
  text-align: right;
}

.block {
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div class="block">
    <label>Hourly Rate:</label>
    <input type="number" data-bind="value: hourlyRate">
</div>
<div class="block">
    <label>Monthly Rate:</label>
    <input type="number" data-bind="value: monthlyRate">
</div>

淘汰可观察订阅：超出最大调用堆栈

Knockout observable subscriptions: maximum call stack exceeded

javascript

knockout.js

typescript