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

标签 javascript knockout.js

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

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

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

最佳答案

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

关于javascript - Knockout js - 如果某些条件不匹配,如何将下拉值更改为以前的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42421506/

相关文章:

javascript - MomentJS 在服务器上以不同方式比较日期

javascript - Jquery colorbox - 在现有 colorbox 中重定向/转发

javascript - SlideToggle jQuery 速度

knockout.js - Durandal 中的 Knockout Mapping 插件未定义

javascript - 有什么办法让点击绑定(bind)允许验证

javascript - 使用knockout css绑定(bind)动态绑定(bind)多个类(类的名称将来自一些可观察的变量)

javascript - 仅当使用 AngularJS 从服务器发现新数据时才自动刷新数据

javascript - 从 2 个现有数组创建自定义数组

javascript - 如何处理 knockout 订阅中的错误

javascript - 如果该元素曾经被隐藏,我的 jQuery UI 日期选择器将不会显示