Kendo numeric text box MVVM min&max binding

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.mobile.all.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<input data-role="numerictextbox"
    type="number"
    name="numeric"
    id="numeric"
    data-bind="value: value, max: max, min: min" />

JavaScript

kendo.data.binders.widget.max = kendo.data.Binder.extend({
    init: function(widget, bindings, options) {
        //call the base constructor
        kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
    },
    refresh: function() {
        var that = this,
            value = that.bindings["max"].get(); //get the value from the View-Model
        $(that.element).data("kendoNumericTextBox").max(value); //update the widget
    }
});

kendo.data.binders.widget.min = kendo.data.Binder.extend({
    init: function(widget, bindings, options) {
        //call the base constructor
        kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
    },
    refresh: function() {
        var that = this,
            value = that.bindings["min"].get(); //get the value from the View-Model
        $(that.element).data("kendoNumericTextBox").min(value); //update the widget
    }
});

var viewModel = kendo.observable({
    value: 30,
    min: 10,
    max: 30
});

kendo.bind($(document.body), viewModel);