Comment fonctionnent les liaisons 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

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.

L'attribut data-bind n'est pas natif du HTML, bien qu'il soit parfaitement acceptable (il est strictement compatible avec HTML 5 et ne pose pas de problème avec HTML 4. Mais comme le navigateur ne reconnaît pas cet attribut par défaut, il vous faut pour activer Knockout pour qu'il prenne effet.

Syntaxe de liaison

Le système de liaison déclarative de KnockoutJs fournit un moyen concis et puissant de lier des données à l'interface utilisateur. Il est généralement facile et évident de se lier à des propriétés de données simples ou d'utiliser une liaison unique. Pour les liaisons plus complexes, cela permet de mieux comprendre le comportement et la syntaxe du système de liaison KnockoutJs.

Today's message is: <span data-bind="text: myMessage"></span>

<!-- related bindings: valueUpdate is a parameter for value -->
Your value: <input data-bind="value: someValue, valueUpdate: 'afterkeydown'" />
 
<!-- unrelated bindings -->
Cellphone: <input data-bind="value: cellphoneNumber, enable: hasCellphone" />

Un appel se compose de deux éléments, le nom et la valeur de l'appel, séparés par deux points. Un élément peut inclure plusieurs liens (liés ou non), chaque lien étant séparé par une virgule. Les données utilisées dans les liaisons actuelles peuvent être référencées par un objet. Cet objet est appelé contexte de liaison (contexte de liaison).

La valeur de liaison peut être une valeur unique, une variable ou un littéral, ou presque n'importe quelle expression JavaScript valide.

Les liens peuvent inclure n'importe quelle quantité d'espaces (espaces, tabulations et nouvelles lignes), vous pouvez donc les utiliser pour organiser vos liens comme vous le souhaitez.

Les liens peuvent inclure des commentaires de style JavaScript (//... et /*...*/). Par exemple :

Si une liaison est spécifiée sans valeur, KnockoutJs donnera à la liaison la valeur non définie.

La hiérarchie de contexte est automatiquement créée et gérée par KnockoutJS. Ce qui suit répertorie les différents types de contextes de liaison fournis par KO.

Variável de Contexto	Descrição
$root	Esta propriedade sempre se refere ao ViewModel de nível superior. Isso torna possível acessar métodos de nível superior para manipular ViewModel. Geralmente esse é o objeto passado para ko.applyBindings.
$data	Esta propriedade é muito parecida com a palavra-chave this do Javascript. A propriedade $data em um contexto de ligação refere-se ao objeto ViewModel para o contexto atual.
$index	Esta propriedade contém o índice de um item atual de um array dentro de um loop foreach. O valor de $index mudará automaticamente conforme e quando a matriz Observable subjacente for atualizada. Obviamente, este contexto está disponível apenas para ligações foreach.
$parent	Esta propriedade refere-se ao objeto ViewModel pai. Isso é útil quando se deseja acessar propriedades externas do ViewModel de dentro de um loop aninhado.
$parentContext	Esta propriedade é diferente da $parent, pois a $parent refere-se a dados. Considerando que $parentContext refere-se ao contexto de ligação.
$rawdata	Este contexto contém o valor bruto do ViewModel na situação atual. Esta propriedade se assemelha a $data, mas a diferença é que, se o ViewModel for agrupado em Observable, então $data será apenas desembrulhado. O ViewModel e $rawdata tornam-se dados observáveis reais.
$component	Este contexto é usado para se referir ao ViewModel daquele componente, quando está dentro de um determinado componente.
$componentTemplateNodes	É uma representação de uma matriz de nós DOM passados para esse componente específico quando se está dentro de um modelo de componente específico.

Le nom de la connexion doit généralement correspondre à une connexion enregistrée (intégrée ou personnalisée) ou être un paramètre pour une autre connexion. Si le nom ne correspond à aucun d'entre eux, KnockoutJs l'ignorera (sans aucune erreur ni avertissement). Donc si une connexion ne fonctionne pas, vérifiez d'abord si le nom est correct.

La valeur de liaison peut être une valeur unique, une variable ou un littéral ou presque n'importe quelle expression JavaScript valide. Voici des exemples de différentes valeurs de connexion :

Today's message is: <span data-bind="text: myMessage"></span>

<!-- related bindings: valueUpdate is a parameter for value -->
Your value: <input data-bind="value: someValue, valueUpdate: 'afterkeydown'" />
 
<!-- unrelated bindings -->
Cellphone: <input data-bind="value: cellphoneNumber, enable: hasCellphone" />

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!