Introduction à KnockoutJs

Ce contenu est essentiellement une traduction des documents originaux. L'intention est d'en apprendre davantage sur KnockoutJs pour Magento 2 et de créer du contenu en portugais sur KnockouJs.

Documentation

• Microsoft : MVVM
• KnockoutJs : Introduction
• KnockoutJs : Installation

Modèle MVVM

L'architecture MVVM (Model-View-ViewModel) est un modèle de conception logicielle largement utilisé dans les applications d'interface utilisateur. MVVM est particulièrement utile dans les applications dotées d'interfaces utilisateur complexes et interactives, car il sépare clairement la logique métier du comportement de l'interface. Cela facilite la maintenance, la testabilité et l'évolutivité du code.

Lorsque l'utilisateur interagit avec la View, le ViewModel capture ces actions et met à jour les données correspondantes dans le Model. Lorsque le Model est mis à jour, le ViewModel reçoit ces modifications et met automatiquement à jour la View, reflétant les modifications dans l'interface utilisateur. Le ViewModel peut également effectuer des actions spécifiques, telles que l'envoi de requêtes au serveur pour récupérer ou envoyer des données.

Modèle : Le Modèle représente la couche de données de l'application. Il gère la logique métier, les règles de validation, le stockage et la récupération des données. Le Modèle est généralement constitué d'objets de données qui représentent des entités et des fonctionnalités spécifiques au domaine d'application.

Vue : La Vue est la couche de présentation de l'application, chargée d'afficher les données du Modèle et d'interagir avec l'utilisateur. Il représente l'interface graphique avec laquelle l'utilisateur interagit pour visualiser et manipuler les données. Dans l'architecture MVVM, la View est aussi découplée que possible de la logique métier, ce qui facilite la mise à jour et le remplacement.

ViewModel : Le ViewModel est la partie centrale du modèle MVVM. Il agit comme intermédiaire entre la Vue et le Modèle, effectuant la communication et la liaison de données bidirectionnelle entre eux. Le ViewModel contient la logique de présentation, transformant les données du Model en un formulaire adapté à l'affichage dans la View. De plus, le ViewModel gère les événements et les réponses des utilisateurs, en interagissant avec le Model selon les besoins.

KnockoutJs

Knockout.js est une bibliothèque JavaScript open source qui vous permet de créer des interfaces utilisateur dynamiques et réactives. Il est particulièrement utile pour développer des applications Web avec une interface utilisateur complexe et interactive. KnockoutJs est basé sur le modèle de conception MVVM (Model-View-ViewModel), qui sépare la logique métier (Model) de la présentation (View) en passant par un intermédiaire couche appelée ViewModel. Elle est indépendante de toute autre structure.

KnockoutJs a été développé et est maintenu en tant que projet open source par Steve Sanderson, un employé de Microsoft le 5 juillet 2010.

KnockoutJs prend en charge tous les navigateurs grand public : IE 6, Firefox 3.5, Chrome, Opera, Safari (ordinateur de bureau/mobile). L'attribut data-bind n'est pas natif du HTML, bien qu'il soit un attribut acceptable (il est strictement compatible avec HTML 5 et ne pose pas de problèmes avec HTML 4, bien qu'un validateur indique qu'il s'agit d'un attribut non reconnu). Mais comme le navigateur ne sait pas ce que cela signifie, vous devez activer KnockoutJs pour que cela prenne effet.

Lorsque vous utilisez KnockoutJs, votre couche view est simplement votre document HTML avec des liaisons déclaratives pour le lier à la couche view-model. Alternativement, vous pouvez utiliser des modèles qui génèrent du HTML à l'aide des données d'un modèle dans la couche view-model.

Placez simplement le bloc script au bas d'un document HTML ou placez-le en haut et enveloppez le contenu dans un gestionnaire prêt pour le DOM comme la fonction $ de jQuery.

ko.applyBindings(myViewModel) : est une méthode utilisée pour appliquer une liaison de données dans KnockoutJs et lier un ViewModel (ou Model) à l'utilisateur de l'interface (Vue). Il connecte le ViewModel aux éléments HTML du DOM, permettant aux données du ViewModel d'être automatiquement reflétées dans l'interface utilisateur et vice versa. Lors de l'appel de cette méthode, KnockoutJs parcourt le DOM à la recherche d'éléments qui ont les directives KnockoutJs data bind et crée les liens entre ces éléments et les propriétés ViewModel spécifiées dans les directives .

Facultativement, vous pouvez transmettre un deuxième paramètre pour définir dans quelle partie du document vous souhaitez rechercher des attributs de liaison de données. Par exemple, ko.applyBindings(myViewModel, document.getElementById('someElementId')). Cela restreint l'activation à l'élément avec l'ID someElementId et ses descendants, ce qui est utile si vous souhaitez avoir plusieurs modèles d'affichage et associer chacun d'eux à une région différente de la page.

Installation

Référez simplement le fichier JavaScript à l'aide d'un

• Une analyse approfondie du composant de groupe de liste Bootstrap
• Explication détaillée du currying de la fonction JavaScript
• Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
• Angularjs intègre l'interface utilisateur WeChat (weui)
• Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript