基本绑定
查看:
<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” 。