JSFiddle - React, Tailwind, and code Playground

by valchev

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">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
values
<div>
    current value: <label data-bind="text: current" style="color: blue" />
</div>
<div>
    old value: <label data-bind="text: old" style="color:blue" />
</div>

<hr/>
1. please input value <span style="color:red;">abc</span> to text.
<br/>
<input type="text" id="t" data-role="autocomplete" data-bind="value: current" />


<br />
<hr/>
2. get widget's _old value.
<button data-bind="click: getOld">get _old</button>

<br /><hr/>
3. clear input value in mvvm model.
<button data-bind="click: clear">clear input value</button>

<br /><hr/>
4. but old value not be cleared!
<button data-bind="click: alertOld">get _old again</button>

<br /><hr/>
5. so if you input same value  <span style="color:red;">abc</span> to text again, it wasn't trigger widget's set value and change, because current value as same as old!
<button data-bind="click: getCurrent">get current</button>

JavaScript

kendo.init($("*"));

var viewModel = kendo.observable({
    current: "",
    old: "",
    getOld: function () {
        this.set("old", $("#t").data("kendoAutoComplete")._old);
    },
    alertOld: function () {
        alert("old value is:" + $("#t").data("kendoAutoComplete")._old);
    },
    clear: function () {
        this.set("current", "");
    },
    getCurrent: function () {
        alert("current value is:" + this.get("current"));
    }
});
kendo.bind($("*"), viewModel);