Comment fonctionnent les liaisons de flux de contrôle dans 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

• La syntaxe de liaison de données
• Contexte contraignant
• La liaison "foreach"
• Les liaisons "if" et "ifnot"
• Les liaisons "with" et "using"
• La reliure "let"

---

Reliures

Dans KnockoutJs, les liaisons sont le moyen de connecter la logique du ViewModel (les données et la logique métier) avec la View (HTML). Bref, c'est grâce aux bindings que l'interface utilisateur reflète automatiquement les modifications de vos données, sans avoir besoin de manipuler directement le DOM.

Les liaisons dans KnockoutJs fonctionnent via l'attribut data-bind sur les éléments HTML. Cet attribut est l'endroit où vous spécifiez la liaison que vous souhaitez utiliser et les valeurs associées.

Flux de contrôle

pour chaque

La binding foreach est utilisée pour créer des répétitions dans les éléments HTML, générant des copies du même élément pour chaque élément d'une collection (comme un tableau ou un tableau observable ) dans votre modèle de vue. Cela vous permet de créer facilement des listes ou des tableaux croisés dynamiques qui affichent les données de votre modèle.

Lorsque le contenu du modèle array est modifié (en ajoutant, déplaçant ou supprimant ses entrées), la binding de foreach utilise un algorithme efficace pour trouver ce qui a changé, afin que vous puissiez mettre à jour le DOM en fonction du tableau. Cela signifie qu'il peut gérer des combinaisons arbitraires de changements simulés.

