kendo-ui => KVM UI MVVM

Introduction

Kendo MVVM est l'un des frameworks JavaScript MVVM. C'est l'implémentation du pattern MVVM.

Il crée une définition des données que nous voulons afficher et manipuler (le modèle), le balisage HTML qui crée la structure de la page Web globale (la vue) et le code JavaScript qui gère les entrées utilisateur, réagit aux événements et transforme le balisage statique en éléments dynamiques (le modèle de vue).

Remarques

Kendo MVVM est le framework JavaScript MVVM qui implémente le pattern MVVM.

Fixation de base

Vue :

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

Voir le modèle:

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

Pour la démonstration VISITEZ JSFIDDLER EXEMPLE

Une liaison associe une propriété d'élément DOM (ou widget) à un champ ou à une méthode du modèle de vue. Les liaisons sont spécifiées via l'attribut data-bind dans le nom de la liaison de formulaire : champ ou méthode du modèle de vue , par exemple, value: firstName . Certaines liaisons ont été utilisées dans l'exemple ci-dessus: value , source , visible , enabled et click .

L'interface utilisateur MVVM Kendo prend en charge la liaison à d' autres propriétés ainsi: html, etc. attr-bind de données peut contenir une liste séparée par des virgules des liaisons par exemple des données bind = « activé: d' accord, cliquez sur: registre ».

Modified text is an extract of the original Stack Overflow Documentation

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

kendo-ui
KVM UI MVVM

Recherche…

Introduction

Remarques

Fixation de base