Question

我想限制可观察的挖空值可以达到特定值范围的值。

    var viewModel {
       number : ko.observable(0);
    }



<input data-bind="value : number" />

有没有办法可以将处理后的输入限制为例如100以下的正数？

Answer 1

截至目前，Knockout允许您按照Link Here所述订阅可观察值的价值变化事件。默认情况下，您可以单独订阅change和beforeChange回调，但不能通过常见的回调订阅。

subscribeChanged处理程序周围有here，在可观察的更改之前通知回调函数及其新值和旧值。¹

在同一个Github线程中，我使用了subscribeChanged扩展器的一个实现。使用它，您可以在每次更改时验证observable的值，如果不符合条件，则将其重置为原始值。

在下面的代码片段中，我将observable的新值与定义的最大值进行比较，并在新值大于100时将observable重置为旧值。

ko.subscribable.fn.subscribeChanged = function (callback) {
    var savedValue = this.peek();
    return this.subscribe(function (latestValue) {
        var oldValue = savedValue;
        savedValue = latestValue;
        callback(latestValue, oldValue);
    });
};

var model = function () {
  var self= this;
  self.number = ko.observable(0);
  self.maxNumber = 100;
  
  self.number.subscribeChanged(function(newValue, oldValue) {
    if(newValue > self.maxNumber ||  // New value must not be larger than 100
      (newValue != "" && parseFloat(newValue) != newValue)) { // New value must be a valid number
      console.log('Rejecting value change.');
      self.number(oldValue);
    } else {
      console.log("Old: " + oldValue + ", New: " + newValue);
    }
  });
}

ko.applyBindings(new model());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<input data-bind="textInput: number" />

_{1：这里的类似扩展器的实现略有不同：
some discussion}

淘汰赛 - 保持特定范围内的可观察价值

1 个答案: