Backbone.js - Collections rafraîchissantes

Table des matières
Dans les applications que nous réalisons, nous aurons à terme une gestion massive des données, si nous utilisons la connaissance que nous avons de Backbone.js Pour travailler avec des collections, nous pouvons voir qu'à un moment donné, nous devrons faire des modifications massives et les rendre modèle par modèle au sein de la collection n'est pas efficace.
Pour surmonter ces obstacles, il existe des moyens et des méthodes au sein de Backbone.js avec lequel nous pouvons modifier ou actualiser et ramener tous les modèles d'une collection à un état antérieur, c'est une connaissance très utile si nous devons travailler avec des processus qui individuellement peuvent déclencher les performances de l'application.
Rafraîchir la collection
Comme nous l'avons expliqué précédemment, effectuer un changement massif au sein d'une collection est quelque chose qui peut être utile, en particulier lorsque nous travaillons avec un très grand volume de données qui peuvent effectuer le changement d'un modèle à l'autre individuellement. nous affectons les performances de l'application.
Comment faire ce changement ?Pour effectuer ce changement de manière "massive", nous avons la méthode .réinitialiser (), cette méthode est applicable aux collections, nous devons donc d'abord initialiser une collection avant de pouvoir l'utiliser.
Voyons dans l'exemple suivant comment nous allons créer une collection et sur cette base nous allons utiliser le Méthode .reset() :
 var AllCollection = new Backbone.Collection (); TodosCollection.add ([{id : 1, titre : « Aller en Allemagne. », Terminé : faux}, {id : 2, titre : « Aller en Colombie. », Terminé : false}, {id : 3, titre : 'Aller au Japon.', Terminé : true}]); TodosCollection.on ("ajouter", fonction (modèle) {console.log ("Ajouté" + model.get ('titre'));}); TodosCollection.on ("supprimer", fonction (modèle) {console.log ("Supprimé" + model.get ('titre'));}); TodosCollection.on ("changement : terminé", fonction (modèle) {console.log ("Terminé" + model.get ('titre'));}); TodosCollection.set ([{id : 1, titre : « Aller en Allemagne. », Terminé : true}, {id : 2, titre : « Aller en Colombie. », Terminé : false}, {id : 4, titre : 'Aller à Hong Kong.', Terminé : false}]); TodosCollection.on ("reset", function () {console.log ("Refreshed Collection.");}); TodosCollection.reset ([{title: 'Go to Canada.', Completed: false}]); 

Cet exemple est très utile, si nous regardons, nous avons commencé une nouvelle collection, en ajoutant environ 3 modèles et nous écoutons les 3 événements de base : ajouter, modifier et supprimer, chaque fois que l'un d'entre eux se produit, nous allons faire une impression en utilisant console.log(), après avoir fini d'écouter les événements, nous avons fait un ensemble, si nous faisons l'ensemble avec un modèle qui n'existe pas, il est simplement ajouté, mais c'est le problème que nous voulons éviter.
Comment éviter le problème ?Pour éviter le problème, nous utiliserons le méthode de réinitialisation et pour tester que cela fonctionne, nous avons mis une fonction pour écouter si l'événement de réinitialisation se produit, si c'est le cas, nous imprimerons un message avec console.log; Enfin, nous effectuons une réinitialisation de la collection, c'est-à-dire que nous actualisons son contenu et définissons immédiatement un nouveau modèle, ce faisant, la collection changera complètement et nous verrons que les événements précédents que nous avons mentionnés ne doivent pas être activés.
Voyons dans l'image suivante comment nous nous conformons à tout ce qui est décrit lors de l'exécution du code dans la console pour Javascript de Google Chrome:

On voit que lors de la réinitialisation de la collection, les événements déclarés au début de l'élimination des modèles, ou de l'ajout, ne sont pas effectivement déclenchés, c'est parce qu'on rafraîchit la collection, c'est-à-dire qu'on la crée comme si elle était à partir de 0.
Avec cela, nous avons terminé le tutoriel où nous avons pu voir que l'actualisation d'une collection est une procédure très simple qui bien implémentée peut nous aider à améliorer les performances et les fonctionnalités de nos applications en utilisant 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

Vous contribuerez au développement du site, partager la page avec vos amis

wave wave wave wave wave