Asigurați-o mai bună a coloanei vertebrale cu extensii

Backbone-ul devine din ce în ce mai popular ca un cadru de dezvoltare a aplicațiilor web. Împreună cu această popularitate vine nenumărate extensii și plugin-uri pentru a spori puterea cadrului și a completa găurile pe care alte persoane au simțit necesare umplere. Să aruncăm o privire la unele dintre cele mai bune alegeri.

Backbone.Marionette

Dezvoltat de Derick Bailey, această extensie este destul de mare și este preferatul meu personal. Mai degraba decat adaugand una sau doua caracteristici la Backbone, Derick a decis sa completeze toate cele mai mari gauri pe care le simtea ca exista. Iată ce spune el în dosarul readme al proiectului GitHub.

"Backbone.Marionette este o bibliotecă de aplicații complexe pentru Backbone.js, care are ca scop simplificarea construcției de aplicații JavaScript de mari dimensiuni. Este o colecție de modele comune de proiectare și implementare găsite în aplicațiile pe care eu (Derick Bailey) le construiesc cu Backbone , și include diverse piese inspirate de arhitecturi de aplicații compuse, cum ar fi cadrul "Prism" al Microsoft. "

Să aruncăm o privire mai atentă la ce ne oferă Marioneta:

Aplicație: Acesta este un obiect central pe care totul din aplicația dvs. îl poate comunica. Acesta oferă o modalitate de a configura rapid și ușor vizualizarea principală a aplicației dvs., un hub central al evenimentului pe care fiecare modul din aplicația dvs. îl poate comunica, astfel încât acestea să nu depindă una de cealaltă, iar inițializatorii pentru controlul cu granulație fină de modul în care cererea dvs. de cizme în sus.
module: Un mijloc de încapsulare a codului modulului și a denumirii acestor module pe obiectul aplicației centrale.
Vizualizări: Noi clase de vizualizare pentru a extinde această metodă nativă pentru curățare, astfel încât să nu ajungeți la scurgeri de memorie. De asemenea, conține boilerplate; pentru vizualizări simple, specificați pur și simplu șablonul și modelul și se ocupă de restul.
Colecții / Composite Vizualizări: Aici este pus în joc bitul "bibliotecă de aplicații compozite". Aceste două vizualizări vă permit să creați cu ușurință vederi care pot gestiona procesul de redare a tuturor vizualizărilor dintr-o colecție sau chiar o ierarhie imbricată de colecții și modele, cu un efort foarte mic.
Regiuni și planificări: O regiune este un obiect care se ocupă de toate lucrările de redare, răsturnare și închidere de vizualizări pentru un anumit loc din DOM. Un aspect este pur și simplu o viziune normală, care are, de asemenea, regiuni încorporate în el pentru manipularea subview-urilor.
AppRouter: Un nou tip de router care poate lua un controler pentru a gestiona volumul de lucru, astfel încât ruterul să poată conține doar configurația rutelor.
Evenimente: Extins de la proiectul Wreqr, Marionette face evenimentele Backbone chiar mai puternice pentru crearea de aplicații pe bază de evenimente pe scară largă.

Doar am zgâriat suprafața a ceea ce poate face Marioneta. Recomand cu siguranță că mă îndrept spre GitHub și le citesc documentația pe Wiki.

În plus, Andrew Burgess acoperă Marioneta în cursul lui Tuts + Premium Advanced Backbone Models and Techniques curs.

Backbone.Validation

Backbone.Validation este conceput pentru a umple o nișă mică a unei probleme: și anume validarea modelului. Există mai multe extensii de validare pentru Backbone, dar aceasta pare să fi obținut cel mai mult respect din partea comunității.

