Viste backbone e DOM

Cosa starai creando

Panoramica

Le viste backbone forniscono una convenzione e un'astrazione utili per le interfacce utente. Tuttavia, per includere nella tua app funzionalità UI che Backbone, da solo, non è stato progettato per supportare, dovrai considerare come integrare efficacemente funzionalità personalizzate o di terze parti nell'app Backbone. Di conseguenza, gli sviluppatori devono superare le sfide ed evitare conflitti ingannevoli tra le librerie esterne e Backbone.

Introduzione a Backbone.js

Backbone è un modo fantastico per organizzare il tuo codice lato client. Con astrazioni come modelli, viste e raccolte, Backbone aiuta gli sviluppatori seri a scrivere applicazioni scalabili e ben organizzate. 

Sebbene ci siano molte alternative a Backbone, tra cui Angular ed Ember, Backbone offre agli sviluppatori un'incredibile libertà di scrivere e organizzare il loro codice in modi naturali e confortevoli senza essere troppo pignolo su come appare il DOM (Document Object Model).

The Skinny on Backbone Views

Le viste sono uno dei componenti più potenti e flessibili in Backbone. Secondo gli autori di Backbone:

Le viste backbone sono quasi più convenzionali di quanto non siano codice - non determinano nulla sul tuo codice HTML o CSS e possono essere utilizzate con qualsiasi libreria di template JavaScript.

Sono usati per manipolare ciò che gli utenti vedono nel loro browser e facilitano la comunicazione con i modelli. Di conseguenza, nel paradigma di Model-View-Controller, è utile pensare a Viste Backbone sia come vista che come controller.

Ciò ha gravi implicazioni nello sviluppo di applicazioni con un'interazione utente significativa. In effetti, ci sono molte situazioni in cui potresti voler usare qualche altra libreria per manipolare il DOM. La visualizzazione dei dati e i giochi basati sul web sono due esempi in cui potresti preferire che un'altra libreria gestisca parte del rendering della vista dell'utente. Di conseguenza, potresti prendere in considerazione l'utilizzo di jQuery, d3.js, crossfilter o three.js per alcune delle tue esigenze di manipolazione del DOM.

Fortunatamente, ci sono modi per far sì che Backbone funzioni bene con questi altri manipolatori DOM.

Manipolazione del modello di oggetto documento in Backbone

Prima di approfondire, esaminiamo la manipolazione del DOM in Backbone. Iniziamo con un oggetto vista di base.

