KnockoutJS - Liaisons déclaratives

La liaison déclarative dans KnockoutJS fournit un moyen puissant de connecter des données à l'interface utilisateur.

Il est important de comprendre la relation entre les liaisons et les observables. Techniquement, ces deux sont différents. Vous pouvez utiliser un objet JavaScript normal car ViewModel et KnockoutJS peuvent traiter correctement la liaison de View.

Sans Observable, la propriété de l'interface utilisateur ne sera traitée que pour la première fois. Dans ce cas, il ne peut pas se mettre à jour automatiquement en fonction de la mise à jour des données sous-jacentes. Pour ce faire, les liaisons doivent être référencées aux propriétés observables.

Syntaxe de liaison

La reliure se compose de 2 éléments, la reliure name et value. Voici un exemple simple -

Today is : <span data-bind = "text: whatDay"></span>

Ici, le texte est le nom de la liaison et whatDay est la valeur de la liaison. Vous pouvez avoir plusieurs liaisons séparées par une virgule, comme indiqué dans la syntaxe suivante.

Your name: <input data-bind = "value: yourName, valueUpdate: 'afterkeydown'" />

Ici, la valeur est mise à jour après avoir appuyé sur chaque touche.

Valeurs de liaison

La valeur de liaison peut être un single value, literal, une variable ou peut être un JavaScriptexpression. Si la liaison fait référence à une expression ou une référence non valide, KO produira une erreur et arrêtera le traitement de la liaison.

Voici quelques exemples de liaisons.

<!-- simple text binding -->
<p>Enter employee name: <input   -bind = 'value: empName' /></p>

<!-- click binding, call a specific function -->
<button data-bind="click: sortEmpArray">Sort Array</button>

<!-- options binding -->
<select multiple = "true" size = "8" data-bind = "options: empArray , 
   selectedOptions: chosenItem"> </select>

Notez les points suivants -

Les espaces ne font aucune différence.
À partir de KO 3.0, vous pouvez ignorer la valeur de liaison qui donnera à la liaison une valeur non définie.

Contexte contraignant

Les données utilisées dans les liaisons actuelles peuvent être référencées par un objet. Cet objet s'appellebinding context.

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

Sr.No.	Types de contexte de liaison et description
1	$root Cela fait toujours référence au ViewModel de niveau supérieur. Cela permet d'accéder aux méthodes de niveau supérieur pour manipuler ViewModel. Il s'agit généralement de l'objet, qui est passé à ko.applyBindings.
2	$data Cette propriété ressemble beaucoup thismot-clé dans l'objet Javascript. La propriété $ data dans un contexte de liaison fait référence à l'objet ViewModel pour le contexte actuel.
3	$index Cette propriété contient l'index d'un élément actuel d'un tableau dans une boucle foreach. La valeur de $ index changera automatiquement au fur et à mesure que le tableau Observable sous-jacent est mis à jour. Evidemment, ce contexte n'est disponible que pourforeach fixations.
4	$parent Cette propriété fait référence à l'objet ViewModel parent. Cela est utile lorsque vous souhaitez accéder aux propriétés externes de ViewModel depuis l'intérieur d'une boucle imbriquée.
5	$parentContext L'objet de contexte qui est lié au niveau parent est appelé $parentContext. C'est différent de$parent. $ parent fait référence aux données. Alors que $ parentContext fait référence au contexte de liaison. Par exemple, vous devrez peut-être accéder à l'index de l'élément foreach externe à partir d'un contexte interne.
6	$rawdata Ce contexte contient la valeur brute de ViewModel dans la situation actuelle. Cela ressemble à $ data mais la différence est que si ViewModel est encapsulé dans Observable, alors $ data est simplement déballé. ViewModel et $ rawdata deviennent des données observables réelles.
sept	$component Ce contexte est utilisé pour faire référence à ViewModel de ce composant, lorsque vous êtes à l'intérieur d'un composant particulier. Par exemple, vous voudrez peut-être accéder à certaines propriétés de ViewModel au lieu des données actuelles dans la section modèle du composant.
8	$componentTemplateNodes Cela représente un tableau de nœuds DOM transmis à ce composant particulier lorsque vous vous trouvez dans un modèle de composant spécifique.

Les termes suivants sont également disponibles en version contraignante mais ne sont pas en fait un contexte contraignant.

$context - Ce n'est rien d'autre qu'un objet de contexte de liaison existant.
$element - Cet objet fait référence à un élément du DOM dans la liaison actuelle.

Travailler avec du texte et des apparences

Voici une liste des types de reliure fournis par KO pour gérer le texte et les apparences visuelles.

Sr.No.	Type de reliure et utilisation
1	visible: <binding-condition> Pour afficher ou masquer l'élément HTML DOM selon certaines conditions.
2	texte: <binding-value> Pour définir le contenu d'un élément HTML DOM.
3	html: <valeur de liaison> Pour définir le contenu du balisage HTML d'un élément DOM.
4	css: <objet de liaison> Pour appliquer des classes CSS à un élément.
5	style: <binding-object> Pour définir l'attribut de style en ligne d'un élément.
6	attr: <binding-object> Pour ajouter des attributs à un élément de manière dynamique.

Utilisation des liaisons de flux de contrôle

Voici une liste des types de liaison de flux de contrôle fournis par KO.

Sr.No.	Type de reliure et utilisation
1	foreach: <binding-array> Dans cette liaison, chaque élément de tableau est référencé dans le balisage HTML dans une boucle.
2	si: <binding-condition> Si la condition est vraie, le balisage HTML donné sera traité. Sinon, il sera supprimé du DOM.
3	ifnot: <condition- de liaison> Négation de If. Si la condition est vraie, le balisage HTML donné sera traité. Sinon, il sera supprimé du DOM.
4	avec: <binding-object> Cette liaison est utilisée pour lier les éléments enfants d'un objet dans le contexte de l'objet spécifié.
5	composant: <component-name> OU composant: <component-object> Cette liaison est utilisée pour insérer un composant dans des éléments DOM et passer les paramètres éventuellement.

Utilisation des liaisons de champs de formulaire

Voici la liste des types de liaisons de champs de formulaire fournis par KO.

Sr.No.	Type de reliure et utilisation
1	cliquez sur: <function-function> Cette liaison est utilisée pour appeler une fonction JavaScript associée à un élément DOM en fonction d'un clic.
2	événement: <événement DOM: fonction-gestionnaire> Cette liaison est utilisée pour écouter les événements DOM spécifiés et appeler les fonctions de gestionnaire associées basées sur eux.
3	soumettre: <fonction-de liaison> Cette liaison est utilisée pour appeler une fonction JavaScript lorsque l'élément DOM associé est soumis.
4	activer: <valeur de liaison> Cette liaison est utilisée pour activer certains éléments DOM en fonction d'une condition spécifiée.
5	désactiver: <binding-value> Cette liaison désactive l'élément DOM associé lorsque le paramètre prend la valeur true.
6	valeur: <binding-value> Cette liaison est utilisée pour lier la valeur de l'élément DOM respectif dans la propriété ViewModel.
sept	textInput: <valeur de liaison> Cette liaison est utilisée pour créer une liaison bidirectionnelle entre la zone de texte ou la zone de texte et la propriété ViewModel.
8	hasFocus: <valeur de liaison> Cette liaison est utilisée pour définir manuellement le focus d'un élément HTML DOM via une propriété ViewModel.
9	vérifié: <binding-value> Cette liaison est utilisée pour créer un lien entre un élément de formulaire vérifiable et la propriété ViewModel.
dix	options: <binding-array> Cette liaison est utilisée pour définir les options d'un élément de sélection.
11	selectedOptions: <binding-array> Cette liaison est utilisée pour travailler avec des éléments qui sont actuellement sélectionnés dans le contrôle de formulaire de sélection de listes multiples.
12	uniqueName: <valeur de liaison> Cette liaison est utilisée pour générer un nom unique pour un élément DOM.

↰ Previous page Next page ↱