基本繫結

檢視：

<form id="form">
    <label>First Name: <input data-bind="value: firstName" /></label>
    <label>Last Name: <input data-bind="value: lastName" /></label>
    <label>Gender:
        <select data-bind="source: genders, value: gender"></select>
    </label>
    <label><input type="checkbox" data-bind="checked: agreed" /> I have read the licence agreement</label>
    <button data-bind="enabled: agreed, click: register">Register</button>
    <div data-bind="visible: confirmed">
        Thank you for your registration, <span data-bind="text: firstName"></span> <span data-bind="text: lastName"></span>
    </div>
</form>

檢視模型：

var viewModel = kendo.observable({
        firstName: "Arif",
        lastName: "Rahman",
        genders: ["Male", "Female"],
        gender: "Male",
        agreed: false,
        confirmed: false,
        register: function(e) {
            e.preventDefault();

            this.set("confirmed", true);
        }
    });

    kendo.bind($("form"), viewModel);

對於演示 VISIT JSFIDDLER 示例

繫結將 DOM 元素（或視窗小部件）屬性與檢視模型的欄位或方法配對。繫結通過表單繫結名稱中的 data-bind 屬性指定 ：檢視模型欄位或方法，例如 value：firstName 。在上述示例中使用了一些繫結： 值，源，可見，啟用和單擊。

Kendo UI MVVM 也支援繫結到其他屬性： html ， attr 等 .data -bind 可能包含以逗號分隔的繫結列表，例如 data-bind =“enabled：agree，click：register” 。