Mai degrabă decât de fapt de a fi nevoie să scrie o valida pentru modelele dvs., puteți crea un validare proprietate pentru modelele dvs., care este un obiect care specifică fiecare dintre atributele pe care doriți să le validați și o listă de reguli de validare pentru fiecare dintre acele atribute. De asemenea, puteți specifica mesajele de eroare pentru fiecare atribut și puteți transmite funcții personalizate pentru validarea unui singur atribut. Puteți vedea un exemplu de mai jos, care este modificat de la unul dintre exemplele de pe site-ul lor web.

 var SomeModel = Backbone.Model.extend (validation: name: required: true, 'address.street': required: true, 'address.zip':  [1, 80], email: model: 'email', // furnizați propriul mesaj de eroare msg: 'Introduceți o adresă de email validă', // funcția de validare personalizată pentru 'someAttribute' someAttribute: if (value! == 'somevalue') retur "Mesaj de eroare";);

Există nenumărate modele de validare și modele pe care le puteți verifica și există chiar și o modalitate de a extinde lista cu validatorii globali. Acest plugin Backbone nu face destul de distractiv validarea, dar cu siguranță elimină orice scuze pentru a nu adăuga în validare. Vă rugăm să vizitați site-ul lor pentru mai multe exemple și o explicație mai profundă pentru modul de utilizare a acestui instrument minunat.

Backbone.LayoutManager

Backbone.LayoutManager este vorba de îmbunătățirea viziunilor Backbone. Ca și Backbone.Marionette, acesta aduce un cod de curățare pentru a preveni scurgerile de memorie, manipulează toată boilerplate-ul și vă lasă doar cu configurație și cod specific aplicației. Spre deosebire de Marionetă, LayoutManager se concentrează în mod special pe Viziuni.

Deoarece LayoutManager se concentrează exclusiv pe Vizualizări, poate face mai mult pentru vizualizări decât face Marioneta. De exemplu, LayoutManager este capabil să facă redarea asincronă, în cazul în care doriți să încărcați dinamic șabloanele din fișiere externe.

LayoutManager, de asemenea, poate gestiona subview-uri, deși într-un mod foarte diferit de Marionette. Oricum, oricum, este în mare măsură o configurație, ceea ce face lucrurile extrem de simple și elimină 90% din munca pe care ar trebui să o faceți, dacă ați încerca să o implementați pe cont propriu. Uitați-vă mai jos pentru un exemplu simplu pentru adăugarea a trei subrevisări la o vizualizare:

 Backbone.Layout.extend (vizualizări: "header": new HeaderView (), "section": new ContentView (), "footer": new FooterView ());

Ca de obicei, asigurați-vă că vă referiți la pagina și documentația GitHub pentru a afla mai multe.

Backbone.ModelBinder

Backbone.ModelBinder creează legături între datele din modele și marcajul afișat de vizualizările dvs. Puteți face deja acest lucru prin legarea la schimbarea evenimentului pe modelele dvs. și redarea vizualizării din nou, dar ModelBinder este mai eficient și mai simplu de utilizat.

Uitați-vă la codul de mai jos:

 var MyView = Backbone.View.extend (template: _.template (myTemplate), initialize: function () // Old Backbone.js mod this.model.on ('schimbare', this.render, this) / sau noua cale Backbone 0.9.10+ this.listenTo (acest model, 'schimbare', this.render);, render: function () this. $ el.html (this.template (this.model. toJSON ())););

Problema cu această abordare este că oricând un singur atribut este schimbat, trebuie să redimensionăm întreaga imagine. De asemenea, cu fiecare render, trebuie să convertim modelul la JSON. În cele din urmă, dacă doriți ca legarea să fie bidirecțională (atunci când modelul actualizează, la fel și DOM și vice versa), atunci trebuie să adăugăm chiar și mai multă logică la vizualizare.

Acest exemplu folosea metoda Underscore șablon funcţie. Să presupunem că șablonul pe care l-am prezentat pare să fie:

  Nume Numele de familie HTML. ModelBinder va vedea valoarea lui Nume atribut pe intrare tag și va atribui automat valoarea modelului pentru acea proprietate la valoare atributul etichetei. De exemplu, primul intrare„s Nume este setat la "firstName". Când vom folosi ModelBinder, vom vedea asta și apoi vom seta acest lucru intrare„s valoare la modelul lui Nume proprietate.
 Mai jos, veți vedea cum exemplul nostru precedent ar face după trecerea la utilizarea ModelBinder. De asemenea, dați seama că legarea este bidirecțională, deci dacă intrare tag-urile sunt actualizate, modelul va fi actualizat automat pentru noi.
 Șablon HTML:
   Nume  Numele de familie  
 Vizualizare JavaScript:
  var MyView = Backbone.View.extend (template: myTemplate, initialize: function () // Fără legare aici, render: function () // Aruncați html în acest. $ el.html .template); // Folosiți ModelBinder pentru a lega modelul și a vizualiza modelBinder.bind (acest model, this.el););
 Acum avem șabloane HTML curate și avem nevoie de o singură linie de cod pentru a lega HTML-ul vizualizării și modelele împreună folosind modelBinder.bind. modelBinder.bind ia două argumente necesare și un argument opțional. Primul argument este modelul cu datele care vor fi legate de DOM. Al doilea este nodul DOM care va fi traversat recursiv, căutând legăturile de făcut. Argumentul final este a legare obiect care specifică reguli avansate pentru modul în care trebuie făcute legături, dacă nu vă place utilizarea implicită.
 ModelBinder poate fi folosit mai mult decât doar intrare Etichete. Funcționează pe orice element. Dacă elementul este un tip de formă de intrare, cum ar fi intrare, Selectați, sau textarea, va actualiza valorile acelui element, în consecință. Dacă vă legați de un element, cum ar fi a div sau deschidere, acesta va plasa datele modelului între etichetele de deschidere și închidere ale acelui element (de ex. [datele sunt aici]).
 Există mult mai multă putere în spatele Backbone.ModelBinder decât ceea ce am demonstrat aici, deci asigurați-vă că ați citit documentația despre depozitul GitHub pentru a afla totul despre el.
 
 Concluzie
 Asta face lucrurile. Am acoperit doar o mână de extensii și pluginuri, dar acestea sunt ceea ce consider că sunt cele mai utilizate.
 Peisajul din spate se schimbă în mod constant. Dacă doriți să vedeți o listă completă a diferitelor extensii de backbone care sunt disponibile, vizitați această pagină wiki, pe care echipa Backbone o actualizează periodic.



		
			
	   
	




Cod