Portal de informații de securitate. Crearea unei componente de interfață cu utilizatorul. Crearea componentelor modulare

Greu de învățat. Deși nici măcar atât. Conceptele Ember.js sunt greu de învățat și de înțeles. Mi se pare că orice curs de instruire Ember.js ar trebui să înceapă cu aceste cuvinte.

Sunt un dezvoltator care lucrează cu Ruby on Rails (anterior am programat în .NET și Python). Mi-a fost destul de greu să înțeleg magia care face ca Ember.js să funcționeze. Uneori vorbesc cu alți dezvoltatori începători care au luat (sau încearcă să ia) calea Ember.js - toate problemele lor încep pentru că nu înțeleg cum funcționează acest cadru.

Da, pe de o parte există documentație oficială care descrie în detaliu toate aspectele acestui cadru. Dar îi lipsește conceptul; pentru un dezvoltator începător, acestea sunt doar fragmente de informații împrăștiate aleatoriu. Din documentație, de exemplu, puteți afla că avem controlere, modele și vederi în arsenalul nostru (controller, model, vizualizare). Dar pentru a afla de ce sunt responsabili și cum funcționează, unui dezvoltator începător i se cere să pășească mai întâi pe o rake de câteva zeci de ori. În plus, pe lângă controlere, modele și vizualizări, Ember.js ne oferă un întreg pluton de obiecte pestrițe precum componente, șabloane, router și căi (componentă, șablon, router, rută).

Dar mai întâi lucrurile. Să începem antrenamentul Ember.js amintindu-ne că nu este un cadru MVC (model-view-controller); uita de asta. Da, Ember.js are controlere, modele și vederi șabloane, dar aici se termină similitudinea cu cadrele MVC. Ember.js este un cadru pentru scrierea aplicațiilor care rulează în browserul utilizatorului.

Aruncă o privire la următoarea diagramă, care o descrie în detaliu ciclu de viață cererea de a aplicație standard scris în Ember.js:

Stările aplicației dumneavoastră sunt descrise folosind adresa pe care o introduceți în bara de adrese a browserului dumneavoastră. Folosind o adresă, puteți salva starea aplicației dvs. sau chiar puteți partaja starea cu alți utilizatori, de exemplu trimițând unui coleg un link către sarcina specificaîn dispozitivul de urmărire a erorilor (aplicația arată problema - aceasta este starea acesteia).

Așa că imaginați-vă că o aplicație scrisă în Ember.js primește informații în care se află adresa bara de adresa a fost schimbat. Routerul interceptează aceste informații și încearcă să-și dea seama ce să facă cu ele în continuare.

OZN (mică digresiune lirică): Ember.js funcționează pe două principii. Regulile sunt deasupra configurațiilor (convenție peste configurație) și dacă Ember.js nu găsește obiectul așteptat, atunci îl creează singur pe baza sa regulile interne. Aici merită remarcat modul în care funcționează generatorul de cod Ember.js. Probabil că ești familiarizat cu generatoarele din alte cadre: ei creează un fișier cu cod și îl salvează pe disc. Spre deosebire de alte cadre, generatorul de cod din Ember.js creează un obiect numai atunci când are nevoie de el și îl păstrează în memorie. Odată ce un obiect nu mai este necesar, Ember.js îl distruge - acest principiu vă eliberează de un suport inutil.

Hai sa continuăm. Să presupunem că utilizatorul a solicitat calea /postări. Pe baza acestei solicitări, routerul va încerca să găsească următorul obiect din lanț după numele său - calea. După cum probabil ați ghicit deja, Ember.js va căuta un obiect de tip Route numit PostsRoute. Calea din Ember.js este responsabilă pentru furnizarea modelului controlerului.

Ember.js va căuta un model numit PostModel. Modelul descrie structura datelor stocate în stocarea dumneavoastră și logica de afaceri a obiectelor. Vă puteți gândi la un model ca la o clasă din care Ember.js creează obiecte care conțin date. Depozitul de date este doar un strat tehnic abstract care se află între model și server. Stocarea stochează date după ce Ember.js le preia de pe server.

După ce calea preia datele, le dă controlorului. Controller in în acest caz, se va numi PostsController. Este de remarcat faptul că nu există o legătură directă între controler și model; ei nu știu unul de celălalt și controlerului, în principiu, nu-i pasă ce model îi oferi. Controlerul este doar un decorator de date - le prelucrează înainte de a le oferi utilizatorului.

Ember.js preia apoi datele procesate de la controlor și le dă șablonului. Dar există un alt obiect care se află între controler și șablon - vizualizarea. Vederea, care în cazul nostru se va numi PostsView, îi spune lui Ember.js ce șablon să folosească pentru a acestei cereri. După regulă, Ember.js va folosi un șablon numit postări.

Feedback Utilizatorii pot interacționa cu aplicația noastră (poke butoane, trage elemente și se pot încurca cu dezvoltatorul în alte moduri disponibile utilizatorului). Ember.js face distincție între două tipuri de interacțiune a utilizatorului cu aplicația. Primul este așa-numitul. evenimente din browser nativ - faceți clic, trageți, plasați, mouseEnter, mouserLeave și așa mai departe. A doua cale sunt evenimentele care au un nume. Al doilea tip de eveniment este declanșat practic de un clic pe un element pe care este definit evenimentul dat.

Deci care este diferența, te întrebi? Sau ai vrut să întrebi. Primul tip de eveniment este gestionat exclusiv de vedere; Ember.js nu îi pasă pe ce buton face clic pe utilizator, principalul lucru este faptul că clicul a avut loc. Al doilea tip este declanșat numai după ce se face clic pe un anumit element și este procesat de controler. Dacă controlerul nu poate gestiona evenimentul, Ember.js încearcă să gestioneze evenimentul pe obiectul de rută înainte de a raporta o eroare.

Structura șablonului Lucrurile încep să devină și mai confuze odată ce începătorii învață că șabloanele Ember.js pot fi imbricate cu alte obiecte, declanșând astfel întregul ciclu din nou. Chiar nu este nimic în neregulă cu asta.

Pe acest momentȘtiți deja că un șablon are un context - un model, un controler și o vizualizare.

Să începem cu șabloane parțiale. Acesta este cel mai simplu obiect pe care îl puteți pune în șabloane (deși obiectul este probabil un nume prea mare pentru șabloanele parțiale). Ember.js va lua pur și simplu șablonul pe care îl specificați și îl va prezenta în șablonul părinte; în acest caz se va folosi contextul părintelui - i.e. într-un șablon parțial veți avea acces la modelul, controlerul și vizualizarea părinte. Mai simplu spus, toate evenimentele vor fi gestionate de vizualizarea și controlorul părintelui.

Vederea și componenta sunt destul de asemănătoare între ele (de fapt, vederea este clasa de părinți componentă). Vederea și componenta au ambele lor propriul șablon. În spatele vederii și componentei se află propriul său obiect. Diferența este de două puncte cheie. În primul rând, gestionarea evenimentelor - componenta în sine procesează evenimentele numite, iar vizualizarea le oferă pur și simplu șablonului părinte, care la rândul său le oferă controlerului. În al doilea rând, mediul - componenta este complet izolată și poate funcționa doar cu obiectele pe care i le oferiți; vizualizarea are, la rândul său, acces la toate obiectele disponibile pentru șablonul părinte. Din perspectiva contextului șablonului părinte, vizualizarea are acces la model și controler, dar are propriile sale propria viziune. Componenta este mai izolata si nu are acces la nimic.

