✅ Backbone.js - Modifications des modèles

Table des matières

Javascript nous permet d'utiliser des événements asynchrones avec lesquels nous pouvons générer des actions, de ce fait nous avons un grand succès dans l'utilisation de frameworks tels que jQuery qui peut écouter un changement dans l'arborescence DOM et exécuter une fonction pendant que le reste de la page fonctionne toujours.
Accès direct
Avant de voir comment gérer les changements au sein du modèle, un concept clé que nous devons gérer est l'accès direct aux attributs, c'est grâce à un attribut .les attributs qui est dans le modèle dont nous héritons pour faire nôtre.
ImportantLors de l'attribution de valeurs à l'aide de cette méthode, nous omettons qu'elle explose dans notre modèle et lors du passage du attribut {silencieux : vrai} tous ses événements sont complètement réduits au silence.
Voyons dans l'exemple de code suivant auquel nous nous référons :

Comme nous pouvons le voir dans l'exemple lors de l'utilisation {silencieux : vrai} il ne détecte aucun changement dans notre modèle.
Écoutez les changements dans le modèle
L'écoute de l'évolution de nos modèles peut être très utile car nous pouvons effectuer différentes actions, donnant ainsi plus de dynamisme à notre application.
Dans l'exemple suivant nous allons imprimer une ligne indiquant à chaque fois qu'un attribut change, puis nous allons imprimer la valeur de l'attribut, pour cela dans la méthode initialiser du modèle, nous inclurons un appel à sur la méthode et nous vous dirons ce que c'est dans l'événement changement qui devrait fonctionner :

Si nous exécutons ce code, nous obtiendrons une ligne à chaque fois que le modèle change et en plus une ligne initiale lorsque le modèle est initialisé.
Voyons ce que le résultat nous donne :

AGRANDIR

Nous voyons que nous obtenons deux lignes indiquant que le modèle a changé, ce montant coïncide avec les deux fois que nous utilisons le méthode ser () Pour donner une valeur aux attributs du modèle, nous voyons également comment la ligne d'initialisation du modèle a été imprimée.
Entendre les modifications apportées à un attribut particulier
Ce L'option nous permet d'exécuter une action lorsqu'un attribut particulier changeCe que nous pouvons réaliser avec cela, c'est que nous pouvons diriger différentes actions, qu'un attribut change ou un autre, avec cela nous obtiendrons une indépendance beaucoup plus dynamique des événements dans l'application.
Voyons dans le code suivant comment procéder :

 var Todo = Backbone.Model.extend ({// Valeurs d'attribut par défaut par défaut : {title : ' ', complete : ''}, initialize : function () {console.log ('Ce modèle a été initialisé'); this.on ('changer : titre', fonction () {console.log ('La valeur de l'attribut titre a changé.');});}, setTitle : fonction (nouveauTitre) {this.set ({titre : nouveauTitre} );}}); var myTodo = new Todo (); // Les deux formulaires déclenchent l'événement change : myTodo.set ('title', 'We have mis a initial title.'); myTodo.setTitulo ('Nous avons changé le titre.'); myTodo.set ('terminé', 'ne déclenche pas d'événement');

Dans l'image suivante, nous pouvons voir à quoi ressemble tout après avoir exécuté le code de l'exercice précédent :

AGRANDIR

Nous pouvons corriger que seul le changement de l'attribut title déclenche l'événement, lors du changement de l'attribut complete rien ne se passe et donc rien n'est imprimé par la console.
A la fin de ce tutoriel, nous avons déjà une connaissance beaucoup plus large concernant la gestion des différents événements de notre application dans Backbone.js.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif