kendo-ui
Kendo UI MVVM
Sök…
Introduktion
Kendo MVVM är ett av JavaScript MVVM-ramverket. Det är implementeringen av MVVM-mönstret.
Det skapar en definition för data som vi vill visa och manipulera (modellen), HTML-markeringen som skapar struktur för den övergripande webbsidan (vyn) och JavaScript-koden som hanterar användarinmatning, reagerar på händelser och transformerar statisk markering till dynamiska element (View-Model).
Anmärkningar
Kendo MVVM är JavaScript MVVM-ramverket som implementerar MVVM-mönstret.
Grundläggande bindning
Visa:
<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>
Visa-modell:
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);
För demo BESÖK JSFIDDLER EXEMPEL
En bindning kopplar en DOM-element (eller widget) -egenskap till ett fält eller metod för View-Model. Bindningar specificeras via data-bind attributet i form-bindnings namn: view modell fält eller metod, t ex värdet: firstname. Vissa bindningar användes i det nämnda exemplet: värde , källa , synlig , aktiverad och klick .
De Kendo UI MVVM bärare som binder till andra egenskaper också: html, attr etc. Data-bind kan innehålla en kommaseparerad lista av bindningar exempelvis data-bind = "aktiverad: enats klickar: register".