Comment fonctionnent les liaisons de texte et d'apparence 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
• Les liaisons "visibles" et "cachées"
• La reliure "texte"
• La liaison "html"
• Les liaisons "class" et "css"
• La reliure "style"
• La liaison "attr"

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.

Contrôler le texte et l'apparence

Visible

La binding visible est utilisée pour contrôler la visibilité des éléments HTML en fonction de la valeur d'un observable dans son ViewModel. Il vous permet d'afficher ou de masquer des éléments en fonction d'une condition spécifique définie dans votre ViewModel.

<div>
  <p data-bind="visible: isContentVisible">Este parágrafo está visível se isContentVisible for true.</p>
</div>

Lorsque la condition est une valeur similaire à false (false, 0, null ou indéfini), la liaison visible définit le style sur none, ce qui entraîne son masquage. Ceci est prioritaire sur tout style d'affichage que vous pouvez définir à l'aide de CSS.

Caché

binding caché est utilisé pour masquer les éléments HTML en fonction de la valeur d'un observable de votre ViewModel. Contrairement à la liaison *visible*, qui contrôle la visibilité des éléments, la liaison *hidden* masque les éléments de l'interface utilisateur lorsque la condition spécifiée est remplie.

<div>
  <p data-bind="hidden: isContentHidden">Este parágrafo está oculto se isContentHidden for true.</p>
</div>

Texte

Le texte binding est utilisé pour mettre à jour le contenu des éléments HTML avec la valeur d'un observable à partir de son ViewModel. Il permet d'insérer le texte d'un observable directement dans l'élément HTML, garantissant que tout changement dans la valeur de l'observable est automatiquement reflété dans le texte affiché.

<div>
  <p data-bind="text: message">Este parágrafo exibirá o conteúdo do observable 'message'.</p>
    <p data-bind="text: 'Total: $' + totalAmount() + ' USD'">Este parágrafo exibirá o total formatado com base no valor do observable 'totalAmount'.</p>
    <p data-bind="text: 'Olá, ' + userName()">Este parágrafo saudará o usuário com base no valor do observable 'userName'.</p>
</div>

Si ce paramètre est une valeur observable, la liaison mettra à jour le texte de l'élément chaque fois que la valeur change. Si le paramètre n'est pas observable, il définira le texte de l'élément une seule fois et ne le mettra pas à jour ultérieurement.

Si la valeur fournie est autre chose qu'un nombre ou une chaîne, le texte affiché sera équivalent à yourParameter.toString().

Étant donné que cette liaison définit sa valeur de texte à l'aide d'un nœud de texte, il est sûr de définir n'importe quelle valeur de chaîne sans risquer l'injection de HTML ou de script.

HTML

binding html est utilisé pour insérer du contenu HTML dynamique dans vos éléments d'interface utilisateur. Il permet de mettre à jour le contenu d'un élément avec le HTML généré à partir d'un observable ou une expression de son ViewModel.

<div>
  <p data-bind="visible: isContentVisible">Este parágrafo está visível se isContentVisible for true.</p>
</div>

KnockoutJs efface le contenu précédent, puis définit le contenu de l'élément sur la valeur du paramètre à l'aide de la fonction HTML de jQuery ou en analysant la chaîne en nœuds HTML et en ajoutant chaque nœud en tant qu'enfant de l'élément, si jQuery ne l'est pas. disponible.

Si ce paramètre est un observable, la liaison mettra à jour le contenu de l'élément chaque fois que la valeur change. Si le paramètre n'est pas observable, il définira le contenu de l'élément une seule fois et ne le mettra plus à jour ultérieurement.

Si la valeur fournie est autre chose qu'un nombre ou une chaîne, le texte affiché sera équivalent à yourParameter.toString().

Classe

La classe binding est utilisée pour contrôler les classes CSS appliquées aux éléments HTML en fonction de la valeur d'un observable ou d'une expression de son ViewModel. Cela vous permet de modifier dynamiquement les classes CSS d'un élément en fonction de différentes conditions ou états de votre application. Une classe n'est pas un nom d'identifiant légal, la façon correcte d'attribuer une classe à un élément HTML est de mettre le nom de l'identifiant entre guillemets afin qu'il devienne une chaîne littérale.

