JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://dl.dropbox.com/u/40036711/Scripts/kendo.web.min.js"></script>
<div id="demo">
<h3>Kendo MVVM Demo</h3>
<p>MVVM keeps the model and the view in sync (so you don't have to). In the following example try changing first name and you will see the model updates itself, and so the fullname.</p>
<hr/><br/>
<p>First Name: <input data-bind="value: firstName" /></p>
<p>Full Name: <label data-bind="text: fullName"></label></p><br/>
<div class="weak">
View Model: <br />
{ <br />
<span class="field">firstName:
<label data-bind="text: firstName"></label></span>, <br />
<span class="field">lastName:
<label data-bind="text: lastName"></label></span>, <br />
<span class="field">fullName:
<label data-bind="text: fullName"></label></span> <br />
}
</div>
</div>
CSS
body{padding:20px;font-family:Sans-serif;font-size:12px;}
.field{margin-left:20px;}
.weak{color:#999;}
p{margin:10px 0;}
h3{font-weight:bold;font-size:16px;}
JavaScript
var person = kendo.observable({
firstName: "Prashant",
lastName: "Chaudhary",
fullName: function() {
return this.get("firstName") + " " + this.get("lastName");
}
});
kendo.bind($('#demo'), person);