Share
La création d'interfaces utilisateur pilotées par les données est l'une des tâches les plus complexes d'un développeur Web. Cela nécessite une gestion minutieuse entre l'interface et ses données sous-jacentes. Par exemple, considérons une interface de panier d'achat simple pour un site Web de commerce électronique. Lorsque l'utilisateur supprime un article du panier, vous devez le supprimer du jeu de données sous-jacent, supprimer l'élément associé de la page HTML du panier et mettre à jour le prix total. Pour toutes les applications, sauf la plus triviale, déterminer quels éléments HTML reposent sur une donnée particulière est une entreprise sujette aux erreurs.
Figure 1: Suivi manuel des dépendances entre les éléments HTML et leurs données sous-jacentes La bibliothèque JavaScript Knockout.js fournit un moyen plus simple de gérer ce type d'interfaces complexes, pilotées par les données. Au lieu de rechercher manuellement les sections de la page HTML qui dépendent des données affectées, Knockout.js vous permet de créer une connexion directe entre les données sous-jacentes et leur présentation. Après avoir lié un élément HTML à un objet de données particulier, toute modification apportée à cet objet est automatiquement reflété dans le DOM.
Figure 2: Suivi automatique des dépendances à l'aide de Knockout.js Cela vous permet de vous concentrer sur les données de votre application. Une fois vos modèles HTML configurés, vous pouvez utiliser exclusivement des objets de données JavaScript. Avec Knockout.js, tout ce que vous avez à faire pour supprimer un article du panier d'achat est de le supprimer du tableau JavaScript qui représente les articles du panier d'achat de l'utilisateur. Les éléments HTML correspondants seront automatiquement supprimés de la page et le prix total recalculé.
En d'autres termes, Knockout.js vous permet de concevoir un affichage à mise à jour automatique pour vos objets JavaScript..
Mais ce n'est pas tout ce que Knockout peut faire. Outre le suivi automatique des dépendances, il dispose de plusieurs fonctionnalités de support pour le développement rapide d'interfaces utilisateur réactives…
Knockout.js est un côté client bibliothèque entièrement écrite en JavaScript. Cela le rend compatible avec pratiquement tous les logiciels côté serveur, d'ASP.NET à PHP, en passant par Django, Ruby on Rails et même des infrastructures Web personnalisées..
En ce qui concerne l'interface frontale, Knockout.js connecte le modèle de données sous-jacent aux éléments HTML en ajoutant un seul attribut HTML. Cela signifie qu'il peut être intégré à un projet existant avec des modifications minimes de vos bibliothèques HTML, CSS et autres bibliothèques JavaScript..
Bien que Knockout.js soit livré avec près de deux douzaines de liaisons permettant de définir le mode d'affichage des données, vous pouvez toujours avoir besoin d'un comportement spécifique à l'application (par exemple, un widget d'évaluation par étoiles pour les critiques de films soumises par l'utilisateur). Heureusement, Knockout.js facilite l'ajout de vos propres liaisons et vous permet de contrôler totalement la transformation de vos données en HTML. De plus, étant donné que ces liaisons personnalisées sont intégrées dans le langage de base des modèles, il est simple de réutiliser des widgets dans d'autres parties de votre application..
Figure 3: Réutilisation d'une liaison personnalisée dans plusieurs composants d'interface utilisateur Knockout.js est livré avec plusieurs fonctions utilitaires, notamment les filtres de tableau, l'analyse JSON et même un moyen générique de mapper les données du serveur vers une vue HTML. Ces utilitaires permettent de transformer de grandes quantités de données en une interface utilisateur dynamique avec seulement quelques lignes de code..
Knockout.js est ne pas destiné à remplacer jQuery, Prototype ou MooTools. Il ne tente pas de fournir une animation, la gestion des événements génériques ou la fonctionnalité AJAX (toutefois, Knockout.js peut analyser les données reçues d'un appel AJAX). Knockout.js se concentre uniquement sur la conception d'interfaces utilisateur évolutives et pilotées par les données. La manière dont les données sous-jacentes sont obtenues dépend de vous..
Figure 4: Knockout.js complétant une pile d’applications Web complètes Ce haut niveau de spécialisation rend Knockout.js compatible avec toute autre technologie côté client et côté serveur, mais cela signifie également que Knockout.js nécessite souvent la coopération d'un framework JavaScript plus complet. En ce sens, Knockout.js est plus un supplément à une pile d'applications Web traditionnelle, plutôt qu'une partie intégrante de celle-ci.
Lorsque vous êtes prêt, passez à la leçon un!
Cette leçon représente un chapitre de Knockout Succinctly, un eBook gratuit de l'équipe de Syncfusion.
Accentsconagua