Ultimul element este randamentul. Este cel mai complex dintre toate obiectele disponibile în șabloane. Când apelați redarea într-un șablon, trebuie să îi furnizați doi parametri - numele șablonului și modelul. Ember.js va găsi șablonul și, pe baza numelui șablonului, va găsi controlerul și vizualizarea. Apoi va oferi controlerului un model și după ce controlerul a procesat modelul, Ember.js îl va insera în șablon. Mai simplu spus, cu ajutorul randării poți asambla mai multe șabloane independente cu contexte complet diferite pe o singură pagină; randarea nu are acces la contextul șablonului părinte (rendarea are în schimb propriul său context) și toate evenimentele vor fi gestionate de controlerul de vizualizare și randare.

Sper că v-a plăcut introducerea teoretică la Ember.js. Dacă Ember.js vă interesează, atunci puteți continua să vă familiarizați cu el citind oficialul

Traducere

În zilele noastre, aplicațiile Javascript complexe pot fi văzute peste tot. În timp, acestea devin din ce în ce mai complexe și nu mai este acceptabil să scrieți pur și simplu un lanț de funcții de apel invers în jQuery. Programatorii Javascript învață treptat asta dezvoltatori obișnuiți cunosc de zeci de ani. Organizarea și eficiența pot juca un rol important în dezvoltare. Astfel, cadrele Javascript MVC precum Backbone, Knockout și Ember au apărut pentru a umple golul dintre dezvoltatorii începători, intermediari și experimentați. Ei ofera posibilități diferiteși funcționalitate care potrivite pentru diferite oameni, în funcție de nevoile lor.

Cred că sunt drăguță dezvoltator bun... departe de a fi cel mai bun, dar pot lucra cu tehnologiile existente, pe care îl folosesc în dezvoltările mele. Am urmărit aceste cadre și au venit Backbone și Ember pentru mine. M-am jucat cu Backbone, chiar și am cumpărat un tutorial video despre el. E bun, dar încă îmi este greu să mă forțez să gândesc ca el. Am auzit de Ember în urmă cu doar câteva luni și doar merge din ce în ce mai puternic. Oferă multe dintre funcțiile de care am nevoie și am decis să văd cum mi se potrivește. Ember oferă câteva caracteristici cheie pe care le consider foarte atractive, principala fiind legarea de date. Pur și simplu creați o variabilă și, atunci când valoarea acelei variabile se modifică, orice parte a aplicației dvs. care monitorizează acea variabilă este actualizată. Acest lucru și-ar găsi utilizarea, de exemplu, în chat-uri etc.

Pentru acum dezavantajul principal Ember în comparație cu Backbone este că acesta din urmă are multe tutoriale, articole și proiecte finalizate pe Github. În timp ce pe Ember, puteți găsi foarte puține materiale pe net care să arate imediat toate elementele interne, dar să rateze elementele de bază. Deci, scopul meu este să scriu un tutorial care să vă ajute să începeți să utilizați Ember acum. Ei bine, printre altele, scriu acest articol pentru a-mi consolida propriile cunoștințe.

Ember.js este construit pe arhitectura MVC (Model-View-Controller) și trebuie doar să vă împărțiți codul în 3 părți:

M = Model – similar cu o matrice. Aici sunt stocate datele care vor fi utilizate de aplicația dvs.
V = Vizualizarea este partea vizuală a aplicației dvs. - formulare, liste etc.
C = Controller – Gândiți-vă la controlor ca la un controlor de trafic. Gestionează interacțiunea dintre alte părți ale aplicației. Când utilizatorul face clic pe buton, controlerul determină ce vizualizare trebuie încărcată, care, la rândul său, determină ce model să folosească pentru a salva datele.

Să începem? Pentru a începe, descărcați setul de pornire Ember.js. Extrageți-l într-un director care poate fi accesat de browserul dvs. web. Deschideți index.html și js/app.js în preferințele dvs editor de text. În app.js adăugați următoarea linie:

Bun venit = Ember.Application.create();

