Backbone.js - El Element

À l'heure actuelle, nous savons que les points de vue dans Backbone.js Ils travaillent avec la logique de la façon de présenter les informations structurées avec le modèle, la question se pose de savoir comment nous l'exprimons dans notre application, ce que nous faisons, c'est travailler avec les éléments du arbre DOM afin que nous puissions insérer par Javascript les différents contenus de notre modèle.
Pour atteindre ces objectifs, nous avons l'élément "les" qui fait référence au nom du élément DOM avec laquelle nous avons identifié notre part de la vue.
Quel est le"?
Cet élément est le composant central ou la propriété de notre vue, puisqu'il est la référence à la élément DOM qu'il est obligatoire que les vues aient. Utilisation des vues "les" comme la propriété avec laquelle nous composons le contenu et qui sera ensuite inséré dans le DOM.
Il existe deux manières d'associer un élément DOM avec la vue, le première en crée un nouveau et l'ajoute au DOM et au seconde fait une référence à un existant dans la page.
Création d'un nouvel élémentSi nous voulons créer un nouvel élément, nous devons utiliser les propriétés : tagName, id et className, de cette façon le framework sera chargé de créer le nouvel élément pour nous et une référence audit élément sera disponible dans le propriété "le", dans le cas où nous quittons le nom de balise vide par défaut sera créé en tant que div.
Voyons le code suivant où nous pouvons apprécier ce que nous avons appris jusqu'à présent :

 var TasksView = Backbone.View.extend ({tagName: 'ul', // est requis mais si nous le laissons vide, il est pris comme div className: 'container', // c'est facultatif mais nous pouvons attribuer plusieurs identifiants de classes : 'tâche', // facultatif}); var TasksView = new TasksView (); console.log (tasksView .el); // imprimera

Comme nous pouvons le voir, nous créons une vue de manière basique en étendant ou en héritant de Backbone.Voir, puis avec les propriétés mentionnées nous leur attribuons une valeur, enfin nous instancions et avec un console.log() on voit le résultat.
Dans l'image suivante, nous pouvons illustrer à quoi cela ressemble dans notre Console chromée:

Ici, nous voyons comment nous pourrions générer un élément avec l'étiquette

que nous avions spécifié dans notre build de vue.
Méthode SetElement
Cette méthode est utilisée lorsque nous voulons appliquer la vue à un élément DOM différent qui existe déjà, elle créera alors une nouvelle référence $ le, qui ne sera pas attaché à l'élément d'origine mais pointera vers le nouveau, tout cela en fonction de l'événement que l'on appelle.
Voyons dans le code suivant comment nous appliquons cela :


 // Nous créons deux éléments DOM qui représentent des boutons var button1 = $ (''); var bouton2 = $ (''); // On définit une nouvelle vue var View = Backbone.View.extend ({events: {click: function (e) {console.log (view.el === e.target);}}}); // Nous créons une instance de la vue et l'appliquons à l'élément button1 // to button1 var view = new View ({el: button1}); // Maintenant, nous appliquons la vue à l'élément button2 avec la méthode setElement view.setElement (button2); button1.trigger ('clic'); button2.trigger ('clic'); 


Cela devrait renvoyer une valeur vraie lorsque nous exécutons l'événement sur le élément button2 Puisque la vue a été modifiée, voyons l'image qui fait référence à ce qui précède expliquée pour terminer le didacticiel :




Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif