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. Cela a la priorité 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.

Se o valor fornecido for algo diferente de um número ou uma string, o texto exibido será equivalente a yourParameter.toString().

Como essa ligação define seu valor de texto usando um nó de texto, é seguro definir qualquer valor de string sem arriscar HTML ou injeção de script.

HTML

O binding html é usado para inserir conteúdo HTML dinâmico em elementos da sua interface do usuário. Ele permite que seja atualizado o conteúdo de um elemento com o HTML gerado a partir de um observable ou de uma expressão da sua ViewModel.

<div>
  <p data-bind="html: dynamicHtml">Este parágrafo exibirá o conteúdo HTML do observable 'dynamicHtml'.</p>
</div>

O KnockoutJs limpa o conteúdo anterior e, em seguida, define o conteúdo do elemento para o valor do parâmetro usando a função html do jQuery ou analisando a string em nós HTML e anexando cada nó como um filho do elemento, se o jQuery não estiver disponível.

Se este parâmetro for um observable, a ligação atualizará o conteúdo do elemento sempre que o valor for alterado. Se o parâmetro não for observable, ele definirá o conteúdo do elemento apenas uma vez e não o atualizará novamente posteriormente.

Se o valor fornecido for algo diferente de um número ou uma string, o texto exibido será equivalente a yourParameter.toString().

Class

O binding class é usado para controlar as classes CSS aplicadas a elementos HTML com base no valor de um observable ou de uma expressão da sua ViewModel. Isso permite que seja alterado dinamicamente as classes CSS de um elemento com base em diferentes condições ou estados do seu aplicativo. Uma classe não é um nome de identificador legal, o correto para atribuir uma classe a um elemento HTML é colocar o nome do identificador entre aspas para que se torne uma string literal.

<div>
  <p data-bind="class: { 'active': isActive, 'highlight': shouldHighlight }">Este parágrafo terá as classes 'active' e 'highlight' com base nos valores dos observables 'isActive' e 'shouldHighlight'.</p>
    <p data-bind="class: { 'error': hasError(), 'warning': hasWarning() }">Este parágrafo terá a classe 'error' se hasError() for true, e terá a classe 'warning' se hasWarning() for true.</p>
    <p data-bind="class: 'static-class dynamic-class'">Este parágrafo terá a classe 'static-class' e 'dynamic-class' aplicadas a ele.</p>
</div>

O valor do parâmetro deve ser uma string que corresponda à classe(s) CSS que seria desejado adicionar ao elemento. Se o parâmetro fizer referência a um observable, a associação atualizará as classes sempre que o valor for alterado, removendo quaisquer classes adicionadas anteriormente e adicionando a classe ou classes do novo valor.

CSS

O binding css é usado para aplicar estilos CSS dinamicamente a elementos HTML com base no valor de um observable ou de uma expressão da sua ViewModel. Isso permite que seja alterado os estilos visuais de um elemento com base em diferentes condições ou estados do seu aplicativo. É possível definir várias classes CSS com base na mesma condição colocando os nomes entre aspas.

<div>
  <p data-bind="css: { 'active': isActive, 'highlight': shouldHighlight }">Este parágrafo terá os estilos CSS 'active' e 'highlight' com base nos valores dos observables 'isActive' e 'shouldHighlight'.</p>
    <p data-bind="css: { 'error': hasError(), 'warning': hasWarning() }">Este parágrafo terá o estilo 'error' se hasError() for true, e terá o estilo 'warning' se hasWarning() for true.</p>
    <p data-bind="css: 'static-style dynamic-style'">Este parágrafo terá o estilo 'static-style' e 'dynamic-style' aplicados a ele.</p>
</div>

Deve ser passado um objeto JavaScript no qual os nomes das propriedades são suas classes CSS e seus valores são avaliados como true ou false, dependendo se a classe deve ser aplicada no momento.

Se o parâmetro fizer referência a um valor observable, a ligação adicionará ou removerá a classe CSS sempre que o observable for alterado. Se o parâmetro não fizer referência a um observable, ele adicionará ou removerá a classe apenas uma vez e não o fará novamente posteriormente.

Style

O binding style é usado para aplicar estilos CSS inline a elementos HTML com base no valor de um observable ou de uma expressão da sua ViewModel. Isso permite que seja alterado os estilos visuais de um elemento diretamente em linha, com base em diferentes condições ou estados do seu aplicativo.

<div>
  <p data-bind="style: { 'color': textColor(), 'font-size': fontSize() + 'px' }">Este parágrafo terá cores e tamanhos de fonte diferentes com base nos valores dos observables 'textColor' e 'fontSize'.</p>
    <p data-bind="style: { 'color': textColor(), 'font-size': fontSize() + 'px' }">Este parágrafo terá cores e tamanhos de fonte diferentes com base nos valores dos observables 'textColor' e 'fontSize'.</p>
    <p data-bind="style: { 'width': width() + 'px', 'height': height() + 'px' }">Este parágrafo terá largura e altura diferentes com base nos valores dos observables 'width' e 'height'.</p>
    <p data-bind="style: 'color: red; background-color: ' + bgColor()">Este parágrafo terá cor de texto vermelha e cor de fundo dinâmica com base no valor do observable 'bgColor'.</p>
</div>

Deve ser passado um objeto JavaScript no qual os nomes das propriedades correspondem aos nomes dos estilos e os valores correspondem aos valores dos estilos que é desejado aplicar.

Se o parâmetro fizer referência a um observable, a ligação atualizará os estilos sempre que o observable for alterado. Se o parâmetro não fizer referência a um observable, ele definirá os estilos apenas uma vez e não os atualizará posteriormente.

Se é desejado aplicar um estilo cujo nome não é um identificador JavaScript legal (porque contém um hífen ou algo do genêro), é possível colocá-lo entre aspas ou usar o nome com o estilo camelCase.

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

Se aplicar um valor numérico simples a um estilo que requer uma unidade, o KnockoutJs acrescentará px ao valor antes de definir o estilo.

Attr

O binding attr é usado para definir ou atualizar atributos HTML em elementos com base no valor de um observable ou de uma expressão da ViewModel. Isso permite que seja alterado os atributos de elementos HTML de forma dinâmica, com base em diferentes condições ou estados do seu aplicativo.

<div>
  <input type="text" data-bind="attr: { 'disabled': isDisabled(), 'placeholder': inputPlaceholder }" />
    <img data-bind="attr: { 'src': 'images/' + imageName(), 'alt': 'Imagem ' + imageIndex() }" />
    <a data-bind="attr: { 'href': 'https://www.exemplo.com/' + pageLink() }">Clique aqui</a>
    <div data-bind="attr: { 'data-something': someValue }">...</div>
</div>

Deve ser passado um objeto JavaScript no qual os nomes das propriedades correspondem aos nomes dos atributos e os valores correspondem aos valores dos atributos que seja desejado aplicar.

Se o parâmetro fizer referência a um observable, a ligação atualizará o atributo sempre que o observable for alterado. Se o parâmetro não fizer referência a um observable, ele definirá o atributo apenas uma vez e não o atualizará posteriormente.

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!