KnockoutJS - Liaison de composants

Cette liaison est utilisée pour insérer un composant dans des éléments DOM et passer les paramètres éventuellement. Cette liaison peut être réalisée des deux manières suivantes -

Syntaxe abrégée
Syntaxe complète

Syntaxe abrégée

Dans cette approche, seul le nom du composant est spécifié sans spécifier de paramètres.

Syntax

<div data-bind = 'component: "component-name"'></div>

La valeur de paramètre transmise peut être une observable. Par conséquent, chaque fois que l'observable change, l'ancienne instance de composant sera supprimée et la nouvelle sera créée en fonction de la valeur de paramètre actualisée.

Syntaxe complète

Cette approche accepte le paramètre sous la forme d'un objet.

Syntax

<div data-bind = 'component: {
   name: "component-name",
   params: { param1: value1, param2:value2 ...}
}'></div>

L'objet est composé des deux éléments suivants -

name- Il s'agit du nom du composant à insérer. Comme mentionné précédemment, cela peut être un observable.
params- Il s'agit d'un objet à transmettre au composant. La plupart du temps, ce sera un objet clé-valeur comprenant plusieurs paramètres. C'est la plupart du temps reçu par le constructeur d'un ViewModel.

Workflow de traitement des composants

Le diagramme suivant explique le processus qui a lieu lorsqu'un composant est injecté par liaison de composant.

Regardons le processus en détail -

Receive ViewModel factory and template from component loaders- Le ViewModel et le modèle enregistrés sont demandés et reçus par le chargeur par défaut. Par défaut, il s'agit d'un processus asynchrone.

Clone the component template- Dans cette étape, le clonage du modèle de composant et son insertion dans l'élément DOM ont lieu. Le contenu existant, le cas échéant, sera supprimé.

Instantiate a ViewModel if any- Dans cette étape, ViewModel est instancié. Si le ViewModel est fourni en tant que fonction de constructeur, KO appelle.

new ViewModelName(params)

Si le ViewModel est fourni au format de fonction d'usine, c'est-à-dire createViewModel, KO appelle.

createViewModel(params, yourcomponentInfo)

Ici, yourcomponentInfo.element est l'élément où le modèle est inséré.

Bind ViewModel to view- Dans cette étape, ViewModel est lié à View. Si le ViewModel n'est pas fourni, la liaison est effectuée avec les paramètres mentionnés dans la liaison de composant.

Now component is ready- A ce stade, le composant est prêt et en état de fonctionnement. Le composant garde un œil sur les paramètres observables, le cas échéant, afin d'écrire les valeurs modifiées.

Dispose the ViewModel if the component is lost- La fonction de disposition de ViewModel est appelée, si la valeur du nom de liaison du composant est modifiée de manière observable ou si une liaison de flux de contrôle supprime le conteneur de l'élément DOM lui-même, qui était censé contenir la sortie du composant. L'élimination a lieu juste avant qu'un conteneur d'élément ne soit supprimé du DOM.

Example

Jetons un coup d'œil à l'exemple suivant qui illustre l'utilisation de la liaison de composants.

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Component binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>
   
   <body>
      <h4>Component binding without parameters</h4>
      <div data-bind = 'component: "calculate-sum"'></div>

      <h4>Component binding passing parameters</h4>
      <div data-bind = 'component: {
         name: "calculate-sum",
         params: { number1: 2, number2: 3 }
      }'></div>

      <script>
         ko.components.register('calculate-sum', {
            
            viewModel: function(params) {
               this.number1 = ko.observable(params && params.number1);
               this.number2 = ko.observable(params && params.number2);

               this.result = ko.computed(function() {
                  var sum = Number(this.number1()) + Number(this.number2());
                  if ( isNaN(sum) )
                  sum = 0;
                  return sum;
               },this);
            },
            
            template: 'Enter Number One: <input data-bind = "value: number1" /> <br> <br>'+
               ' Enter Number Two: <input data-bind = "value: number2" /> <br> <br>'+
               ' Sum  = <span data-bind = "text: result" />'
         });

         ko.applyBindings();
      </script>
      
   </body>
</html>

Output

Exécutons les étapes suivantes pour voir comment fonctionne le code ci-dessus -

Enregistrez le code ci-dessus dans component-bind.htm fichier.
Ouvrez ce fichier HTML dans un navigateur.
Entrez les nombres dans les deux zones de texte et observez que la somme est calculée.

Observations

Modèles de composants uniquement

Les composants peuvent être créés sans ViewModel. Le composant peut simplement comprendre un modèle illustré comme suit.

ko.components.register('my-component', {
   template: '<div data-bind = "text: productName"></div>'
});

Et DOM ressemblera à -

<div data-bind = 'component: {
   name: "my-component",
   params: { productName: someProduct.name }
}'></div>

Utilisation de la liaison de composants sans élément de conteneur DOM

Il peut y avoir une situation où il n'est pas possible d'insérer un composant dans un élément DOM. La liaison essentielle peut toujours être effectuée à l'aide d'une syntaxe sans conteneur basée sur les balises de commentaire présentées comme suit.

Les <! - ko -> et <! - / ko -> fonctionnent comme des marqueurs de début et de fin, ce qui en fait une syntaxe virtuelle et lie les données comme s'il s'agissait d'un vrai conteneur.

Gestion et élimination de la mémoire

La fonction d'élimination peut être ajoutée en option dans le cadre de ViewModel. Si cette fonction est incluse, elle sera appelée chaque fois que le composant est perdu ou que l'élément conteneur lui-même est supprimé. Il est recommandé d'utiliser la fonction dispose pour libérer les ressources occupées par des objets indésirables, qui ne sont pas récupérables par défaut. Voici quelques exemples -

La méthode setInterval continuera à s'exécuter jusqu'à ce qu'elle soit effacée explicitement. clearInterval (handle) est utilisé pour arrêter ce processus.
Les propriétés ko.computed doivent être supprimées explicitement. Sinon, ils pourraient continuer à recevoir des notifications de leurs observables sous-jacents. L'élimination manuelle peut être évitée en utilisant des fonctions purement calculées.
Assurez-vous d'utiliser la méthode dispose () sur l'abonnement, sinon il continue à déclencher les modifications jusqu'à ce qu'elles soient supprimées.
Les gestionnaires d'événements personnalisés créés sur des éléments DOM et créés à l'intérieur de createViewModel doivent être supprimés.

↰ Previous page