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>

淘汰赛可观察的订阅：超出最大通话量

1 个答案: