kendo-ui
Kendo UI MVVM
Ricerca…
introduzione
Kendo MVVM è uno dei framework MVVM JavaScript. È l'implementazione del pattern MVVM.
Crea una definizione per i dati che vogliamo visualizzare e manipolare (il modello), il markup HTML che crea la struttura per la pagina Web complessiva (la vista) e il codice JavaScript che gestisce l'input dell'utente, reagisce agli eventi e trasforma la markup statico in elementi dinamici (il modello di vista).
Osservazioni
Kendo MVVM è il framework MVVM JavaScript che implementa il pattern MVVM.
Rilegatura di base
Vista :
<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>
Visualizza modello:
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);
Per la demo VISITA JSFIDDLER ESEMPIO
Un legame associa una proprietà elemento DOM (o widget) a un campo o un metodo del modello di vista. I bind vengono specificati tramite l'attributo data-bind nel nome del bind del modulo : visualizza il campo o il metodo del modello , ad es. Valore: firstName . Nell'esempio sopra riportato sono stati utilizzati alcuni collegamenti: valore , origine , visibile , abilitato e clic .
L'UI MVVM di Kendo supporta l'associazione anche ad altre proprietà: html , attr ecc. Il data-bind può contenere un elenco di associazioni separati da virgole, ad esempio data-bind = "enabled: agree, click: register" .