Kendo UI MVVM simple example

HTML

<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<div id="mainView" data-role="view">
    <select data-role="combobox"
            data-text-field="name"
            data-value-field="value"
            data-bind="source: reasons, value: reason, enabled: searchBoxEnabled"></select>
     
    <input type="text" id="quantity" class="k-textbox" data-bind="value: quantity, enabled: searchBoxEnabled" /> 
    <br/>
     <button class="k-button" data-bind="click: onClick">Toggle</button>
</div>

JavaScript

var observableViewModel = kendo.observable({
    reason: 2,
    reasons: [
        { name: "TEST1", value: "1" },
        { name: "TEST2", value: "2" }
    ],
    quantity: "10 grams",
    searchBoxEnabled: true,
    onClick: function (e) {
        e.preventDefault();
        if (this.get("searchBoxEnabled")) {
            this.set("searchBoxEnabled", false);
        }
        else {
            this.set("searchBoxEnabled", true);
        }
    }
});
//bind the view model
kendo.bind($("#mainView"), observableViewModel);