我在表单上有两个字段;“天”和“日期”。
<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。我希望用户能够编辑这些字段中的任何一个,并自动编辑另一个字段。
我的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);
});
我遇到的问题是,因为两个值都是可观察的,并且每个都更新另一个,所以一旦其中一个值自动更新,它就会触发另一个更新循环。是否有其他方法来获得我想要的行为?
提前谢谢了。
一种方法是将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"/>