Backbone.js - El Element

Op dit moment weten we dat de uitzichten in Backbone.js Ze werken met de logica van hoe de informatie gestructureerd te presenteren met het model, de vraag rijst hoe we dit uitdrukken in onze applicatie, wat we doen is werken met de elementen van het DOM-boom zodat we kunnen invoegen door Javascript de verschillende inhoud in onze sjabloon.
Om deze doelstellingen te bereiken hebben we het element: "de" die verwijst naar de naam van de DOM-element waarmee we ons deel van het zicht hebben geïdentificeerd.
Wat is de"?
Dit element is de centrale component of eigenschap van onze visie, aangezien het de verwijzing is naar de DOM-element dat het verplicht is dat de standpunten hebben. Weergaven gebruik "de" als de eigenschap waarmee we de inhoud samenstellen en die vervolgens in de DOM wordt ingevoegd.
Er zijn twee manieren waarop we a . kunnen associëren DOM-element met het zicht, de eerst maakt een nieuwe en voegt deze toe aan de DOM en de tweede verwijst naar een bestaande binnen de pagina.
Een nieuw element makenAls we een nieuw element willen maken, moeten we de eigenschappen gebruiken: tagName, id en className, op deze manier zal het raamwerk verantwoordelijk zijn voor het maken van het nieuwe element voor ons en een verwijzing naar dat element zal beschikbaar zijn in de eigendom "de", in het geval dat we de . verlaten tagNaam leeg wordt standaard gemaakt als een div.
Laten we de volgende code eens bekijken waarin we kunnen waarderen wat we tot nu toe hebben geleerd:

 var TasksView = Backbone.View.extend ({tagName: 'ul', // is vereist, maar als we het leeg laten, wordt het genomen als div className: 'container', // het is optioneel, maar we kunnen meerdere klassen-ID's toewijzen: 'taak', // optioneel}); var TasksView = nieuwe TasksView (); console.log (takenView .el); // zal afdrukken

Zoals we kunnen zien, creëren we op een eenvoudige manier een weergave door uit te breiden of te erven van Backbone.Bekijken, dan kennen we ze met de genoemde eigenschappen een waarde toe, ten slotte instantiëren we en met a console.log () wij zien het resultaat.
In de volgende afbeelding kunnen we illustreren hoe dit eruit ziet in onze Chrome-console:

Hier zien we hoe we een element met het label kunnen genereren

die we hadden gespecificeerd in onze view build.
SetElement-methode
Deze methode wordt gebruikt wanneer we de weergave willen toepassen op een ander DOM-element dat al bestaat, dan zal het een nieuwe referentie maken $ de, die niet aan het oorspronkelijke element wordt vastgemaakt, maar naar het nieuwe verwijst, dit alles afhankelijk van de gebeurtenis die we noemen.
Laten we in de volgende code kijken hoe we dit toepassen:


 // We maken twee DOM-elementen die knoppen vertegenwoordigen var button1 = $ (''); var knop2 = $ (''); // We definiëren een nieuwe weergave var View = Backbone.View.extend ({events: {click: function (e) {console.log (view.el === e.target);}}}); // We maken een instantie van de weergave en passen deze toe op het button1 element // to button1 var view = new View ({el: button1}); // Nu passen we de view toe op het button2 element met de methode setElement view.setElement (button2); button1.trigger ('klik'); button2.trigger ('klik'); 


Dit zou een echte waarde moeten retourneren wanneer we de gebeurtenis uitvoeren op de knop2 element Aangezien de weergave erin is gewijzigd, laten we de afbeelding bekijken die verwijst naar het bovenstaande uitgelegd om de zelfstudie te voltooien:




Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een ​​positief punt te geven