Maison > Article > interface Web > 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.
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'
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'
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
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 :
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 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é
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.
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 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!