Backbone Views și DOM

Prezentare generală

Vederile backbone oferă o convenție și abstracție utile pentru interfețele utilizatorilor. Cu toate acestea, pentru a include funcționalitatea UI în aplicația dvs., că singură, Backbone nu a fost proiectată să suporte, va trebui să luați în considerare modul în care puteți integra în mod efectiv funcționalitatea personalizată sau terță parte în aplicația Backbone. Ca rezultat, dezvoltatorii trebuie să navigheze în provocări și să evite conflictele dificile între bibliotecile externe și Backbone.

Intrați la Backbone.js

Backbone este o modalitate fantastică de a vă organiza codul clientului. Cu abstracții cum ar fi modele, vederi și colecții, Backbone ajută dezvoltatorii serioși să scrie aplicații bine organizate și scalabile. 

În timp ce există multe alternative la Backbone, inclusiv Angular și Ember, Backbone oferă dezvoltatorilor libertatea incredibilă de a scrie și organiza codul în moduri naturale și confortabile, fără a fi prea multumit de ceea ce arată Modelul Obiectului Documentului (DOM).

Imaginile Skinny on Backbone

Vizionările sunt una dintre cele mai puternice și mai flexibile componente din Backbone. Potrivit autorilor Backbone:

Vizualizările backbone sunt aproape mai multe convenții decât codul - ele nu determină nimic despre codul HTML sau CSS pentru dvs. și pot fi utilizate cu orice bibliotecă de template-uri JavaScript.

Sunt folosite pentru a manipula ceea ce văd utilizatorii în browser și facilitează comunicarea cu modelele. Ca rezultat, în paradigma Model-View-Controller, este util să ne gândim la Vizualizările Backbone atât ca vizualizare cât și ca controler.

Acest lucru are implicații grave atunci când dezvoltați aplicații cu o interacțiune semnificativă cu utilizatorul. De fapt, există multe situații în care este posibil să doriți să utilizați altă bibliotecă pentru a manipula DOM. Vizualizarea datelor și jocurile bazate pe web sunt două exemple în care ați putea prefera ca o altă bibliotecă să se ocupe de o anumită performanță de afișare a vizualizării cu care se confruntă utilizatorii. Ca rezultat, puteți lua în considerare utilizarea jQuery, d3.js, crossfilter sau three.js pentru unele dintre nevoile de manipulare DOM.

Din fericire, există modalități de a face Backbone să joace frumos cu acești manipulatori DOM.

Manipularea modelului de obiect document în coloana vertebrală

Înainte de a intra în aceasta, să examinăm manipularea DOM în Backbone. Să începem cu un obiect de vizualizare de bază.

var SomeView = Backbone.View.extend (// Unele lucruri de definire aici); var aView = nouVizualView ();

Grozav. Acum, hai să spunem cum să se facă prin definirea unui .face() metodă.

var SomeView = Backbone.View.extend (// definiți modul de redare a unui lucru render: funcția () // obțineți câteva HTML var htmlContent = "
Acest HTML care va fi inserat în DOM
"; / / inserați html-ul $ el.html (htmlContent); // returnați o instanță a obiectului pentru înlănțuire returnați acest lucru;);

Există mai multe lucruri care se întâmplă aici, deci hai să o luăm pas cu pas.

Definirea a .face() Metodă

În primul rând, definim a .face() care încapsulează logica necesară pentru a face HTML. Rețineți că Backbone vine cu un a .face() metoda de ieșire din cutie. Cu toate acestea, nu face nimic. A fost proiectat pentru a fi suprascris cu logica particularizata!

Obținerea conținutului HTML

Exemplul de mai sus presupune că obțineți HTML undeva. Puteți utiliza sublinieri _.template (). Alternativ, putem folosi și alte biblioteci templating, cum ar fi Handlebars (preferatul meu personal). Tot ce contează este că, într-un fel, obținem conținut HTML.

Ce este Iadul el?

Avem nevoie de un loc pentru a pune conținutul HTML; asta e ceea ce el este pentru. Ca .face(), el este un atribut care vine cu Backbone Views din cutie. Se referă la elementul HTML (și la toți copiii) conținut în această vizualizare. În exemplul de mai sus, nu am specificat el. În mod implicit, el este a div. Cu toate acestea, am putut să setăm cu ușurință elementul părinte astfel:

var SomeView = Backbone.View.extend (el: "articol", ...); var aView = nouVizualView (); console.log (aView.el); // un element HTML "articol" gol

Există deasemenea $ el, care este just el învelit în jQuery. Vom vedea mai târziu $ el joacă un rol important în stăpânirea opiniilor Backbone.

Returnarea acest...

În cele din urmă, vom returna o referință la obiectul în sine pentru a permite înlănțuirea. În timp ce nu este strict necesar, întoarcerea acest este o convenție. Fără returnează acest lucru, am avea nevoie de un mod de a accesa conținutul HTML al elementului. Următorul cod ilustrează o soluție alternativă.

/ ** * Dacă render () nu întoarce nimic, noi într-adevăr accesăm proprietatea 'el' undefined, care nu există *! * / aView.render (); // ar trebui să arunce o eroare // încercați să accesați consola.log HTML (aView.el); // ar trebui să fie gol (dar definit!) // adăuga HTML la DOM a 'aView' aView.render (); // Încercați să accesați din nou consola.log (aView.el) // HTML trebuie să conțină codul HTML

Nimic nu e pe ecran!

Buna observatie. Chiar dacă am sunat .face(), nu este nimic pe ecran - ce dă?

Asta pentru că nu am interacționat încă cu DOM. Tot ce am făcut a fost să generăm HTML și să îl reprezentăm într-un obiect JavaScript numit o vedere. Deoarece acum avem acces la codul HTML generat, tot ce trebuie să faceți este să adăugați sau să inserați codul HTML în DOM-ul aplicației dvs. web.

Pentru a muta lucrurile de-a lungul, vom seta, de asemenea, o mini-aplicație, astfel încât atunci când pagina se încarcă, apare ecranul. Mai jos sunt cele despre care ar trebui să arate HTML și JavaScript.

Configurarea HTML de bază

Iată ce se întâmplă în App.js

// Creați o vizualizare var SomeView = Backbone.View.extend (initialize: function () , render: function () var someHTML = "
Acesta este un HTML
"     ()); // Instantiati router-ul nou Router (); // Start (): var aView = new NewView (); istoricul de urmărire Backbone.history.start ();

Mergeți la serverul / browserul dvs. local, încărcați pagina și cererea dvs. ar trebui să fie difuzată!

Utilizând Backbone și jQuery simultan

Flexibilitatea backbone-ului permite folosirea de biblioteci de la terți pentru a manipula DOM. Un scenariu este atunci când doriți să utilizați jQuery și Backbone simultan pentru a manipula vizualizările. Mai jos este un exemplu actualizat.

var SomeView = Backbone.View.extend (// Manipula indirect DOM prin crearea conținutului HTML într-o // Backbone View render: function () var someHTML = "
Unele HTML
"; $ el.html (someHTML); retur acest lucru;, / / ​​Manipulați DOM direct din vizualizarea Backbone renderWithJQuery: function () var otherHTML ="
Alte HTML
"app (altHTML); / / poate să nu aibă sens să returneze 'this', // altă metodă de render, pentru a păstra lucrurile interesante specialRender: function () this. $ ('. gol "). adăugați (“Nu mai este gol!"); // returnați acest lucru;); // Mai târziu, în aplicația dvs. ... // creați vizualizarea var aView = new SomeView (); // modificați DOM pentru a reflecta vizualizarea nou creată $ ('. app'). (aView.render () el); // adăugați mai mult conținut direct la DOM utilizând jQuery în cadrul // a unui obiect de vizualizare Backbone aView.renderWithJQuery ();

Codul de mai sus va avea ca rezultat două paragrafe pe pagină. Primul paragraf conține "Unele coduri HTML". Al doilea paragraf conține "Alte HTML".

Pentru a testa înțelegerea dvs., inversați metodele de apel așa cum este acesta:

// SomeView este deja definit var aView = new SomeView (); aView.renderWithJQuery (); $ ( 'App') html (aView.render () el.).;

Codul de mai sus va avea ca rezultat un paragraf: "Unele HTML". În ambele cazuri, există și a 

element fără nimic în ea. Vom discuta acest lucru într-o clipă.

Manipularea eficientă a ferestrelor DOM în vizualizarea coloanei vertebrale

Înțelegerea magiei manipulării eficiente DOM (și traversal) necesită o înțelegere a acest lucru. $ el și acest lucru. $ (). Prin utilizarea acest lucru. $ el, vom manipula domenii DOM la conținutul conținut în vizualizare. Prin utilizarea acest lucru. $ (), am direcționarea domeniului DOM la arborele DOM în vizualizare.

Ca rezultat, în contextul Backbone, unele utilizări ale $ () (in loc de acest lucru. $ ()) ar putea să fie ineficientă. De exemplu, să presupunem că am vrut să traversăm DOM pentru a găsi un element. S-ar putea să folosim oricare dintre metodele comune de traversare DOM, inclusiv .găsi(), .(copii), .cel mai apropiat(), .primul(), si asa mai departe.

Dacă noi ști, a priori, că elementul pe care îl căutăm se află undeva în interiorul DOM-ului de vedere, atunci ar trebui să îl folosim acest lucru. $ () pentru a evita inutil căutarea unui copac DOM mai mare. Dacă elementul pe care îl căutăm este în afara DOM-ului de vizualizare, atunci va trebui să îl folosim $ ().

De exemplu, .specialRender () metoda utilizează traversal localizat DOM pentru a ne asigura că căutăm elemente cu clasă gol în contextul opiniei. Dacă este găsit, acesta stabilește conținutul HTML al acelor elemente pentru a include a deschidere și textul "Nu mai este gol".

Concluzie

În acest articol am analizat vederile Backbone, am discutat despre modul de afișare a opțiunilor Backbone în DOM și am explorat modul de a face Backbone să joace frumos cu alte biblioteci pe care ați putea dori să le folosiți pentru a manipula DOM. De asemenea, am învățat despre traversal DOM localizat și despre metodele identificate pentru a traversa eficient și ineficient DOM.

Următoarea parte a acestui articol se va aprofunda în mai multe exemple mai complicate de a obține mai multe biblioteci să colaboreze în manipularea DOM.