var SomeView = Backbone.View.extend (// Alcuni elementi di definizione qui); var aView = new SomeView ();

Grande. Ora, diciamo la vista di come eseguire il rendering definendo a .render () metodo.

var SomeView = Backbone.View.extend (// definisce come eseguire il rendering di render: function () // richiama l'HTML var htmlContent = "
Questo è un codice HTML che verrà inserito nel DOM
"; // inserisce l'html this. $ el.html (htmlContent); // restituisce un'istanza dell'oggetto per il concatenamento restituisce questo;);

Ci sono molte cose qui, quindi facciamolo passo dopo passo.

Definire a .render () Metodo

Innanzitutto, definiamo a .render () metodo che incapsula la logica necessaria per il rendering HTML. Si noti che Backbone viene fornito con a .render () metodo fuori dalla scatola. Tuttavia, non fa nulla. È stato progettato per essere sovrascritto con la logica personalizzata!

Ottenere contenuti HTML

L'esempio precedente presuppone che tu ottenga l'HTML da qualche parte. È possibile utilizzare caratteri di sottolineatura _.modello(). In alternativa, possiamo usare altre librerie di template, come Handlebars (il mio preferito). Tutto ciò che conta davvero è che, in qualche modo, otteniamo del contenuto HTML.

Che diavolo è EL?

Abbiamo bisogno di un posto dove inserire il contenuto HTML; questo è ciò che EL è per. Piace .render (), EL è un attributo che viene fornito con Backbone Views out of the box. Fa riferimento all'elemento HTML (e tutti i relativi elementi secondari) contenuti in questa vista. Nell'esempio sopra, non abbiamo specificato EL. Di default, EL è un div. Tuttavia, avremmo potuto facilmente impostare l'elemento genitore in questo modo:

var SomeView = Backbone.View.extend (el: "article", ...); var aView = new SomeView (); console.log (aView.el); // un elemento HTML "article" vuoto

C'è anche $ EL, che è giusto EL avvolto in jQuery. Vedremo più avanti $ EL svolge un ruolo importante nel controllo delle viste Backbone.

ritornando Questo...

Infine, restituiamo un riferimento all'oggetto stesso per consentire il concatenamento. Anche se non strettamente richiesto, ritorno Questo è una convenzione Senza restituiscilo, avremmo bisogno di un modo per accedere al contenuto HTML dell'elemento. Il seguente codice illustra una soluzione alternativa.

/ ** * Se render () non restituisce nulla, stiamo davvero * accedendo alla proprietà 'el' di undefined, che non * esiste! * / aView.render (). el; // Dovrebbe generare un errore // Prova ad accedere a HTML console.log (aView.el); // Dovrebbe essere vuoto (ma definito!) // aggiungi HTML al DOM di 'aView' aView.render (); // Prova ad accedere nuovamente all'HTML console.log (aView.el) // Dovrebbe contenere l'HTML

Uhh, niente è sullo schermo!

Buon punto Anche se abbiamo chiamato .render (), non c'è niente sullo schermo, cosa dà?

Questo perché non abbiamo ancora interagito con il DOM. Tutto ciò che abbiamo fatto è stato generare un codice HTML e rappresentarlo in un oggetto JavaScript chiamato una vista. Dato che ora abbiamo accesso all'HTML generato, tutto ciò che dobbiamo fare è aggiungere o inserire l'HTML nel DOM dell'app della tua web.

Per spostare le cose, creeremo anche una mini-app in modo che quando la pagina si carica, appare la vista. Di seguito sono indicati l'aspetto del tuo codice HTML e JavaScript.

Impostazione HTML di base

Ecco cosa sta succedendo in App.js

// Crea una vista var SomeView = Backbone.View.extend (initialize: function () , render: function () var someHTML = "
Questo è un po 'di HTML
"$ el.html (someHTML); restituisci questo;); // Crea un router var Router = Backbone.Router.extend (// definisci i percorsi dei percorsi: " ":" home ", home: function () var aView = new SomeView (); $ ('.app'). html (aView.render (). el);); // Istanzia il tuo router nuovo Router (); // Start cronologia di tracciamento Backbone.history.start ();

Vai al tuo server / browser locale, carica la pagina e la tua applicazione dovrebbe essere in esecuzione!

Usando Backbone e jQuery contemporaneamente

La flessibilità di Backbone consente il nostro utilizzo di librerie di terze parti per manipolare il DOM. Uno scenario è quando si desidera utilizzare contemporaneamente jQuery e Backbone per manipolare le visualizzazioni. Di seguito è riportato un esempio aggiornato.

var SomeView = Backbone.View.extend (// Manipola indirettamente il DOM creando contenuto HTML in // Backbone View render: function () var someHTML = "
Alcuni HTML
"; this. $ el.html (someHTML); restituisci questo;, // Manipola DOM direttamente dalla vista Backbone renderWithJQuery: function () var otherHTML ="
Altro HTML
"; $ ('.app'). append (otherHTML); // potrebbe non avere senso restituire 'this', // un altro metodo di rendering, per rendere le cose interessanti specialRender: function () this. $ ('. vuoto '). append ("Non più vuoto!"); restituisci questo;); // Più tardi nella tua app ... // crea la vista var aView = new SomeView (); // cambia il DOM per riflettere la vista appena creata $ ('.app'). html (aView.render (). el); // aggiungi più contenuti direttamente al DOM usando jQuery in // a un oggetto vista Backbone aView.renderWithJQuery ();

Il codice sopra comporterà due paragrafi sulla pagina. Il primo paragrafo contiene "Alcuni HTML". Il secondo paragrafo contiene "Altro HTML".

Per verificare la tua comprensione di questo, invertire le chiamate di metodo in questo modo:

// SomeView è già definito var aView = new SomeView (); aView.renderWithJQuery (); $ ( 'App') html (aView.render () el.).;

Il codice sopra comporterà un paragrafo: "Alcuni HTML". In entrambi i casi, c'è anche a 

elemento con niente in esso. Ne discuteremo tra un momento.

Manipolazione efficiente del DOM nelle viste Backbone

Comprendere la magia della manipolazione DOM efficiente (e trasversale) richiede una comprensione di questo. $ el e questo. $ (). Usando questo. $ el, stiamo esaminando la manipolazione del DOM sul contenuto contenuto nella vista. Usando questo. $ (), stiamo esaminando il DOM traversal verso l'albero DOM all'interno della vista.

Di conseguenza, nel contesto Backbone, alcuni usi di $ () (invece di questo. $ ()) poteva essere inefficiente Ad esempio, supponiamo di voler attraversare il DOM per trovare qualche elemento. Potremmo usare uno qualsiasi dei comuni metodi di attraversamento DOM, incluso .trova(), .bambini(), .più vicina(), .primo(), e così via.

Se noi conoscere, a priori, che l'elemento che cerchiamo si trova da qualche parte all'interno del DOM della vista, quindi dovremmo usare questo. $ () per evitare inutilmente la ricerca di un albero DOM di dimensioni maggiori. Se l'elemento che cerchiamo si trova al di fuori del DOM della vista, sarà necessario utilizzarlo $ ().

Ad esempio, il .specialRender () il metodo utilizza l'attraversamento DOM localizzato per garantire che cerchiamo elementi con classe vuoto nel contesto della vista. Se trovato, imposta il contenuto HTML di quegli elementi per includere a campata e il testo "Non più vuoto".

Conclusione

In questo articolo abbiamo esaminato le viste Backbone, abbiamo discusso su come eseguire il rendering delle viste Backbone nel DOM e abbiamo studiato come rendere il Backbone compatibile con altre librerie che potresti voler usare per manipolare il DOM. Abbiamo anche imparato a conoscere l'attraversamento DOM localizzato e i metodi identificati per attraversare in modo efficiente e inefficiente il DOM.

La parte successiva di questo articolo approfondirà gli esempi più complessi di come far interagire più librerie nella manipolazione del DOM.