kendo-ui
Kendo UI MVVM
Поиск…
Вступление
Kendo MVVM является одной из фреймворков JavaScript MVVM. Это реализация шаблона MVVM.
Он создает определение для данных, которые мы хотим отображать и манипулировать (Модель), разметку HTML, которая создает структуру для общей веб-страницы (вид), и код JavaScript, который обрабатывает ввод пользователя, реагирует на события и преобразует статическая разметка в динамические элементы (модель просмотра).
замечания
Kendo MVVM - это среда MVVM JavaScript, которая реализует шаблон MVVM.
Основная привязка
Посмотреть :
<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 (или виджет) для поля или метода View-Model. Привязки указываются с помощью атрибута привязки данных в имени привязки формы : вид модели или метод модели , например value: firstName . В приведенном выше примере использовались некоторые привязки: значение , источник , видимый , разрешенный и клик .
MVVM Kendo UI поддерживает привязку к другим свойствам: html , attr и т. Д. Связывание данных может содержать список привязок, разделенных запятыми, например data-bind = "enabled: agree, click: register" .