Share
Nota Editorului: Echipa Ember.js sa mutat la un program de lansare expediată și de la data publicării se află pe versiunea 1.2.0. Acest tutorial a fost scris înainte de v1.0, dar multe dintre concepte sunt încă aplicabile. Facem tot ce ne stă în putere pentru a impune conținuturi în timp util, iar aceste situații se întâmplă din timp în timp. Vom lucra pentru a actualiza acest lucru în viitor.
În partea a treia a seriei Ember, ți-am arătat cum poți interacționa cu datele folosind Ember Ember.Object clasa principală de bază pentru a crea obiecte care definesc metodele și proprietățile care acționează ca un înveliș pentru datele dvs. Iată un exemplu:
Accentsconagua
App.Item = Ember.Object.extend (); AplicațieImplementareClass (all: function () return $ .getJSON ('http://api.ihackernews.com/page?format=jsonp&callback=?') .Then (funcție (răspuns) var items = [ ]; answer.items.forEach (funcția (element) items.push (App.Item.create (item));); trimiterea elementelor;); În acest cod, am subclasa Ember.Object folosind "extinde()"și să creeze o metodă definită de utilizator numită"toate()"care face o cerere pentru Hacker News pentru rezultatele JSON formatate din fluxul său de știri.
Deși această metodă funcționează cu siguranță și este chiar promovată de Discursul bazat pe Ember ca mod de a face acest lucru, tu scoateți carnea și expuneți API-ul cu care doriți să trimiteți datele. Cele mai multe cadre MVC au tendința de a include capabilități asemănătoare ORM, astfel încât dacă sunteți obișnuiți cu Rails, de exemplu, ați fi foarte familiarizați cu beneficiile ActiveRecord care ajută la gestionarea și ridicarea greutăților de interacțiune cu datele.
Echipa Ember a vrut să facă același lucru, dar accentul principal a fost acela de a obține o versiune stabilă v1 a cadrului lor principal, pentru a se asigura că componentele complementare ar putea fi construite pe o bază stabilă. De fapt, aplaud acest lucru și am menționat de fapt faptul că ar trebui să țineți cont de utilizarea datelor Ember din cauza asta.
Acum, că Ember RC8 este în afara și v1 pare să se apropie de colț, am simțit că este un moment bun pentru a începe explorarea Ember Data și a vedea ce oferă.
Primul lucru pe care vreau să-l subliniez este că Ember Data este o lucrare în desfășurare și, în același fel în care a început Ember, va vedea probabil o serie de schimbări de rupere a API în următoarele câteva luni. În timp ce acest lucru nu este ideal, este important să începeți să vă uitați la modul în care ați structura aplicațiile utilizând biblioteca. Pentru a vă oferi o bună descriere a ceea ce oferă Ember Data, am copiat în descrierea bine scrisă de pe pagina GitHub:
Ember Data este o bibliotecă pentru încărcarea datelor dintr-un strat de persistență (cum ar fi un JSON API), maparea acestor date la un set de modele din cadrul aplicației dvs. client, actualizarea acelor modele, apoi salvarea modificărilor înapoi la un strat de persistență. Acesta oferă multe dintre facilitățile pe care le găsiți în ORM-uri de pe server, cum ar fi ActiveRecord, dar este proiectat special pentru mediul unic de JavaScript în browser.
Așa cum am menționat, este menită să abrozeze o mulțime de complexități de lucru cu datele.
Dacă ați citit tutorialele mele anterioare, ar trebui să fiți foarte familiarizați cu modul de configurare a unei pagini pentru a mobiliza Ember. Dacă nu ați făcut acest lucru, ar trebui să mergeți la pagina principală Ember.js și să luați Kitul de pornire. Puteți să-l găsiți chiar în mijlocul paginii așa cum este afișat printr-un buton mare. Aceasta vă va oferi cea mai actualizată versiune Ember de care veți avea nevoie pentru a lucra cu Ember Data. Cel mai simplu mod de a obține o versiune descărcabilă a datelor Ember este să accesați documentele API pentru modele, alegeți partea de jos și descărcați biblioteca. În plus, puteți merge la construiește pentru a scana cele mai recente construcții ale oricărei biblioteci legate de Ember.
Adăugarea datelor Ember este la fel de simplă ca adăugarea altui fișier JavaScript la mixul de mai jos:
Acest lucru vă oferă acum accesul la obiectele, metoda și proprietățile Ember Data.
Fără nicio configurare, Ember Data poate încărca și salva înregistrările și relațiile difuzate printr-un API RESTful JSON, cu condiția să respecte anumite convenții.
Ember utilizează un obiect special numit a magazin pentru a încărca modele și pentru a prelua date și se bazează pe Ember DS.Store clasă. Acesta este modul în care ați defini un magazin nou:
App.Store = DS.Store.extend (...);
Dacă vă amintiți din articolele anterioare, "App" este doar un spațiu de nume creat pentru obiectele, metodele și proprietățile pentru aplicația de nivel aplicație. Deși nu este un cuvânt rezervat în Ember, v-aș îndemna să folosiți același nume ca aproape orice tutorial și demo pe care l-am văzut folosindu-l pentru consistență.
Magazinul pe care îl creați va păstra modelele pe care le creați și va servi ca interfață cu serverul pe care îl definiți în adaptor. Implicit, Ember Data creează și asociază magazinului dvs. un adaptor REST bazat pe DS.RestAdapter clasă. Dacă ați definit codul de mai sus, ați avea un adaptor asociat acestuia în mod implicit. Magie magică la cele mai bune. De asemenea, puteți utiliza un adaptor Fixture dacă lucrați cu date în memorie (de exemplu, JSON pe care îl încărcați de la cod), dar deoarece aceasta se referă la efectuarea de apeluri API, adaptorul REST este mai potrivit.
De asemenea, puteți defini propriul adaptor pentru acele situații în care aveți nevoie de mai mult control personalizat pentru a interfața cu un server utilizând adaptor proprietate în declarația magazinului dvs .:
App.Store = DS.Store.extend (adaptor: 'App.MyCustomAdapter');
Codul pe care l-am enumerat în partea de sus a acestui tutorial a fost un exemplu de utilizare Ember.Object pentru a crea modele pentru aplicația dvs. Lucrurile se schimbă puțin când definiți modele prin intermediul datelor Ember. Data Ember furnizează un alt obiect numit DS.Model care vă subclasa pentru fiecare model pe care doriți să-l creați. De exemplu, luând codul de mai sus:
App.Item = Ember.Object.extend ();
Ar arata acum:
App.Item = DS.Model.Extend ()
Nu este o diferență mare în ceea ce privește aspectul, ci o mare diferență în termeni de funcționalitate, deoarece aveți acum acces la capabilitățile adaptorului REST, precum și la relațiile integrate ale lui Ember Data cum ar fi unul la unul, unul la mulți și altele. Principalul beneficiu, totuși, este că Ember Data oferă cârligelor pentru a interacționa cu datele dvs. prin intermediul modelelor dvs., spre deosebire de faptul că trebuie să vă răsuciți. Referindu-se din nou la codul de mai sus:
AplicațieImplementareClass (all: function () return $ .getJSON ('http://api.ihackernews.com/page?format=jsonp&callback=?') .Then (funcție (răspuns) var items = [ ]; response.items.forEach (funcție (element) items.push (App.Item.create (item));); returneaza lucrurile; ); În timp ce trebuia să îmi creez propria metodă pentru a returna toate rezultatele de la apelul meu JSON, Ember Data oferă o găsi() care face exact acest lucru și care servește și pentru filtrarea rezultatelor. Deci, în esență, tot ce trebuie să fac este să fac următorul apel pentru a reveni la toate înregistrările mele:
App.Item.find ();
găsi() metoda va trimite o solicitare Ajax la adresa URL.
Aceasta este exact ceea ce atrage atât de mulți dezvoltatori către Ember; preocuparea acordată pentru a face lucrurile mai ușoare.
Un lucru care trebuie păstrat în minte este că este important să definiți în cadrul modelului atributele pe care aveți de gând să le utilizați ulterior (de exemplu, în șabloanele dvs.). Acest lucru este ușor de făcut:
App.Post = DS.Model.extend (titlu: DS.attr ('string')); În aplicația mea demo, vreau să utilizez proprietatea de titlu returnată prin JSON, astfel încât să utilizez attr () , specificați care sunt atributele pe care le are la dispoziție un model.
Un lucru pe care vreau să-l menționez e că Ember Data este incredibil pretențios despre structura JSON returnată. Deoarece Ember folosește structuri de directoare pentru a identifica anumite părți ale aplicațiilor dvs. (amintiți-vă convențiile de numire pe care le-am discutat în primul meu articol Ember?), Face anumite ipoteze cu privire la modul în care sunt structurate datele JSON. Este necesar să existe o rădăcină numită care va fi utilizată pentru a identifica datele care trebuie returnate. Iată ce vreau să spun:
'posts': 'id': 1, 'title': 'Un prieten de-al meu tocmai a postat acest mesaj', 'url': 'http://i.imgur.com/9pw20NY.jpg'] [js]Dacă ați fi definit-o astfel:
[js] 'id': '1', 'title': 'Un prieten de-al meu a postat acest mesaj', 'url': 'http://i.imgur.com/9pw20NY.jpg', 'id': '2', 'title': 'Un prieten de-al meu a postat acest mesaj', 'url': 'http://i.imgur.com/9pw20NY.jpg',
Ember Data ar fi bătut în totalitate și ar fi aruncat următoarea eroare:
Serverul dvs. a returnat un hash cu codul cheie, dar nu aveți nicio cartografiere pentru el.
Motivul este că, deoarece modelul este numit "App.Post", Ember Data se așteaptă să găsească o adresă URL numită "mesaje" de la care va trage datele. Deci, dacă mi-am definit magazinul ca atare:
App.Store = DS.Store.extend (url: 'http: //emberdata.local');
și modelul meu așa:
App.Post = DS.Model.extend (titlu: DS.attr ('string')); Data Ember ar presupune că cererea Ajax făcută de găsi() metoda ar arăta astfel:
http: //emberdata.local/posts
Și dacă faceți o solicitare pentru un anumit cod (cum ar fi găsiți (12)), ar arăta astfel:
http: //emberdata.local/posts/12
Această problemă ma lovit, dar o căutare a găsit o mulțime de discuții despre asta. Dacă nu puteți seta rezultatele JSON în acest fel, atunci va trebui să creați un adaptor personalizat pentru a masura rezultatele pentru a le serializa în mod corespunzător înainte de a putea să le utilizați. Nu o acopăr aici, dar intenționez să explorez mai devreme acest lucru.
Am dorit intenționat să păstrez acest tutorial simplu pentru că știu că Ember Data se schimbă și am vrut să ofer o scurtă trecere în revistă a ceea ce a oferit. Așa că am dat peste o aplicație demo rapidă care folosește Ember Data pentru a extrage date JSON de la serverul meu local. Să ne uităm la cod.
Mai întâi creez spațiul de nume al aplicației (pe care îl faci pentru orice aplicație Ember):
// Creați aplicația noastră de aplicație = Ember.Application.create ();
Apoi, definesc magazinul de date și declar URL-ul de unde modelul va trage datele de la:
App.Store = DS.Store.extend (url: 'http: //emberdata.local';);
În model, specificăm atributul: titlu, pe care o voi folosi mai târziu în șablonul meu:
// Modelul nostru App.Post = DS.Model.extend (title: DS.attr ('string')); În cele din urmă, asociaz modelul cu traseul prin cârligul de model. Observați că folosesc metoda predefinită Ember Data găsi() să retrag imediat datele din JSON imediat ce aplicația a fost pornită:
// Traseul nostru implicit. App.IndexRoute = Ember.Route.extend (model: function () retur App.Post.find (););
În șablonul pentru pagina principală (index), folosesc #fiecare Ghid de ghidare pentru a examina rezultatele datelor mele JSON și a face titlul fiecăruia dintre postările mele:
Asta e! Nu apel Ajax pentru a face sau metode speciale pentru a lucra cu datele mele. Data Ember a avut grijă să facă apelul XHR și să stocheze datele.
Acum, acest lucru este incredibil de simplist și nu vreau să vă duc să credeți că sunt toți unicorn și câini de catelus. Pe parcursul procesului de lucru cu Ember Data, m-am trezit dorind să mă întorc la utilizare Ember.Object unde aveam mai mult control. Dar, de asemenea, îmi dau seama că se lucrează mult la îmbunătățirea datelor Ember, în special în modul în care gestionează diverse date. Deci, este important să începeți cel puțin procesul de înțelegere a funcționării acestui lucru și chiar să oferiți feedback constructiv echipei.
Așadar, vă îndemn să intrați și să începeți să vă grăbiți, mai ales cei care au un fundal puternic ORM și ar putea ajuta la modelarea direcției Ember Data. Acum este cel mai bun moment pentru a face asta.