Felicitări! Ai creat prima ta aplicație Ember! Deschideți index.html în browser și fiți încântați de noul dvs. site. Oh, stai, nu e nimic acolo... ce crezi despre asta? Nu a apărut nimic în afară de titlu și asta e grozav. Tot ceea ce s-a întâmplat este că Ember a creat o aplicație pe care o vei folosi pe tot parcursul tutorialului. Unii dezvoltatori preferă să numească asta spațiu de nume. Aceasta înseamnă pur și simplu că toate celelalte părți ale aplicației dvs. vor începe cu numele pe care l-ați ales. Acest lucru ajută la evitarea conflictelor de nume variabile și menține totul în ordine.

Există un lucru cu care majoritatea dezvoltatorilor jQuery sunt foarte obișnuiți - document.ready vechi. Ember oferă ceva similar acceptând un obiect opțional în metoda create. Adăugați codul, reîncărcați pagina și ar trebui să vedeți un mesaj de felicitări. bate-te pe cap...meriti!

Bun venit = Ember.Application.create(( gata: function())( alert("Ai facut-o!"); ) ));

Următorul lucru pe care trebuie să-l facem este să adăugăm un Model. Fiecare aplicație Ember poate avea mai multe modele și fiecare dintre ele este un tip de date unic. În unele cadre, un model este reprezentat ca o clasă. Practic, este doar o structură care ne spune cum să lucrăm cu acest obiect. Să creăm un model pentru unele dintre cărțile mele preferate.

