kendo-ui
Kendo UI MVVM
Zoeken…
Invoering
Kendo MVVM is een van het JavaScript MVVM-framework. Het is de implementatie van het MVVM-patroon.
Het maakt een definitie voor de gegevens die we willen weergeven en manipuleren (het model), de HTML-markeringen die structuur creëren voor de algemene webpagina (de weergave) en de JavaScript-code die gebruikersinvoer verwerkt, reageert op gebeurtenissen en de statische opmaak in dynamische elementen (het View-Model).
Opmerkingen
Kendo MVVM is het JavaScript MVVM-framework dat het MVVM-patroon implementeert.
Basic bindend
Visie :
<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>
View-model:
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);
VOOR DE demo BEZOEK JSFIDDLER VOORBEELD
Een binding koppelt een DOM-element (of widget) eigenschap aan een veld of methode van het View-Model. Bindingen worden opgegeven via het kenmerk data-bind in de formulierbindingsnaam : bekijk modelveld of methode , bijvoorbeeld waarde: voornaam . Sommige bindingen werden in het bovengenoemde voorbeeld gebruikt: waarde , bron , zichtbaar , ingeschakeld en klik .
De Kendo UI MVVM ondersteunt ook binding met andere eigenschappen: html , attr enz. De data-bind kan een door komma's gescheiden lijst met bindingen bevatten, bijv. Data-bind = "enabled: overeengekomen, klik: register" .