2017-10-10 64 views
0

我想限制可观察到的敲除值能够达到特定值的范围的值。敲除 - 在特定范围内保持可观察值

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



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

有没有一种方法,我可以限制处理,输入到低于100例如正数?

回答

1

截至目前,Knockout允许您按照解释here所述在可观察值上订阅值更改事件。默认情况下,您可以分别订阅changebeforeChange回调,但不能通过常见的回调。

围绕subscribeChanged处理程序有处理程序,它在observable随其新旧值更改之前通知回调函数。

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

在下面的代码片段,我比较观察到的新值与定义的最大值,并重置可观察到其旧的值,如果新的值大于100

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:有一个稍微不同的实现类似的扩展的位置: https://stackoverflow.com/a/18184016/5894241