Share
Wat je gaat creërenBackbone-weergaven bieden een bruikbare conventie en abstractie voor gebruikersinterfaces. Echter, om UI-functionaliteit in uw app op te nemen dat Backbone op zichzelf niet ontworpen was om te ondersteunen, moet u overwegen hoe u aangepaste of externe functionaliteit effectief in uw Backbone-app kunt integreren. Dientengevolge moeten ontwikkelaars door uitdagingen navigeren en lastige conflicten tussen de externe bibliotheken en Backbone vermijden.
Backbone is een fantastische manier om uw client-side code te organiseren. Met abstracties zoals modellen, views en collecties helpt Backbone serieuze ontwikkelaars om goed georganiseerde, schaalbare applicaties te schrijven.
Hoewel er veel alternatieven zijn voor Backbone, waaronder Angular en Ember, biedt Backbone ontwikkelaars de ongelofelijke vrijheid om hun code op een natuurlijke en comfortabele manier te schrijven en te ordenen, zonder al te op de hoogte te zijn van hoe het Document Object Model (DOM) eruit ziet.
Weergaven zijn een van de krachtigste en meest flexibele componenten in Backbone. Volgens de auteurs van Backbone:
Backbone-weergaven zijn bijna meer conventie dan code. Ze bepalen niets over uw HTML of CSS voor u en kunnen worden gebruikt met elke JavaScript-templating-bibliotheek..
Ze worden gebruikt om te manipuleren wat gebruikers in hun browser zien, en ze vergemakkelijken de communicatie met modellen. Dientengevolge, in het paradigma van Model-View-Controller, is het nuttig om na te denken over Backbone Views als zowel view als controller.
Dit heeft serieuze gevolgen bij het ontwikkelen van applicaties met aanzienlijke gebruikersinteractie. In feite zijn er veel situaties waarin u misschien een andere bibliotheek wilt gebruiken om de DOM te manipuleren. Datavisualisatie en webgebaseerde gaming zijn twee voorbeelden waarbij u er de voorkeur aan geeft dat een andere bibliotheek een deel van uw weergave met gebruikersgerichte weergave verwerkt. Als gevolg hiervan kunt u overwegen jQuery, d3.js, crossfilter of three.js te gebruiken voor enkele van uw DOM-manipulatiebehoeften..
Gelukkig zijn er manieren om Backbone goed te laten spelen met deze andere DOM-manipulators.
Laten we, voordat we erin stappen, de DOM-manipulatie in Backbone bekijken. Laten we beginnen met een basisweergaveobject.
var SomeView = Backbone.View.extend (// Sommige definitiemateriaal hier); var aView = new SomeView ();
Super goed. Laten we nu eens kijken naar hoe je jezelf kunt weergeven door een a te definiëren .render () methode.
var SomeView = Backbone.View.extend (// definieer hoe render render render: function () // haal wat HTML var htmlContent = "Dit is wat HTML die in de DOM wordt ingevoegd
"; // plaats de html this. $ el.html (htmlContent); // retourneer een instantie van het object voor het ketenen retourneer dit;);
Er zijn hier verschillende dingen aan de hand, dus laten we het stap voor stap doen.
Accentsconagua
.render () MethodeEerst definiëren we een .render () methode die de logica inkapselt die nodig is om HTML te renderen. Merk op dat Backbone wordt geleverd met een .render () methode uit de doos. Het doet echter niets. Het is ontworpen om te worden overschreven door aangepaste logica!
In het bovenstaande voorbeeld wordt ervan uitgegaan dat u ergens HTML krijgt. U kunt onderstrepingstekens gebruiken _.sjabloon(). Als alternatief kunnen we andere sjabloonbibliotheken gebruiken, zoals Handlebars (mijn persoonlijke favoriet). Het enige dat er echt toe doet, is dat we op de een of andere manier wat HTML-inhoud krijgen.
el?We hebben een plaats nodig om de HTML-inhoud te plaatsen; dat is wat el is voor. Net zoals .render (), el is een kenmerk dat standaard met Backbone Views wordt geleverd. Het verwijst naar het HTML-element (en al zijn onderliggende elementen) in deze weergave. In het bovenstaande voorbeeld hebben we niet aangegeven el. Standaard, el is een div. We hadden echter gemakkelijk het bovenliggende element kunnen instellen zoals:
var SomeView = Backbone.View.extend (el: "article", ...)); var aView = new SomeView (); console.log (aView.el); // een leeg "artikel" HTML-element
Er is ook $ el, wat gewoon is el ingepakt in jQuery. We zullen later dat zien $ el speelt een krachtige rol bij het beheersen van Backbone-weergaven.
deze... Ten slotte retourneren we een verwijzing naar het object zelf om te kunnen koppelen. Hoewel niet strikt vereist, terugkeren deze is een conventie. Zonder stuur dit terug, we zouden op de een of andere manier toegang moeten hebben tot de HTML-inhoud van het element. De volgende code illustreert een alternatieve oplossing.
/ ** * Als render () niets oplevert, hebben we echt * toegang tot de 'el' eigenschap van undefined, die niet * bestaat! * / aView.render (). el; // Zou een fout moeten gooien // Probeer toegang te krijgen tot de HTML console.log (aView.el); // Zou leeg moeten zijn (maar gedefinieerd!) // HTML toevoegen aan de DOM van 'aView' aView.render (); // Probeer de HTML opnieuw te gebruiken console.log (aView.el) // Zou de HTML moeten bevatten
Goed punt. Ook al hebben we gebeld .render (), er staat niets op het scherm - wat geeft?
Dat komt omdat we nog geen interactie hebben gehad met de DOM. Het enige dat we deden was enige HTML genereren en deze weergeven in een JavaScript-object met de naam uitzicht. Omdat we nu toegang hebben tot de gegenereerde HTML, hoeven we alleen maar de HTML toe te voegen of in te voegen in de DOM van uw webapp.
Om dingen mee te nemen, zullen we ook een mini-app instellen zodat wanneer de pagina wordt geladen, de weergave wordt weergegeven. Hieronder ziet u hoe uw HTML en JavaScript eruit moeten zien.
Mijn geweldige Backbone-app
// Maak een weergave var SomeView = Backbone.View.extend (initialize: function () , render: function () var someHTML = "Dit is wat HTML
"; this. $ el.html (someHTML); stuur dit terug;) // Een router maken var var Router = Backbone.Router.extend (// definieer je routes routes: " ":" home ", home: function () var aView = new SomeView (); $ ('. app'). html (aView.render (). el);); // Start de nieuwe router van uw router (); // Start volggeschiedenis Backbone.history.start ();
Ga naar je lokale server / browser, laad de pagina op en je applicatie zou moeten werken!
Dankzij de flexibiliteit van Backbone kunnen we bibliotheken van derden gebruiken om de DOM te manipuleren. Eén scenario is wanneer u tegelijkertijd jQuery en Backbone wilt gebruiken om uw views te manipuleren. Hieronder is een bijgewerkt voorbeeld.
var SomeView = Backbone.View.extend (// manipuleer DOM indirect door HTML-inhoud te maken in een // Backbone View render: function () var someHTML = "Sommige HTML
"; this. $ el.html (someHTML); stuur dit terug;, // Manipuleer DOM rechtstreeks vanuit de Backbone View renderWithJQuery: function () var otherHTML ="
Andere HTML
"; $ ('. app'). toevoegen (otherHTML); // heeft geen zin om 'dit' terug te sturen, // een andere weergavemethode, om dingen interessant te houden specialRender: function () this. $ ('. leeg '). toevoegen ("Niet meer leeg!"); retourneer dit;); // Later in uw app ... // maak de weergave var aView = new SomeView (); // wijzig de DOM om de nieuw gemaakte weergave $ ('. app'). html weer te geven (aView.render (). el); // meer inhoud rechtstreeks toevoegen aan de DOM met jQuery binnen // een Backbone-weergaveobject aView.renderWithJQuery ();
De bovenstaande code resulteert in twee alinea's op de pagina. De eerste alinea bevat "Enkele HTML". De tweede alinea bevat "Andere HTML".
Om uw begrip hiervan te testen, keert u de methodeaanroepen zoals volgt om:
// SomeView is al gedefinieerd var aView = new SomeView (); aView.renderWithJQuery (); $ ( 'App') html (aView.render () el.).;
De bovenstaande code resulteert in één alinea: "Some HTML". In beide gevallen is er ook een element met niets erin. We zullen dit in een moment bespreken.
Het begrijpen van de magie van efficiënte DOM-manipulatie (en traversal) vereist een begrip van dit. $ el en dit. $ (). Door het gebruiken van dit. $ el, we zijn bezig met het manipuleren van DOM-manipulatie naar de inhoud die in de weergave is opgenomen. Door het gebruiken van dit. $ (), we zijn de DOM-traversal aan het doorlopen naar de DOM-boom in de weergave.
Dientengevolge, in de context Backbone, sommige toepassingen van $ () (in plaats van dit. $ ()) kon inefficiënt zijn. Laten we bijvoorbeeld zeggen dat we de DOM wilden doorlopen om een element te vinden. We kunnen alle gangbare DOM-traversal-methoden gebruiken, inclusief .vind(), .kinderen(), .dichtst (), .eerste(), enzovoorts.
Als wij weten, a priori, dat het element dat we zoeken ergens in de DOM van de view ligt, dan zouden we het moeten gebruiken dit. $ () om te voorkomen dat u onnodig zoekt in een grotere DOM-structuur. Als het element dat we zoeken buiten de DOM van de weergave ligt, moeten we het gebruiken $ ().
Bijvoorbeeld de .specialRender () methode maakt gebruik van gelokaliseerde DOM-traversal om ervoor te zorgen dat we naar elementen met klasse zoeken leeg in de context van de weergave. Als dit wordt gevonden, wordt de HTML-inhoud van die elementen ingesteld om een span en de tekst "Niet langer leeg".
In dit artikel hebben we de Backbone-weergaven besproken, besproken hoe Backbone-weergaven in de DOM kunnen worden weergegeven, en onderzocht hoe je Backbone goed kunt laten spelen met andere bibliotheken die je misschien zou willen gebruiken om de DOM te manipuleren. We leerden ook over gelokaliseerde DOM-traversal en identificeerden methoden om efficiënt en inefficiënt de DOM te doorkruisen.
Het volgende deel van dit artikel zal dieper ingaan op meer gecompliceerde voorbeelden van het krijgen van meerdere bibliotheken om samen te werken bij het manipuleren van de DOM.
