Suche…


Einführung

Kendo MVVM ist eines der JavaScript MVVM-Frameworks. Es ist die Implementierung des MVVM-Musters.

Es erstellt eine Definition für die Daten, die angezeigt und bearbeitet werden sollen (das Modell), das HTML-Markup, das die Struktur für die gesamte Webseite (die Ansicht) erstellt, und den JavaScript-Code, der Benutzereingaben verarbeitet, auf Ereignisse reagiert und die statisches Markup in dynamische Elemente (das View-Model).

Bemerkungen

Kendo MVVM ist das JavaScript-MVVM-Framework, das das MVVM-Muster implementiert.

Grundbindung

Aussicht :

<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>

Ansichtsmodell:

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 die Demo VISIT JSFIDDLER BEISPIEL

Eine Bindung verbindet ein DOM-Element (oder Widget) mit einem Feld oder einer Methode des View-Models. Bindungen werden über das data-bind- Attribut im Formularbindungsnamen angegeben: Sichtmodellfeld oder -methode , z. B. Wert: firstName . In diesem Beispiel wurden einige Bindungen verwendet: value , source , visible , enabled und click .

Die Kendo UI MVVM unterstützt zu anderen Eigenschaften Bindung auch: html, attr etc. Der Daten-bind kann eine durch Kommata getrennte Liste von Bindungen zB Daten-bind = „aktiviert: vereinbart, klicken Sie auf : Register“ enthalten.



Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow