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

• KnockoutJs : Observables
• KnockoutJs : tableaux observables
• KnockoutJs : observables calculés
• KnockoutJs : observables calculés inscriptibles
• KnockoutJs : observables purement calculés
• KnockoutJs : observables calculés

---

Observables

KnockoutJs introduit le concept de observables, qui sont des propriétés qui peuvent être surveillées et automatiquement mises à jour lorsque leurs valeurs changent. Cette fonctionnalité permet à l'interface utilisateur de réagir dynamiquement aux changements dans les données Modèle.

Pour créer un observable dans KnockoutJs, vous pouvez utiliser la fonction ko.observable() et lui attribuer une valeur initiale. Pour accéder à la valeur actuelle d'un observable, vous pouvez la traiter comme une fonction. Pour simplement observer quelque chose sans valeur initiale, appelez simplement la propriété Observable sans paramètres.

let myObservable = ko.observable('Inicial');

console.log(myObservable()); // Irá imprimir 'Inicial'

myObservable('Novo valor');
console.log(myObservable()); // Irá imprimir 'Novo valor'

• ko.isObservable : renvoie vrai pour les observables, les tableaux d'observables et tous les observables calculés ;
• ko.isWritableObservable : renvoie vrai pour les observables, les tableaux observables et les inscriptibles observables calculés.

Abonnements

Les abonnements dans les observables sont des mécanismes qui vous permettent d'être averti chaque fois que la valeur d'un observable change. Ils sont essentiels pour suivre les changements dans les observables et réagir à ces changements, mettre à jour l'interface utilisateur ou prendre d'autres actions si nécessaire.

La méthode Subscribe() ***reçoit une fonction *callback qui sera exécutée à chaque fois que la valeur de l'observable est modifiée. La fonction callback reçoit en argument la nouvelle valeur de l'observable. Cette fonction accepte trois paramètres : callback est la fonction qui est appelée à chaque fois que la notification se produit, target (facultatif) définit la valeur de ceci dans la fonction callback et événement (facultatif ; la valeur par défaut est changement) est le nom de l'événement pour lequel recevoir une notification.

let myObservable = ko.observable('Inicial');

console.log(myObservable()); // Irá imprimir 'Inicial'

myObservable('Novo valor');
console.log(myObservable()); // Irá imprimir 'Novo valor'

1. change : Il s'agit de l'événement par défaut qui déclenche l'abonnement chaque fois que la valeur de l'observable change. C'est l'événement le plus courant et est utilisé lorsqu'aucun autre événement n'est explicitement spécifié ;
2. beforeChange : Cet événement est déclenché avant que la valeur de l'observable ne soit modifiée. La fonction callback recevra deux arguments : la valeur actuelle de l'observable et la (nouvelle) valeur proposée qui sera attribuée à l'observable. Cela vous permet d'effectuer des actions basées sur la valeur actuelle avant qu'elle ne soit modifiée ;
3. afterChange : Cet événement est déclenché après la modification de la valeur de l'observable. La fonction de rappel recevra deux arguments : la valeur précédente de l'observable (avant le changement) et la nouvelle valeur qui a été attribuée à l'observable. C'est utile lorsque vous devez réagir à un changement spécifique après qu'il se soit produit.
4. arrayChange : Cet événement est spécifique aux tableaux observables. Il est déclenché lorsqu'une modification est apportée à un tableau observable, comme l'ajout, la suppression ou le remplacement d'éléments dans le tableau. La fonction de rappel prend quatre arguments : les éléments concernés (ajouté, supprimé, statut et index).

Un autre point important est qu'il est possible de stocker l'abonnement dans une variable et, si nécessaire, d'annuler l'abonnement à l'aide de la méthode dispose(). Ceci est utile lorsque vous souhaitez désactiver temporairement ou définitivement la mise à jour de l'interface utilisateur en réponse à des modifications des observables.

let myObservable = ko.observable(0);

// Criando uma subscription no observable
myObservable.subscribe(function (newValue) {
  console.log('Novo valor do observable:', newValue);
}, scope, event);

Méthodes de détermination des types d'observables

