淘汰赛 - 两个可观察的领域相互更新

Question

我在一个表单上有两个字段； 'Days' 和 'Date'。

<div id="myForm">
    <label for="days">Days</label>
    <input id="days" type="text" data-bind="value:myViewModel.days" />

    <label for="date">Date</label>
    <input id="date" type="text" data-bind="value:myViewModel.date" />
</div>

每个字段都绑定到一个 KO observable。我希望用户能够编辑这些字段中的任何一个并自动更新另一个字段。

我的ViewModel如下（为简洁起见进行了简化）：

myViewModel = new function () {
    var self = this;
    self.days = ko.observable(10);
    self.date = ko.observable('2020-02-06');
};

myViewModel.days.subscribe(function (newValue) {
    var newDate = JSON call to get new date using newValue
    myViewModel.date(newDate);
});

myViewModel.date.subscribe(function (newValue) {
    var newDays = JSON call to get days using newValue
    myViewModel.days(newDays);
});

我遇到的问题是因为两个值都是可观察值并且每个值都更新另一个值，一旦其中一个值自动更新，它就会触发另一个更新循环。是否有其他方法可以实现我想要的行为？

非常感谢。

Answer 1

实现此目的的一种方法是将 UI 绑定到可写计算而不是直接绑定到可观察对象。 UI 更新被发送到计算的，计算的指示更新哪些底层可观察对象而不触发任何进一步的（模型）更新。

function viewModel(){
  var self = this;
  
  this._observable1 = ko.observable(10);
  this._observable2 = ko.observable(20);
  
  this.observable1 = ko.computed({
    read: function(val){
      return self._observable1();
    },
    write: function(val){
      self._observable1(val);
      self._observable2(val*2); //also update 2
      console.log('1 updated');    
    }
  });
  
  this.observable2 = ko.computed({
    read: function(val){
      return self._observable2();
    },
    write: function(val){
      self._observable2(val);
      self._observable1(val / 2); //also update 1
      console.log('2 updated');    
    }
  });
}

ko.applyBindings(new viewModel());

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

1: <input type="text" data-bind="textInput: observable1"/>
<br/>
2: <input type="text" data-bind="textInput: observable2"/>

淘汰赛 - 两个可观察的领域相互更新

Knockout - two observable fields updating each other

knockout.js