剑道击倒:NumericTextBox在插入超过最大值时显示验证消息

Question

我正在使用剑道击倒库。我有一个数值文本框小部件的最大值为20。如果输入更大的值，小部件将四舍五入到最大值。因此，如果您使用键盘输入值50，并且从输入中失去焦点或保存表单，则该值将四舍五入到最大值20。

我希望当您在小部件文本框中输入更大的值时，将显示错误消息。考虑到这一点，我将配置更改为:

<input type="number"  
data-bind="kendoNumericTextBox: { value: price, min="1", max="20" }" />

<input type="number"  min="1" max="20"
data-bind="kendoNumericTextBox: { value: price }" />

但是最终的结果是一样的。该值是四舍五入的。如果我删除小部件:

<input type="number"  min="1" max="20" />

我得到了想要的行为。这可以使用数字文本框小部件来完成吗?

http://jsfiddle.net/2Qnv7/29/

为了澄清，我添加了没有小部件的所需行为。由于

Answer 1

您可以在更改时绑定事件，但Kendo不会发送无效值，因此您必须做一些额外的黑客操作，以便存储类型值(例如通过绑定模糊事件)，然后比较存储值和限制。

是HTML

Kendo numeric text box:
<input type="number"  min="1" max="20"
data-bind="event: { blur: blur } ,kendoNumericTextBox: { value: price, change: change }" />
Regular Input:
<input type="number"  min="1" max="20" />
    <button type="submit">Submit</button>
</form>    

KO javascript model

var ViewModel = function() {
   this.price = ko.observable(11);
    this.blur = function(model, event) {
        $(event.target).data({ _prevValue: event.target.value });
    }
    this.change = function() {
        var _prevValue  = $(this.element).data('_prevValue') - 0;
        if (_prevValue > this.options.max || _prevValue < this._value) {
            alert(_prevValue + ' is out of range');
        }
    }
};
ko.applyBindings(new ViewModel());

您也可以将值存储到this的属性中，而不是jQuery数据中。

是jsfiddle中的示例http://jsfiddle.net/Z8yq5/