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

debugcn 发表于 Dev

恩博克曼斯

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

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

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...无限期）。

我如何防止这种情况发生？

射线

我认为这将是使用可写计算 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。