<div>
  <p data-bind="hidden: isContentHidden">Este parágrafo está oculto se isContentHidden for true.</p>
</div>

La valeur du paramètre doit être une chaîne qui correspond à la ou aux classes CSS que vous souhaitez ajouter à l'élément. Si le paramètre fait référence à un observable, la liaison met à jour les classes chaque fois que la valeur change, supprimant toutes les classes précédemment ajoutées et ajoutant la ou les classes de la nouvelle valeur.

CSS

binding css est utilisé pour appliquer dynamiquement des styles CSS aux éléments HTML en fonction de la valeur d'un observable ou d'une expression de son ViewModel. Cela vous permet de modifier les styles visuels d'un élément en fonction de différentes conditions ou états de votre application. Vous pouvez définir plusieurs classes CSS basées sur la même condition en mettant les noms entre guillemets.

<div>
  <p data-bind="text: message">Este parágrafo exibirá o conteúdo do observable 'message'.</p>
    <p data-bind="text: 'Total: $' + totalAmount() + ' USD'">Este parágrafo exibirá o total formatado com base no valor do observable 'totalAmount'.</p>
    <p data-bind="text: 'Olá, ' + userName()">Este parágrafo saudará o usuário com base no valor do observable 'userName'.</p>
</div>

Un objet JavaScript doit être transmis dans lequel les noms de propriétés sont vos classes CSS et leurs valeurs sont évaluées à vrai ou faux selon que la classe doit être appliquée à ce moment-là.

Si le paramètre fait référence à une valeur observable, la liaison ajoutera ou supprimera la classe CSS chaque fois que l'observable change. Si le paramètre ne fait pas référence à un observable, il ajoutera ou supprimera la classe une seule fois et ne le fera plus plus tard.

style

Le style binding est utilisé pour appliquer des styles CSS en ligne aux éléments HTML en fonction de la valeur d'un observable ou d'une expression de son ViewModel. Cela vous permet de modifier les styles visuels d'un élément directement en ligne, en fonction de différentes conditions ou états de votre application.

<div>
  <p data-bind="visible: isContentVisible">Este parágrafo está visível se isContentVisible for true.</p>
</div>

Il faut passer un objet JavaScript dans lequel les noms de propriétés correspondent aux noms de styles et les valeurs correspondent aux valeurs des styles que vous souhaitez appliquer.

Si le paramètre fait référence à un observable, la liaison mettra à jour les styles chaque fois que le observable change. Si le paramètre ne fait pas référence à un observable, il ne définira les styles qu'une seule fois et ne les mettra pas à jour ultérieurement.

Si vous souhaitez appliquer un style dont le nom n'est pas un identifiant JavaScript légal (car il contient un trait d'union ou quelque chose comme ça), vous pouvez le mettre entre guillemets ou utiliser le nom avec le camelCase style

• { 'font-weight' : someValue }
• { fontWeight : someValue }

Si vous appliquez une valeur numérique simple à un style qui nécessite une unité, KnockoutJs ajoutera px à la valeur avant de définir le style.

Attr.

L'attr binding est utilisé pour définir ou mettre à jour les attributs HTML sur les éléments en fonction de la valeur d'un observable ou d'une expression ViewModel. Cela vous permet de modifier dynamiquement les attributs des éléments HTML, en fonction de différentes conditions ou états de votre application.

<div>
  <p data-bind="hidden: isContentHidden">Este parágrafo está oculto se isContentHidden for true.</p>
</div>

Il faut passer un objet JavaScript dans lequel les noms de propriétés correspondent aux noms d'attributs et les valeurs correspondent aux valeurs des attributs que vous souhaitez appliquer.

Si le paramètre fait référence à un observable, la liaison mettra à jour l'attribut chaque fois que le observable change. Si le paramètre ne fait pas référence à un observable, il ne définit l'attribut qu'une seule fois et ne le met pas à jour ultérieurement.

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!