1. isObservable() : Cette méthode est utilisée pour vérifier si une valeur est un observable. Il renvoie vrai si la valeur est un observable (observable, observableArray, calculé ou inscriptible calculé), et faux sinon.
2. isWritableObservable() : Cette méthode vérifie si une valeur est un observable inscriptible (observable en écriture). Il renvoie vrai si la valeur est un observable inscriptible et faux sinon ;
3. isComputed() : Cette méthode est utilisée pour vérifier si une valeur est un Observable calculé. Il renvoie vrai si la valeur est un Observable calculé et faux sinon ;
4. isPureComputed() : Cette méthode vérifie si une valeur est un Pure Computed Observable. Un Observable pur calculé est celui qui dépend uniquement d'autres observables purs et n'a pas de logique d'enregistrement interne. Il renvoie vrai si la valeur est un Pure Computed Observable et faux sinon.

---

Tableaux observables

Les

Tableaux d'observables sont une extension des observables et sont utilisés pour traiter des listes de données qui doivent être observables. Contrairement à un tableau JavaScript standard, un Tableau observable vous permet de suivre automatiquement les modifications apportées aux données de la liste et de mettre à jour l'interface utilisateur de manière réactive.

let myObservable = ko.observable('Inicial');

console.log(myObservable()); // Irá imprimir 'Inicial'

myObservable('Novo valor');
console.log(myObservable()); // Irá imprimir 'Novo valor'

Les

Tableaux observables ont des méthodes spécifiques qui vous permettent d'ajouter, de supprimer et de manipuler des éléments de manière réactive. Certaines de ces méthodes sont :

• indexOf(value) : renvoie l'index du premier élément du tableau qui est égal à son paramètre, ou la valeur -1 si aucune valeur correspondante n'est trouvée.
• push(item) : ajoute un nouvel élément à la fin du tableau;
• pop() : supprime et renvoie le dernier élément du tableau ;
• shift() : Supprime et renvoie le premier élément du tableau;
• unshift(item) : ajoute un nouvel élément au début du tableau;
• remove(item) : supprime un élément spécifique du tableau;
• removeAll([paramètre]) : supprime tous les éléments du tableau et peut recevoir un paramètre sous la forme de tableau qui supprimera les éléments dans le(s) paramètre(s) transmis ;
• replace(oldItem, newItem) : Remplace l'élément passé dans le premier paramètre par le deuxième paramètre ;
• reverse() : modifie l'ordre des éléments dans le tableau d'origine et met à jour l'interface utilisateur pour refléter le nouvel ordre ;
• reversed() : renvoie une copie inversée du tableau ;
• splice(index, count, items) : Vous permet d'ajouter ou de supprimer des éléments dans une position spécifique dans le tableau ;
• slice() : renvoie une copie d'un sous-ensemble du tableau, en commençant à l'index de début et en allant à l'index de fin-1. Les valeurs de début et de fin sont facultatives, et si elles ne sont pas fournies ;
• sort() : Détermine l’ordre des éléments. Si la fonction n'est pas fournie, la méthode trie les éléments par ordre alphabétique croissant (pour les chaînes) ou par ordre numérique croissant (pour les nombres);
• sorted() : renvoie une copie du tableau trié. Elle est préférable à la méthode sort() si vous n'avez pas besoin de modifier le tableau observable d'origine, mais que vous devez l'afficher dans un ordre spécifique ;

Pour les fonctions qui modifient le contenu du tableau, telles que push et splice, les méthodes KO déclenchent automatiquement le mécanisme de suivi des dépendances afin que tous les auditeurs enregistrés soient informés du changement et votre interface est automatiquement mise à jour, ce qui signifie qu'il existe une différence significative entre l'utilisation des méthodes KO (observableArray.push(...), etc) et array JavaScript natif (observableArray().push(...)), car ces derniers n'envoient aucune notification aux abonnés du array que son contenu a changé.

Bien qu'il soit possible d'utiliser s'abonner et d'accéder à un observableArray comme n'importe quel autre observable, KnockoutJs fournit également une méthode ultra rapide pour découvrir comment un tableau observable a changé (quels éléments ont été simplement ajoutés, supprimés ou déplacés). Vous pouvez vous abonner aux modifications du array comme suit :

let myObservable = ko.observable('Inicial');

console.log(myObservable()); // Irá imprimir 'Inicial'

myObservable('Novo valor');
console.log(myObservable()); // Irá imprimir 'Novo valor'

---

Observables calculés

Les

Observables calculés sont des fonctions qui dépendent d'un ou plusieurs observables et seront automatiquement mises à jour chaque fois que l'une de ces dépendances change. La fonction sera appelée une fois à chaque fois que l'une de ses dépendances change, et toute valeur qu'elle renvoie sera transmise aux observables, tels que les éléments de l'interface utilisateur ou d'autres observables calculés .

