Liaisons avancées dans Knockout.js

L'écriture d'applications complexes est liée à l'augmentation de la complexité du code, bien que cela se produise généralement n'est pas un axiome ou une règle établie, en fait, il serait préférable que notre application soit complexe en raison de l'union de nombreuses petites applications, car une simple petite application rendrait la vie du développeur moins compliquée.

Dans le cas d Knockout.js quelque chose de similaire se produit avec reliures, où il y a des comportements que nous pouvons atteindre en utilisant le reliures Cependant, cela générerait une grande complexité au final puisque cela nous coupe un peu de flexibilité, avec cela nous ne disons pas que le reliures les bases sont mauvaises, il y a simplement des moments où elles ne fonctionneraient pas correctement pour nous.

Liaisons avancéesC'est pourquoi nous devons utiliser le fixations avancées, ici nous pouvons construire notre propre reliures avec des comportements que nous définissons directement, nous épargnant un certain degré de complexité dans le code et gagnant en lisibilité, le seul inconvénient de l'appeler c'est que nous construirions ces comportements presque à partir de zéro, rendant la réutilisation du code nulle.

Faire la liaison de deux ou plusieurs ViewModels
Il y a des moments où notre Voir les modèles devrait rester aussi simple que possible, ou peut-être devons-nous utiliser un VoirModèle qui est partagé sur chaque page de notre application, en tout cas l'exigence de pouvoir utiliser plusieurs Voir les modèles en même temps il reste.

Comment ça marche?Avant de s'inquiéter de ce problème, il est bon de savoir que ce n'est pas quelque chose de fou et pas impossible à faire, en fait c'est une pratique très courante pour garder la simplicité et la lisibilité de notre code dans l'application. Pour que cela se produise, nous n'avons qu'à passer un deuxième paramètre à la méthode ko.applyBindings qui nous aidera à atteindre cet objectif en limitant la contraignant au HTML qui le contient, de cette façon nous pouvons appliquer tous les VoirModèle dont nous avons besoin sans aucun inconvénient

Voyons un petit exemple où nous allons rendre cela possible, tout d'abord nous allons construire un HTML où nous aurons deux éléments chacun avec un nom de VoirModèle différent, cela nous donnera la base de ce que nous voulons réaliser et dans chaque entrée nous placerons simplement un liaison de données de type texte.

Déjà dans la partie de JavaScript nous définirons notre VoirModèle général où nous retournerons un attribut appelé nom et au moment d'en faire l'instance nous allons créer un vueModèle1 et un vueModèle2 qui seront des exemples de VoirModèle général que nous créons en utilisant des noms différents, enfin en appliquant le ko.applyBinding nous dirons quel bloc HTML chacun doit appartenir et ainsi nous atteindrons l'objectif de cet exemple.

Voyons donc dans le code suivant comment nous exprimons tout ce que nous avons expliqué précédemment :

 Liaison de données avancée

Voyons dans l'image suivante à quoi ressemble notre exemple lorsque nous l'exécutons dans le navigateur :

AGRANDIR

On voit sur l'image que nos deux Voir les modèles effectivement ils sont appliqués dans notre HTML chacun contenu dans l'élément que nous passons comme deuxième paramètre à la méthode ko.applyBindings () nous donnant ainsi une idée de la façon dont nous pouvons l'appliquer plus complètement dans nos applications.

Fixations et TinyMCE
Pour cet exemple nous allons construire une fonctionnalité adaptée au monde réel, nous allons construire un contraignant avancé pour nous aider à intégrer l'éditeur TinyMCE dans notre HTML, ce que fait cet éditeur est de construire une interface WYSIWYG, c'est-à-dire un éditeur de texte enrichi. La principale difficulté de cette implémentation est que nous devons créer notre propre contraignant, ce qui peut nous causer des maux de tête si nous n'avons pas un guide adéquat, ce que nous aurons maintenant.

ExigencesAfin de réaliser cet exemple, nous devons télécharger quelques ressources externes, dans ce cas jQuery dans sa dernière version, en plus de télécharger le TinyMCE et l'inclure dans notre projet, pour obtenir les ressources, nous n'avons qu'à faire une recherche rapide dans Google nous ne nous attarderons donc pas longtemps sur ce point. L'autre chose dont nous aurons besoin est de créer un nouveau fichier appelé kobinding.js c'est là que nous écrirons le code nécessaire pour que notre solution puisse fonctionner correctement. Une fois que nous avons téléchargé toutes nos ressources et dans un chemin auquel nous pouvons accéder depuis notre application, nous pouvons alors écrire notre code.

