温馨提示:本文翻译自stackoverflow.com,查看原文请点击:knockout.js - Knockout
knockout.js

knockout.js - 昏死

发布于 2020-04-23 17:26:05

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

<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);
});

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

提前谢谢了。

查看更多

提问者
chut319
被浏览
25
Jason Spake 2020-02-07 07:33

一种方法是将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"/>