Welcome.Book = Ember.Object.extend(( titlu: null,

Următorul lucru de care avem nevoie este un controler. Apropo, pe lângă controlul aplicației, controlorii din Ember transferă și date din model în vizualizare. Iată un controler simplu în Ember:

Welcome.booksController = Ember.ArrayController.create();

Nu este exact la fel cu crearea unui controler, dar aceasta creează un ArrayController care conține o matrice. Aici vor fi stocate informațiile despre cărțile noastre. Este acolo, pur și simplu nu o vezi. Puteți specifica în mod explicit conținutul matricei sau, de exemplu, îl puteți completa. Acest lucru se face prin trecerea unui obiect opțional la metoda de creare:

Welcome.booksController = Ember.ArrayController.create(( continut: ));

Acum avem un model și un controler, tot ce rămâne este să scriem vizualizarea. Vă amintiți când am spus că vizualizarea este partea vizuală a aplicației dvs.? Aceasta înseamnă că va fi localizat în fișierul index.html. Să scriem mai întâi prezentarea noastră și apoi să o discutăm. Chiar sub eticheta H1, adăugați următoarele:
((#view Ember.Button target="Welcome.booksController" action="loadBooks")) Încarcă cărți ((/view)) ((#collection contentBinding="Welcome.booksController" tagName="ul")) ((conținut .title)) - ((conținut.autor)), ((conținut.gen))((/Colectie))

Unul dintre lucrurile grozave despre Ember este că vine cu un motor de șablon încorporat numit Ghidon. Șabloanele sunt în esență magia de bază a Ember. De obicei, în șabloane înconjurați o variabilă cu un șir. În ghidon, aceasta este 2 bretele.

Ember și-a început viața ca o bibliotecă SproutCore dezvoltată de Apple ca bază pentru aplicațiile lor online, cum ar fi Mobile Me. SproutCore a inclus și un set de widget-uri care nu se găsesc în Ember. Ember include doar furnizarea de elemente de formular deoarece acestea pot fi foarte dinamice. În cazul șablonului sau vizualizării noastre, folosim butoanele Ember. Acest lucru îi permite să facă toată munca grea pentru noi. Este nevoie de o țintă (în cazul nostru, booksController) și de o acțiune. Deci, când cineva face clic pe butonul, Ember va lucra cu metoda loadBooks a obiectului Welcome.booksController.

A doua parte este puțin mai dificilă, dar sunt sigur că vă puteți da seama. În Ember, o colecție este pur și simplu un indicator către un grup de date, în cazul nostru din nou Welcome.booksController . La începutul articolului, am scris că datele legate este unul dintre motivele pentru care am fost interesat de Ember. Și aici îi putem vedea toată puterea. Conținutul indică pur și simplu variabila de conținut din booksController , în timp ce Binding este praful magic. Adăugarea de legare la sfârșitul majorității atributelor îi spune lui Ember că doriți să faceți legarea în două sensuri. Schimbați valoarea pe o parte și cealaltă se va actualiza. În cele din urmă, colecțiile vă permit să setați eticheta de bază, in cazul nostru este simplu listă cu puncte(etichetă UL).

Apropo, simbolurile # și / îi spun ghidonului că aceasta este doar o parte (bloc) a vizualizării.

În interiorul colecției se află „carnea” șabloanelor noastre. Observați cum amestecăm HTML și etichete în interiorul șabloanelor noastre. Convenabil, nu-i așa? O altă subtilitate este că Ember nu trebuie să specifice în mod explicit etichetele de deschidere sau de închidere pentru o listă. Le va adăuga automat, deoarece știe că folosim o listă cu marcatori. Lansați aplicația și veți vedea un buton singuratic care are nevoie de prieteni. Făcând clic pe buton, este mizerabil, deoarece nu avem încă o metodă loadBooks. Ce zici să-l adaugi și să încarci niște date?

Welcome.booksController = Ember.ArrayController.create(( continut: , loadBooks: function())( var self = this; $.getJSON("data/books.json", function(data) (data.forEach(function(element) ) ( self.pushObject(Welcome.Book.create(element)); )); )); ) ));

Vă amintiți când spuneam că modelele pot conține metode arbitrare? Totul din Ember poate conține cod arbitrar, inclusiv ArrayController. Acum, când încărcați pagina și faceți clic pe butonul „Încărcați cărți”, va fi apelată metoda loadBooks, care va încărca unele dintre cărțile mele preferate. Asta e tot pentru asta exemplu simplu. Sper că ți-a plăcut și îi dai lui Ember o șansă. Puteți

În zilele noastre, aplicațiile Javascript complexe pot fi văzute peste tot. În timp, acestea devin din ce în ce mai complexe și nu mai este acceptabil să scrieți pur și simplu un lanț de funcții de apel invers în jQuery. Programatorii Javascript învață treptat ceea ce dezvoltatorii obișnuiți știu de zeci de ani. Organizarea și eficiența pot juca un rol important în dezvoltare. Astfel, cadrele Javascript MVC precum Backbone, Knockout și Ember au apărut pentru a umple golul dintre dezvoltatorii începători, intermediari și experimentați. Ele oferă diferite caracteristici și funcționalități care se potrivesc oameni diferiti, în funcție de nevoile lor.

Mă consider un dezvoltator destul de bun... departe de a fi cel mai bun, dar pot lucra cu tehnologiile existente pe care le folosesc în dezvoltările mele. Am urmărit aceste cadre și au venit Backbone și Ember pentru mine. M-am jucat cu Backbone, chiar și am cumpărat un tutorial video despre el. E bun, dar încă îmi este greu să mă forțez să gândesc ca el. Am auzit de Ember cu doar câteva luni în urmă și doar merge din ce în ce mai puternic. Oferă multe dintre funcțiile de care am nevoie și am decis să văd cum mi se potrivește. Ember oferă câteva caracteristici cheie pe care le consider foarte atractive, principala fiind legarea de date. Pur și simplu creați o variabilă și, atunci când valoarea acelei variabile se modifică, orice parte a aplicației dvs. care monitorizează acea variabilă este actualizată. Acest lucru și-ar găsi utilizarea, de exemplu, în chat-uri etc.

Momentan, principalul dezavantaj al lui Ember în comparație cu Backbone este că acesta din urmă are o mulțime de tutoriale, articole și proiecte gata făcute pe Github. În timp ce pe Ember, puteți găsi foarte puține materiale pe net care să arate imediat toate elementele interne, dar să rateze elementele de bază. Deci, scopul meu este să scriu un tutorial care să vă ajute să începeți să utilizați Ember acum. Ei bine, printre altele, scriu acest articol pentru a-mi consolida propriile cunoștințe.

Ember.js este construit pe arhitectura MVC (Model-View-Controller) și trebuie doar să vă împărțiți codul în 3 părți:

M = Model – similar cu o matrice. Aici sunt stocate datele care vor fi utilizate de aplicația dvs.
V = Vizualizarea este partea vizuală a aplicației dvs. - formulare, liste etc.
C = Controller – Gândiți-vă la controlor ca la un controlor de trafic. Gestionează interacțiunea dintre alte părți ale aplicației. Când utilizatorul face clic pe buton, controlerul determină ce vizualizare trebuie încărcată, care, la rândul său, determină ce model să folosească pentru a salva datele.

Să începem? Pentru a începe, descărcați setul de pornire Ember.js. Extrageți-l într-un director care poate fi accesat de browserul dvs. web. Deschideți index.html și js/app.js în editorul de text preferat. În app.js adăugați următoarea linie:

Bun venit = Ember.Application.create();

Bun venit = Ember.Application.create(( gata: function())( alert("Ai facut-o!"); ) ));

Welcome.Book = Ember.Object.extend(( titlu: null, autor: null, gen: null ));

Welcome.booksController = Ember.ArrayController.create();

Welcome.booksController = Ember.ArrayController.create(( continut: ));

((#view Ember.Button target="Welcome.booksController" action="loadBooks")) Încarcă cărți ((/view)) ((#collection contentBinding="Welcome.booksController" tagName="ul")) ((conținut .title)) - ((conținut.autor)), ((conținut.gen))((/Colectie))

A doua parte este puțin mai dificilă, dar sunt sigur că vă puteți da seama. În Ember, o colecție este pur și simplu un indicator către un grup de date, în cazul nostru din nou Welcome.booksController . La începutul articolului, am scris că datele legate este unul dintre motivele pentru care am fost interesat de Ember. Și aici îi putem vedea toată puterea. Conținutul indică pur și simplu variabila de conținut din booksController , în timp ce Binding este praful magic. Adăugarea de legare la sfârșitul majorității atributelor îi spune lui Ember că doriți să faceți legarea în două sensuri. Schimbați valoarea pe o parte și cealaltă se va actualiza. În cele din urmă, colecțiile vă permit să setați o etichetă de bază, care în cazul nostru este pur și simplu o listă cu marcatori (etichetă UL).

Apropo, simbolurile # și / îi spun ghidonului că aceasta este doar o parte (bloc) a vizualizării.

Vă amintiți când spuneam că modelele pot conține metode arbitrare? Totul din Ember poate conține cod arbitrar, inclusiv ArrayController. Acum, când încărcați pagina și faceți clic pe butonul „Încărcați cărți”, va fi apelată metoda loadBooks, care va încărca unele dintre cărțile mele preferate. Asta e pentru acest exemplu simplu. Sper că ți-a plăcut și îi dai lui Ember o șansă. Puteți descărca exemplul de cod sursă pe Github.

Așteaptă încă un minut. Dacă ești ca mine, mai ai întrebări. Multe întrebări. Am scris acest articol pentru că aveam întrebări și mi-a luat ore întregi să găsesc răspunsuri. Cele mai multe dintre întrebările pe care le-am avut au primit de fapt răspunsul în acest articol. Dacă mai aveți întrebări, atunci puteți. Dacă nu știu răspunsul, îl voi găsi și îți voi răspunde.

În acest moment există un număr mare Biblioteci JavaScript, conceput pentru a manipula DOM. Cu toate acestea, când vine vorba de necesitatea de a construi o aplicație cu o singură pagină, multe cadre sunt uimite.

Nu înseamnă că bibliotecile precum jQuery nu pot fi folosite pentru a construi aplicații complexe cu o singură pagină. Ele au fost pur și simplu create în alte scopuri și pot gestiona doar stări, interfețe și rute folosind plugin-uri speciale. De acord că acesta nu este cel mai mult Cea mai bună decizie. În opinia mea, pentru a rezolva o problemă trebuie să utilizați instrumentele adecvate.

Ember.js este exact ceea ce avem nevoie atunci când vine vorba de aplicații complexe cu o singură pagină. Cu ajutorul lui, puteți crea aplicatii complexe. Dezvoltatorii l-au bazat pe capacitatea de a lucra conform principiului MVC.

Scopul principal al acestor articole va fi acela de a cunoaște Ember.js, diferitele sale aspecte și capabilități. Astăzi vom începe cu concepte generale, dar în viitor vom începe să implementăm exemple.

Să începem!

Bazele

Primul lucru pe care trebuie să-l înțelegeți este că Ember.js este un cadru pentru crearea de site-uri web netradiționale. Framework-uri precum jQuery și Mootools sunt mai potrivite pentru site-urile web clasice. Aplicațiile construite pe Ember.js seamănă mai mult cu aplicațiile desktop.

După cum am menționat mai devreme, Ember.js folosește MVC ca sistem de distribuție a codului. Dacă nu știi nimic despre MVC, atunci trebuie să citești cel mai mult articol simplu, unde este descrisă lucrarea conform acestei scheme. Dacă ați mai folosit Backbone.js, atunci Ember.js nu vă va fi greu de înțeles.

Șabloanele sunt foarte frecvente în Ember.js și sunt alimentate de biblioteca Handlebars. Cu ajutorul acestuia, putem scrie șabloane pentru a genera cod HTML dinamic. Folosind Ember.js, vom transfera date în șablon. Mai jos este un exemplu de șablon pentru afișarea utilizatorilor într-o listă neordonată:

Bună, ((nume))!

Cuvântul cheie #each înseamnă o buclă obișnuită care va trece prin înregistrările din variabila people. Cu expresii precum ((nume)), vom extrage informatie necesara. Mai mult exemple complexe, vom analiza mai târziu.

Ghidonul este un motor de șablon foarte bun care poate fi folosit separat de Ember.js. Puteți găsi mai multe informații pe site-ul lor oficial.

Se instalează Ember

Ember.js este alimentat de alte biblioteci, așa că va trebui să includeți jQuery și ghidon. Stop! Nu am spus mai devreme că jQuery și Ember sunt destinate unor scopuri diferite? Da, dar în realitate situația arată puțin diferit: echipa de dezvoltare a decis să nu reinventeze roata. Au ales jQuery să facă ceea ce face cel mai bine: să manipuleze DOM. Au fost ghidați de gânduri similare atunci când au conectat Ghidon.

De fapt, nu trebuie să mergeți pe site-uri diferite pentru a obține link-urile bibliotecii de care aveți nevoie. Puteți găsi tot ce aveți nevoie pe pagina Ember.js de pe Github. Descărcați Starter-kit și obțineți:

Ember 1.0 RC1
Ghidon 1.0 RC3
jQuery 1.9.1

Toate aceste fișiere sunt distribuite imediat în foldere. Pentru aplicația noastră, cel mai bine este să creați propriul dosar. Să-i spunem app.js:

Caracteristici Ember

Înainte de a scrie orice cod, este mai bine să cunoașteți mai întâi caracteristicile de bază ale Ember.js

Șabloane

După cum am spus mai devreme, atunci când lucrați cu Ember, șabloanele sunt adesea folosite. Iată un exemplu de conectare a unui șablon:

((prenume)) ((nume))

Toate acestea le scriem direct document HTML. Apoi, când pagina se lansează, Ember își va porni mecanismele și toate șabloanele vor fi umplute cu informații. În acest exemplu, imprimăm valorile a două variabile: ((prenume)) și ((nume)).

Trasee

Routerul ajută la reacția la modificările stării aplicației și la conectare resursele necesare, în funcție de navigarea paginii. Operațiuni posibile: extragerea datelor din model, transmiterea acestora către controlere, vizualizări și șabloane.

Rutarea se realizează prin crearea de rute pentru anumite părți ale aplicației dvs. Rutele definesc secțiuni ale aplicației dvs., precum și adresele URL asociate acestora. URL-ul este obiectul cheie pentru a determina ce stare trebuie să fie afișată aplicația pentru utilizator.

App.Router.map(function() ( this.route("despre"); // Ne duce la "/despre" ));

Comportamentul rutei (transferul datelor din model) este definit folosind un obiect Ember global care este responsabil pentru navigarea aplicației. Un exemplu de extragere a datelor dintr-un model arată astfel:

App.EmployeesRoute = Ember.Route.extend(( model: function() ( return App.Employee.find(); ) ));

De îndată ce utilizatorul ajunge la adresa „/angajați”, routerul va efectua un apel către model și va scoate o listă de angajați.

Modele

Modelele sunt destinate acceptarii sau returnarii reprezentări de obiecte datele care sunt utilizate în aplicația noastră. Ar putea fi doar o matrice sau un răspuns JSON de la o terță parte fișier PHP. Biblioteca Ember Data oferă un API bun pentru maparea și actualizarea datelor.

Controlorii

Controlerele sunt concepute pentru a stoca obiecte și a interacționa cu modelele. Aceștia acționează ca intermediari, accesând modelul și trecând date către vizualizări și șabloane. Șabloanele trebuie să fie întotdeauna conectate la controler.

Ar trebui să știți că controlorul este proiectat să distribuie datele pe care le primește de la model.

În controlere, puteți înregistra alte date de care are nevoie aplicația, dar nu trebuie trimise la backend pentru stocare.

Reprezentare

În Ember.js, vizualizările sunt concepute pentru a urmări evenimentele utilizatorilor și a le transforma în ceea ce trebuie să reacționeze aplicația dvs. Dacă utilizatorul face clic pe butonul pentru a șterge un contact, vizualizarea va urmări acest eveniment și va spune aplicației în ce stare ar trebui să ajungă.

Reguli de denumire

Folosind Ember.js, puteți reduce cantitatea de cod prin configurarea unui sistem de denumire a obiectelor pentru dvs. În funcție de modul în care denumești traseul, va depinde de numele controlerului, modelului, vizualizării și șablonului. De exemplu, am creat ruta „angajați”:

App.Router.map(funcție() ( this.resource(„angajați”); ));

Îmi voi denumi componentele astfel:

Traseu: App.EmployeesRoute
Controller: App.EmployeesController
Model: App.Angajat
Vizualizare: App.EmployeesView
Model: angajați

Această convenție de denumire este convenabilă din mai multe motive. În primul rând, vedem imediat relația semantică dintre componente. În al doilea rând, Ember va putea crea în mod independent obiecte care vor lipsi. Toate acestea sunt posibile atunci când aplicația este inițializată:

Var App = Ember.Application.create();

O linie definește relațiile dintre controlere, obiecte, vederi și șabloane:

Traseu: App.ApplicationRoute
Controler: App.ApplicationController
Vizualizare: App.ApplicationView
Șablon: aplicație

Când navighează la „/angajați”, Ember activează alte resurse:

App.AngajațiiRoute
App.EmployeesController
șablon angajați

Dacă nu există astfel de obiecte în aplicație, Ember le va crea, dar nu va scoate nimic până când nu creați un model care returnează datele pentru ieșire. Acesta este motivul pentru care convențiile de denumire a componentelor sunt foarte importante. Acesta îl va ajuta pe Ember să determine ce resurse să se conecteze fără configurare manuală.

Ce urmeaza?

Asta e tot pentru azi. Ne-am familiarizat cu Ember.js și componentele sale. În următoarele părți ale acestei serii de articole ne vom ocupa uz practic această bibliotecă și în practică vom încerca mult din ceea ce ne oferă Ember.