Kendo UI MVVM Sample: Example 01

Example of using the Kendo UI MVVM to bind a model to simple html elements.

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<div class="personFields">
    <div class="field">
        <div>First Name:</div><input data-bind="value: firstName"/>
    </div>
    <div class="field">
        <div>Last Name:</div><input data-bind="value: lastName"/>
    </div>
    <div class="field">
        <div>Last Name:</div><input data-bind="value: lastName"/>
    </div>
</div>

<div class="personFields">
    <div class="field">
        <div>First Name:</div><input data-bind="value: firstName"/>
    </div>
</div>

CSS

.title {
    font-weight: bold;
    font-size: 18px;
}

#personFields {
    margin-top: 20px;
}

.field {
    display: block;
    width: 100%;
    padding-bottom: 5px;
}

.field div {
    display: inline-block;
    width: 100px;
}

JavaScript

// Create an observable view model object.
var person = kendo.observable({
    firstName: "John",
    lastName: "DeVight"
});

// Bind the view model to the personFields element.
kendo.bind($('.personFields'), person);