kendo-ui
Kendo UI MVVM
Buscar..
Introducción
Kendo MVVM es uno de los framework de JavaScript MVVM. Es la implementación del patrón MVVM.
Crea una definición para los datos que queremos mostrar y manipular (el Modelo), el formato HTML que crea la estructura para la página web general (la Vista) y el código JavaScript que maneja la entrada del usuario, reacciona a los eventos y transforma la marcado estático en elementos dinámicos (el modelo de vista).
Observaciones
Kendo MVVM es el marco de JavaScript MVVM que implementa el patrón MVVM.
Encuadernación básica
Ver:
<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>
Modelo de vista:
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);
Para demo VISITA JSFIDDLER EJEMPLO
Un enlace empareja una propiedad del elemento DOM (o widget) con un campo o método del modelo de vista. Los enlaces se especifican a través del atributo de enlace de datos en el nombre de enlace de formulario : ver el campo o método del modelo , por ejemplo, valor: nombre de pila . Se usaron algunos enlaces en el ejemplo mencionado anteriormente: valor , fuente , visible , habilitado y clic .
La interfaz de usuario MVVM de Kendo también admite enlaces a otras propiedades: html , attr , etc. El enlace de datos puede contener una lista de enlaces separados por comas, por ejemplo, datos-enlace = "habilitado: acordado, haga clic en: registrar" .