• Lorsque quelque chose est ajouté au tableau, foreach affichera de nouvelles copies de votre modèle et les insérera dans le DOM existant ;
• Lorsque quelque chose dans le tableau est supprimé, foreach supprimera simplement les éléments DOM correspondants ;
• Lors de la réorganisation de quelque chose dans le tableau (en conservant les mêmes instances d'objet), foreach déplacera normalement simplement les éléments DOM correspondants vers leur nouvelle position.

<div>
  <ul data-bind="foreach: items">
    <li data-bind="text: $data"></li>
  </ul>

  <ul data-bind="foreach: getItems()">
    <li>
        <span data-bind="text: name"></span> - <span data-bind="text: age"></span>
    </li>
  </ul>

  <ul data-bind="foreach: { data: people, as: 'person' }"></ul>
</div>

Dans ce cas, la variable $data fait référence à l'élément en cours de traitement dans la boucle. Cela vous permet d'accéder aux propriétés ou aux valeurs de cet élément dans la boucle.

La directive as vous permet de définir un nom personnalisé pour la variable qui représente l'élément actuel dans le cycle d'itération foreach. Cela peut rendre le code plus lisible et plus significatif.

Parfois, il est nécessaire qu'un élément du tableau ne soit pas supprimé, mais plutôt masqué, sans pour autant perdre la trace de son existence. C'est ce qu'on appelle la suppression non destructive. Si vous devez masquer les entrées détruites, définissez l'option includeDestroyed sur false.

<div>
  <ul data-bind="foreach: items">
    <li data-bind="text: $data"></li>
  </ul>

  <ul data-bind="foreach: getItems()">
    <li>
        <span data-bind="text: name"></span> - <span data-bind="text: age"></span>
    </li>
  </ul>

  <ul data-bind="foreach: { data: people, as: 'person' }"></ul>
</div>

Si vous devez exécuter une logique personnalisée supplémentaire sur les éléments DOM générés, vous pouvez utiliser l'un des rappels suivants :

• afterRender : est invoqué à chaque fois que le bloc foreach est dupliqué et inséré dans le document, à la fois lorsque foreach est initialisé pour la première fois et lorsque de nouvelles entrées sont ajoutées ultérieurement au tableau;
associé
• afterAdd : est comme afterRender, sauf qu'il est invoqué uniquement lorsque de nouvelles entrées sont ajoutées au tableau (et non lorsque foreach parcourt pour la première fois le contenu initial du tableau);
• beforeRemove : est invoqué lorsqu'un élément du tableau est supprimé, mais avant que les nœuds DOM correspondants ne soient supprimés. Si un rappel beforeRemove est spécifié, vous devrez supprimer les nœuds DOM manuellement, c'est-à-dire que KnockoutJs ne peut pas savoir quand il sera autorisé à supprimer physiquement les nœuds DOM ;
• beforeMove : est invoqué lorsqu'un élément du tableau a changé de position dans le tableau, mais avant que les nœuds DOM correspondants n'aient été déplacés. Notez que beforeMove s'applique à tous les éléments du tableau dont les index ont changé, donc si un nouvel élément est inséré au début d'un tableau, le rappel (si spécifié) sera déclenché pour tous les autres éléments, comme son index la position a augmenté d’un. Vous pouvez utiliser beforeMove pour stocker les coordonnées d'écran d'origine des éléments concernés afin de pouvoir animer leurs mouvements dans le rappel afterMove ;
• afterMove : est invoqué après qu'un élément du tableau a changé de position dans le tableau et après que foreach a mis à jour le DOM pour qu'il corresponde. Notez qu'afterMove s'applique à tous les éléments du tableau dont les index ont changé, donc si un nouvel élément est inséré au début d'un tableau, le rappel (si spécifié) sera déclenché pour tous les autres éléments puisque leur position d'index a augmenté de un.

si et sinon

La liaison de if provoque l'apparition d'une section de balisage dans votre document (et l'application de ses attributs de liaison de données), uniquement si une expression spécifiée est évaluée à true (ou à une valeur true, telle qu'un objet non nul ou une chaîne non vide).

La

la liaison de ifnot fonctionne exactement comme la liaison if, sauf qu'elle inverse le résultat de toute expression qui lui est transmise.

if et ifnot jouent un rôle similaire aux liaisons vivsibles et cachées. La différence est que, avec visible, le balisage contenu reste toujours dans le DOM et sa liaison de données est toujours appliquée – la liaison visible utilise simplement CSS pour basculer la visibilité de l'élément conteneur. Cependant, le lien if ajoute ou supprime physiquement le balisage contenu dans votre DOM et n'applique les liens aux descendants que si l'expression est vraie. Si l'expression implique une valeur observable, l'expression sera réévaluée chaque fois que sa valeur change.

<div>
  <ul data-bind="foreach: items">
    <li data-bind="text: $data"></li>
  </ul>

  <ul data-bind="foreach: getItems()">
    <li>
        <span data-bind="text: name"></span> - <span data-bind="text: age"></span>
    </li>
  </ul>

  <ul data-bind="foreach: { data: people, as: 'person' }"></ul>
</div>

avec et en utilisant

Les liaisons avec et using créent un nouveau contexte de liaison, de sorte que les éléments descendants soient liés dans le contexte d'un objet spécifié.

binding with ajoutera ou supprimera dynamiquement des éléments descendants selon que la valeur associée est falsy.

L'option permet de définir un alias pour le nouvel objet contextuel. Bien qu'il soit possible de faire référence à l'objet en utilisant la variable contextuelle $data.

<div data-bind='foreach: { data: myArray, includeDestroyed: false }'>
    ...
</div>

La liaison using a été introduite dans KnockoutJs 3.5 en remplacement de with lorsque le rendu des éléments descendants n'est pas souhaité. Étant donné que l'utilisation réévalue les connexions descendantes plutôt que de les restituer, chaque connexion descendante inclura une dépendance supplémentaire sur le contexte d'utilisation.

laisser

Le let binding vous permet de définir des propriétés de contexte de liaison personnalisées que vous pouvez référencer dans les liaisons de tous les éléments descendants.

<div data-bind="if: exibirMensagem">
    <p>Esta mensagem será exibida se 'exibirMensagem' for verdadeiro.</p>
</div>

<div data-bind="ifnot: exibirMensagem">
    <p>Esta mensagem será exibida se 'exibirMensagem' for falso.</p>
</div>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!