La principale différence entre les Observables calculés et les Observables est que les Observables calculés ne stockent pas directement une valeur ; au lieu de cela, ils s'appuient sur d'autres observables pour calculer leur valeur. Cela signifie que la valeur d'un Observable calculé est toujours automatiquement mise à jour lorsque l'un des observables dont il dépend est modifié.

let myObservable = ko.observable(0);

// Criando uma subscription no observable
myObservable.subscribe(function (newValue) {
  console.log('Novo valor do observable:', newValue);
}, scope, event);

Méthodes d'un observable calculé

1. dispose() : Cette méthode est utilisée pour supprimer (nettoyer) un Observable calculé lorsqu'il n'est plus nécessaire. Il supprime tous les abonnements et dépendances associés à Computed Observable;
2. extend() : Cette méthode vous permet d'ajouter des extensions personnalisées à un Observable calculé. Les extensions sont des fonctions qui peuvent modifier le comportement de Computed Observable ;
3. getDependenciesCount() : Cette méthode renvoie le nombre de observables dépendants du Observable calculé;
4. getDependencies() : Cette méthode renvoie un tableau contenant les observables qui sont des dépendances du Computed Observable;
5. getSubscriptionsCount() : Cette méthode renvoie le nombre d'abonnements en cours à partir du Computed Observable;
6. isActive() : Cette méthode renvoie une valeur booléenne qui indique si le Observable calculé est actuellement actif (un Observable calculé est actif s'il est en cours d'évaluation en raison d'un changement dans ses dépendances );
7. peek() : Cette méthode est similaire à l'opérateur de parenthèse () utilisé pour accéder à la valeur actuelle d'un Observable calculé. Cependant, la méthode peek ne crée pas de dépendance entre l'Observable calculé et l'endroit où il est appelé ;
8. Subscribe() : Cette méthode vous permet de vous abonner pour recevoir des notifications chaque fois que la valeur de Computed Observable change.

ce

Le deuxième paramètre de ko.computed définit la valeur de ceci lors de l'évaluation de l'observable calculé. Sans le transmettre, il ne serait pas possible de référencer this.firstName() ou this.lastName().

Il existe une convention qui évite d'avoir à suivre cela complètement : si le constructeur de votre viewmodel copie une référence à celui-ci dans une variable différente (traditionnellement appelée self), vous pouvez utiliser self tout au long de votre 🎜>viewmodel et vous n'avez pas à craindre qu'il soit redéfini pour faire référence à autre chose.

let myObservable = ko.observable('Inicial');

console.log(myObservable()); // Irá imprimir 'Inicial'

myObservable('Novo valor');
console.log(myObservable()); // Irá imprimir 'Novo valor'

Parce que self est capturé à la fermeture de la fonction, il reste disponible et cohérent dans toute fonction imbriquée, telle que l'évaluateur de l'observable calculé. Cette convention est encore plus utile lorsqu'il s'agit de gestionnaires d'événements.

Observables Purs calculés

Si un observable calculé calcule et renvoie simplement une valeur basée sur certaines dépendances observables, il est préférable de le déclarer comme ko.pureComputed au lieu de ko.computed.

let myObservable = ko.observable(0);

// Criando uma subscription no observable
myObservable.subscribe(function (newValue) {
  console.log('Novo valor do observable:', newValue);
}, scope, event);

Lorsqu'un observable calculé est déclaré comme pur, son évaluateur ne modifie pas directement les autres objets ou états, KnockoutJs peut gérer plus efficacement sa réévaluation et son utilisation de la mémoire. KnockoutJs le suspendra ou le libérera automatiquement si aucun autre code n'a de dépendance active dessus.

Observables calculés inscriptibles

Les

Observables calculés inscriptibles sont une extension des Observables calculés qui permettent la création de observables calculés qui peuvent être mis à jour à la fois par lecture et par écriture. Contrairement aux Observables calculés conventionnels, qui calculent uniquement leur valeur en fonction d'autres observables et ne stockent pas directement de valeur, les Observables calculés inscriptibles peuvent stocker une valeur et également fournir une fonction pour mettre à jour cette valeur. lorsque cela est nécessaire.

Pour créer un Observable calculé en écriture, il est nécessaire d'utiliser la fonction ko.computed avec un objet de configuration qui contient deux propriétés principales : lecture et écriture. La propriété read contient la fonction de calcul pour déterminer la valeur de l'observable, tandis que la propriété write contient la fonction qui est appelée lorsque vous souhaitez mettre à jour la valeur de l'observable.

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!