Noțiuni de bază în Ember Partea 4

În tutorialul meu anterior, am atins modul de utilizare Ember.Object pentru a defini modelele dvs. și pentru a lucra cu seturi de date. În această secțiune, vom examina mai atent modul în care Ember folosește cadrul templating Handlebars pentru a defini interfața de utilizare a aplicației.

Șabloane de pe partea clientului

Majoritatea dezvoltatorilor din partea serverului sunt utilizați pentru a utiliza șabloane pentru a defini marcarea care va fi umplută dinamic în zbor. Dacă ați folosit vreodată ASP.NET, ColdFusion, PHP sau Rails, atunci este destul de mult sigur că știi despre ce vorbesc.

Șablonul JavaScript de pe partea clientului a decolat într-adevăr din ultima vreme, mai ales datorită faptului că se concentrează pe construirea mai multor experiențe de tip desktop. Aceasta înseamnă că mai mult de prelucrare se face pe partea clientului, datele fiind în principal trasate prin intermediul cererilor API de pe server.

Îmi amintesc că am scris despre șabloanele de pe partea clientului cu ceva timp în urmă când pluginul jQuery Template a fost lansat pentru prima oară. Aproape trei ani mai târziu, aceasta este încă cea mai citită postare de pe blogul meu, arătând cum a crescut interesul pentru templating pe partea clientului. De atunci, au fost lansate o serie de alte cadre, care oferă caracteristici bogate și comunități de susținere. Handlebars este una dintre opțiunile mai populare și cadrul ales de proiectul Ember pentru a-și alimenta nevoile de templitare. Acest lucru are sens deoarece Handlerbars a fost creat de co-fondatorul Ember.js și membru al echipei de bază, Yehuda Katz. Rețineți, totuși, că nu intenționez să fac comparații între cadrele templante și mă voi concentra strict asupra Handelbars, deoarece acesta este ceea ce Ember.js utilizează în mod implicit.

În articolele anterioare, am arătat câteva șabloane de bază în cod:

Două lucruri care stau la iveală sunt declarația de tip pentru eticheta scripturii și bretelele curl care acționează ca delimitatori pentru expresiile pe care Handlebars le va acționa. Aceasta este o sintaxă foarte tipică pe care o voi discuta în mai multe detalii în curând și veți folosi în mod consistent pe măsură ce construiți șabloanele Ember.

Sintaxa

În ciuda faptului că Handlebars folosește o sintaxă specială, la sfârșitul zilei, chiar lucrați în primul rând cu marcajul HTML standard. Handlebars servește pentru a injecta conținut în acest marcaj pentru a face datele utilizatorului. Ea face acest lucru prin parsarea expresiilor delimitate și înlocuirea lor cu datele pe care le-ați solicitat Handlebars să lucrați cu. În cazul lui Ember, Handlebars oferă cârligele și Ember le folosește. Aceste date provin în mod obișnuit de la controlerul dvs. (amintiți-vă că controlorii servesc drept interfață pentru modelele dvs.).

Primul lucru pe care orice șablon îl are este definirea unei definiții de tag script. Cei mai mulți dintre dvs. ați definit probabil etichete de script pentru a încărca biblioteca JavaScript. De fapt, ați făcut deja acest lucru pentru a încărca Handlebars în proiectul dvs. Ember:

Există o mică diferență cu utilizarea acesteia pentru a defini un șablon. Mai întâi, specificăm a tip atributul "text / x ghiduri". Acest tip este ignorată de browser, însă lasă textul disponibil pentru inspecție și permite Ember să identifice șabloanele din cadrul aplicației. În plus, Ember utilizează un atribut de date numit "date-template-name" pe care Ember îl poate utiliza pentru a asocia anumite părți ale aplicației dvs. cu un șablon. De exemplu, următoarea declarație definește un șablon cu numele "angajat":

Când cererea dvs. începe, Ember scanează DOM pentru type = "text / x-ghidoane, compilează șabloanele pe care le găsește și le stochează într-o proprietate a obiectului Ember, numită Ember.TEMPLATES pe care o folosește pentru a afla ce trebuie să facă pentru un anumit traseu. Acesta este motivul pentru care convențiile de numire a lui Ember sunt atât de importante. În exemplul de mai sus, acest șablon va fi asociat automat traseului și controlerului angajatului pe care l-ați creat în aplicația dvs. Din nou, nu pot sublinia suficient cum aceste convenții de numire vă vor face mult mai ușor dezvoltarea.

Ember se bazează pe adresele URL pentru a determina resursele care trebuie utilizate și șabloanele care trebuie redate. Să presupunem că aveți o pagină de profil cu adresa URL "/ profile". Ai avea o resursă, numită profil care ar încărca resurse specifice pentru acea adresă URL (ca un obiect de ruta) și ați avea, de asemenea, un șablon cu același nume. Am revizuit definirea resurselor și a obiectelor de rutare în partea a 2 a seriei Ember, astfel încât, dacă nu sunteți sigur de ceea ce discut, asigurați-vă că ați reușit să vă reîmprospătați.

Când vizitați acea adresă URL, Ember știe că trebuie să încarce aceste resurse și să analizeze șablonul pe care l-ați definit. Aceasta face acest lucru prin convențiile sale de numire, știind că pentru că ai mers la "/ profile" trebuie să încarce resursele definite în profil, și face șablonul, numit date-template-name = "profil".

Traseu: ProfileRoute
Controlor: ProfileController
Format: profil (rețineți că este mică)

Trecând peste convențiile de numire din nou, veți vedea că ruta, controlerul și șablonul sunt legate între ele folosind același nume de URL, cu excepția faptului că șablonul este scris în litere mici. Aceasta este ceea ce permite lui Ember să gestioneze totul în spatele scenei, fără a fi nevoie să faceți o mulțime de cabluri în sus.

De asemenea, important de reținut este faptul că, dacă declarați un șablon fără a Date-șablon de nume- , Ember va presupune că este vorba de șablonul cu aplicație - cel folosit în mod obișnuit ca șablon pentru crearea elementelor interfeței utilizator, cum ar fi anteturi, subsoluri și navigație. Și dacă nu definiți în mod explicit un șablon pentru o aplicație sau chiar o resursă (de exemplu, pentru o adresă URL), Ember o face automat pentru a vă asigura stabilitatea și coerența aplicației.

Expresii

Următorul pas este să includeți marcajul și expresiile delimitate pe care le veți utiliza pentru a reprezenta datele dvs. Expresiile sunt delimitate, prin intermediul unor bretele duble, care le permit să fie ușor identificate și analizate cu datele transmise de controlorul dvs. Iată un exemplu:

În acest caz, Nume și numele de familie expresiile vor fi analizate de Ember și înlocuite cu date reale. În plus, Ember creează observatori, astfel încât datele dvs. să se schimbe, șablonul dvs. să fie actualizat automat, iar actualizările să se reflecte utilizatorului utilizatorului aplicației dvs..

Până acum, ți-am arătat un exemplu foarte simplu, dar acest lucru este:

Ember utilizează un atribut de tip special pentru a defini șabloanele.
Șabloanele utilizează marcarea standard împreună cu expresiile delimitate, care sunt analizate pe partea clientului.
Aceste șabloane au capabilități complete de setare a funcțiilor Handlebars.
Ember creează observatori pentru a actualiza dinamic datele de interfață utilizator, pe măsură ce se schimbă.

Acest lucru oferă o mulțime de flexibilitate în modul în care structurați interfața dvs. de utilizator. Să continuăm să ne uităm la caracteristicile disponibile.

Expresii avansate

Amintiți-vă că Ember folosește Handlebars, astfel încât să aveți acces la întreaga sa varietate de expresii aici. Expresiile expresive sunt o necesitate, pentru a face aproape orice folositor; Manerele oferă numeroase opțiuni.

Să spunem că am avut un set de date JSON care arăta astfel:

 "elemente": ["titlu": "Simulare pânză la îndemână în JavaScript", "url": "http://codepen.io/stuffit/pen/KrAwx", "id": 5592679, "commentCount" "puncte": 127, "postedAgo": "acum 1 oră", "postedBy": "NathanKP", "title": "Netflix acum mai mare decât HBO", "url": "http://qz.com / 77067 / netflix-acum-mai mare decât hbo / "," id ": 5592403," commentCount ": 68," points ": 96," postedAgo ":" edouard1234567 "

Dacă aș vrea să mă asigur că titlu datele sunt disponibile, aș putea adăuga o declarație condiționată "if" utilizând #dacă expresie:

 #if item.title item.title - item.postedAgo de item.postedBy
 /dacă

Aceasta verifică dacă item.title nu este nedefinită și continuă să proceseze expresiile ulterioare pentru titlu, postedAgo și Postat de expresii de date.

Din moment ce acest set de date conține mai mult de un "record", este sigur să presupunem că probabil că vom dori să buclem peste fiecare element de articol. Aici este locul #fiecare expresia intră în joc. Vă permite să enumerați o listă de obiecte. Din nou, având în vedere că șabloanele sunt o combinație de expresii de marcare și Handlebars, putem folosi #fiecare expresie a buclă prin fiecare element disponibil în obiectul nostru model Ember. Amintiți-vă că modelul Ember este derivat din controlerul, care este asociat șablonului, prin convențiile de numire ale lui Ember.

  #pentru fiecare element în model #if item.title item.title - item.postedAgo de item.postedBy
 / if / fiecare

Acest lucru ar face ceva asemănător cu:

  Tearable Cloth Simulation in JavaScript - acum 1 oră de NathanKP
 Netflix acum mai mare decât HBO - acum 2 ore de edouard1234567
 Baza de date rapidă apare din clasa MIT, GPU-urile și invenția studenților - acum 33 minute de signa11
  Conectarea unui iPad retina LCD la un PC - acum 6 ore de noonespecial

Avantajul distinct este specificarea implicită a observatorului Ember, care vă va actualiza datele după o actualizare.

Dacă expresia dvs. condiționată trebuie să fie mai complexă, veți dori să creați o proprietate calculată. Aceasta vă permite să creați o proprietate bazată pe o metodă care poate aplica date complexe asupra codului. Să presupunem că am vrut doar să afișez date care au avut titlul "Simulatoare de pânză în jar". Sunt câteva lucruri pe care trebuie să le configurez:

Am nevoie de o proprietate calculată pentru a scana fiecare element și spune-mi dacă se potrivește titlul
Trebuie să creez un controler care să poată fi utilizat de fiecare element care este enumerat în șablon
Trebuie să actualizez șablonul astfel încât să utilizeze acest controler pentru fiecare element
Primul lucru pe care trebuie să-l fac este să creez noul controler care să înfășoare fiecare element care este bucle și să creeze proprietatea calculată în ea:

 App.TitleController = Ember.ObjectController.extend (titleMatch: function () return this.get ('title') === "Simulare de pânză în java"; .property ());

Privind la cod, suntem subclasați Ember.ObjectController pentru a crea controlerul. Acesta este un controler care va înfășura fiecare element care este în buclă în șablonul nostru. Apoi, vom crea o metodă, numită titleMatch care utilizează obține() pentru a trage înapoi titlul curent, pentru ao compara cu textul pe care l-am definit și pentru a returna un boolean. În cele din urmă, Ember proprietate() metoda este numită pentru a defini titleMatch metoda ca o proprietate calculată.

Odată ce avem acest lucru, vom actualiza șablonul #fiecare expresie pentru a reprezenta fiecare element cu noul controler pe care l-am creat. Acest lucru se face folosind itemController directivă. Un lucru esențial de înțeles este asta itemController este o expresie-cheie în Ember, menită să asocieze un controler cu elemente ale unui șablon. Nu-l confunda pentru un nume efectiv de controlor (așa cum am făcut inițial). Numele controlerului este alocat itemController, asa:

  #există element în model itemController = "title" #if titluMatch foo.title - foo.postedAgo de foo.postedBy
 / if / fiecare

Din nou, convențiile de numire dictează că, atunci când atribuim nume în șabloane, folosim litere mici. În acest caz, noi atribuim TitleController la itemController.

Acum, pe măsură ce fiecare element este buclezat, proprietatea calculată, titleMatch, este folosit pentru a evalua datele de titlu și de afișare dacă se potrivește.

Legarea datelor la elemente

Crearea șabloanelor dinamice nu înseamnă doar scuiparea textului. Există momente în care aspectul UI trebuie să fie afectat de prelucrarea datelor. Afișarea unei imagini sau crearea unei legături sunt exemple excelente ale acestui lucru.

Legarea datelor către un element necesită utilizarea unor ajutoare speciale Ember care ajută la definirea contextului unui atribut, precum și asigurarea faptului că atributele sunt actualizate corespunzător când datele se schimbă. Pentru atributele elementului, BindAttr helper este folosit pentru a completa valorile unui atribut. Dacă este necesar să specificăm dinamic adresa URL a unei imagini, am folosi următoarea sintaxă:

Același lucru se poate face și pentru atributele care nu primesc o valoare, cum ar fi invalid:

În acest caz, isAdminstrator ar putea fi o proprietate calculată bazată pe o metodă din controler, sau doar o proprietate obișnuită a obiectului, oferindu-vă o mare flexibilitate în definirea condițiilor de dezactivare a casetei de selectare. Această flexibilitate trece și la definirea numelor claselor. Dacă aș vrea să folosesc o declarație condiționată pentru a defini dacă o clasă ar trebui aplicată elementului meu, aș putea folosi următorul cod:

  Avertizare!

În funcție de starea booleană, marcajul meu ar fi fie:

  Avertizare!

Pentru o Adevărat condiție sau:

  Avertizare!

Pentru o fals condiție. Rețineți că, atunci când am specificat isUrgent pentru clasă, Ember a dasierat numele și a făcut clasa ca este urgentă. Dacă preferați să specificați propria clasă pe baza rezultatelor, puteți folosi o expresie condiționată similară unei instrucțiuni ternare:

Aceasta se va întoarce urgent sau normal pentru clasă, pe baza valorii condiționale a isUrgent.

Cunoașteți șabloanele

Șabloanele vor sta la baza interfeței dvs. de utilizator, deci va fi important să vă petreceți timpul citind documentele de la ambele site-uri Ember și Handlebars pentru a vă simți bine pentru puterea lor globală. Chiar dacă nu utilizați Ember, Handlebars este un cadru minunat pentru a vă folosi zi de zi și merită investiția în învățarea cum să o utilizați.

Gabriel Manricks a scris un tutorial grozav despre Handlebars aici pe Nettuts + pe care îl puteți folosi pentru a obține viteza pe cadru.

Cod