挖空 - 两个可观察字段相互更新

Question

我在一个表单上有两个字段;"天"和"日期"。

<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。我希望用户能够编辑这些字段中的任何一个，另一个字段要自动更新。

我的视图模型如下(简化以保持简洁(：

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"/>