Ce que l'application fera, c'est nous donner un Aperçu de ce que nous écrivons, pour cela nous allons créer un formulaire où nous placerons notre zone de texte qui aura à TinyMCE, un bouton reset pour tout remettre à l'état initial et enfin un où nous recevrons le texte que nous écrivons.

Enfin, nous inclurons toutes nos ressources, y compris le nouveau fichier kobinding.js et nous construisons le code nécessaire pour notre VoirModèle avec un observable qui nous permet de détecter les changements dans notre zone de texte, voyons à quoi ressemble notre code :

 Liaison de données avancée TinyMCE Réinitialiser le contenu
Aperçu

Si nous regardons le code et que nous avons suivi les tutoriels précédents, nous remarquerons qu'il n'y a rien qui puisse nous faire douter, cependant si nous l'exécutons dans notre navigateur, cela ne fonctionnera pas comme nous l'avons expliqué et c'est parce que nous besoin d'un contraignant personnalisé dans notre nouveau fichier.

Ce que ce nouveau code fait, c'est un lien entre le comportement du TinyMCE et le nôtre VoirModèle, pour cela nous allons créer deux fonctions ou méthodes appelées init Oui mettre à jour, pour la méthode init comme son nom l'indique c'est lorsque nous initialisons notre composant, ici nous définissons le contraignant de la zone de texte avec TinyMCE pour que nous puissions appliquer l'observable, en plus nous définirons l'événement changement c'est à ce moment-là que l'état et le contenu de notre zone de texte changent, afin que nous puissions mettre à jour le contenu en temps réel.

L'autre méthode ou fonction est mettre à jour, celui-ci est activé chaque fois qu'il y a des changements dans l'élément lié, comme le bouton pour rétablir le contenu, ce qu'il fait, c'est qu'il est directement lié à ce que l'observable que nous avions créé précédemment nous fournit. Voyons alors le code final pour notre kobinding.js:

 ko.bindingHandlers.tinymce = {init: function (element, valueAccessor, allBindingsAccessor) {var tinymceOptions = {setup: function (editor) {editor.on ('change', function (event) {valueAccessor () (event.target. Obtenir du contenu ());}); }}; $ (élément) .text (valueAccessor () ()); setTimeout (fonction () {$ (élément) .tinymce (tinymceOptions);}, 0); ko.utils ['domNodeDisposal']. addDisposeCallback (element, function () {$ (element) .tinymce (). remove ();}); }, 'update': function (element, valueAccessor, allBindings) {var tinymce = $ (element) .tinymce (), value = valueAccessor () (); if (tinymce) {if (tinymce.getContent ()! == valeur) {tinymce.setContent (valeur); }}}};

Si nous réexécutons dans notre navigateur, nous verrons que tout fonctionne comme il se doit, au moment de la rédaction et si nous modifions le focus, nous verrons que dans notre zone de prévisualisation, nous avons le contenu tel qu'il devrait être :

AGRANDIR

Avec cela, nous avons pu créer un reliure avancée et personnalisé qui nous aide à comprendre tout ce que nous pouvons réaliser avec un peu d'ingéniosité et tous les outils que cela nous donne Assommer. Des cas comme celui de TinyMCE Ils sont très courants, car ce type de plug-in est très populaire dans le développement d'applications Web, nous devrons donc peut-être appliquer une solution similaire à un moment donné du développement de notre projet.

Avec cela, nous avons terminé ce tutoriel, car nous voyons qu'il n'est pas nécessaire de se limiter aux fonctions et méthodes préétablies dans AssommerBien sûr, il existe des fonctionnalités encore très avancées pour ce niveau de connaissance mais qui avec de la pratique et de la recherche peuvent être atteintes. La chose intéressante est que tout cela peut être réalisé avec une petite lecture de la documentation officielle de Assommer et aussi chercher des exemples de cas qui nous aident à illustrer et à nous situer dans leur contexte.