javascript - Knockout js - 如果某些条件不匹配，如何将下拉值更改为以前的值

Question

knockout js - 在我的 HTML 页面中，我有一个下拉列表和 JQgrid，用户可以在其中添加新行。如果用户在保存网格数据之前更改下拉值，我想提醒用户是否要保存网格数据或继续。如果用户想保存数据，下拉值应该是旧值，否则是新值。

我面临下拉值更改为新值的问题。

我在下拉列表的 selectedItem 上有 knockout js subscribe 方法。在订阅方法中，存在填充网格的逻辑。

Answer 1

observable 的 subscribe 方法会告诉您值在更改后已更改为什么，因此不幸的是现在取消已经太迟了。我认为你可以通过绑定(bind)到 change 事件而不是使用值绑定(bind)来完成你想要的，并且如果它通过你的条件，则用新值手动更新 observable。

var viewModel = function() {
  var self = this;
  self.Options = [1, 2, 3, 4];
  self.selectedOption = ko.observable();
  self.selectedOption.subscribe(function(newValue) {
    console.log(newValue);
  });

  self.isOptionValid = function(value) {
    return (value > 2);
  }

  self.onChange = function(viewModel, event) {
    var target = event.target;
    var newValue = $(target).val();
    if (self.isOptionValid(newValue)) {
      self.selectedOption(newValue);
    } else {
      console.log('Invalid selection');
      $(target).val(self.selectedOption()); //reset to previous value
    }
  }
}

ko.applyBindings(new viewModel());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div>
  <span>Pick a number greater than 2</span><br/>
  <Select data-bind="options: Options, optionsCaption: '', event: {change: onChange}">  
  </Select>
</div>

这样做的缺点是，它只是一种单向绑定(bind)，这意味着如果您的 observable 值从其他来源发生变化，则下拉列表将不会更新为该新值。如果您需要保留双向绑定(bind)，那么您可能想尝试使用自定义绑定(bind)处理程序，例如:gated value binding