Noțiuni de bază în Ember.js Partea 3

Sper că începi să vezi că Ember.js este un cadru puternic, dar în același timp convingător. Am zgâriat doar suprafața; există mai multe de învățat înainte de a putea construi ceva cu adevărat util! Vom continua să folosim kitul Ember Starter Kit. În această parte a seriei, vom examina accesarea și gestionarea datelor în Ember.

Redarea cu date

În ultimul articol, am lucrat cu un set static de nume de culoare care au fost definite în cadrul unui controler:

App.IndexRoute = Ember.Route.extend (setupController: funcție (controler) controller.set ('conținut', ['roșu', 'galben', 'albastru']);

Acest lucru a permis controlorului să expună datele la index șablon. Este drăguț pentru un demo, dar în viața reală, sursa de date nu va fi o matrice codată greu.

Aici e locul modele intră. modele sunt reprezentări obiect ale datelor utilizate de aplicația dvs. Ar putea fi o matrice simplă sau date extrase dinamic dintr-un API RESTful JSON. Datele însăși sunt accesate prin referirea atributelor modelului. Deci, dacă ne uităm la un rezultat ca acesta:

"login": "rey", "id": 1, "vârstă": 45, "sex": "bărbat"

Atributele expuse în model sunt:

Logare
id
vârstă
sex

Datele în sine sunt accesate prin referirea atributelor modelului.

După cum vedeți din codul de mai sus, puteți defini un magazin static, dar veți folosi Ember.Object pentru a defini modelele dvs. de cele mai multe ori. Prin subclasare Ember.Object, veți putea să returnați datele (de exemplu printr-un apel Ajax) și să vă definiți modelul. Deși puteți seta în mod explicit datele într-un controler, este întotdeauna recomandat să creați un model pentru a adera la separarea preocupărilor și a celor mai bune practici de organizare a codurilor.

Alternativ, puteți utiliza un cadru de sora numit Ember Data. Este un API asemănător ORM și un magazin de persistență, dar trebuie să subliniez faptul că se află într-o stare de flux din această scriere. Are mult potențial, dar utilizează Ember.Object este mult mai sigur în acest moment. Robin Ward, co-fondator al Discursului, a scris o mare postare pe blog despre utilizarea lui Ember fără Ember Data. Ea conturează procesul lor, pe care îl voi distruge pentru tine.

Definirea modelelor dvs.

În exemplul următor, voi folosi API-ul neoficial Hacker News pentru a trage datele bazate pe JSON din resursa de știri. Aceste date vor fi stocate în modelul meu și ulterior folosite de un controler pentru a umple un șablon. Dacă ne uităm la datele returnate din API, putem înțelege proprietățile cu care vom lucra:

"nextId": null, "items": ["title": "Docker, Runtime Linux container: now open source", "url": "http://docker.io", id: 5445387 , "commentCount": 39, "puncte": 146, "postedAgo": "acum 2 ore", "postedBy": "shykes", "title": What's Wrong with Yahoo Purchase Summly "," url ":" http://hackingdistributed.com/2013/03/26/summly/ "," id ": 5445159," commentCount ": 99," puncte ": 133," postedAgo ":" în urmă "," postedBy ":" hoonose ",]," versiune ":" 1.0 "," cachedOnUTC ":" \ / Date (1364333188244) \ / "

Vreau să lucrez cu articole proprietate, care conține toate titlurile și informații de poveste. Dacă ați lucrat cu baze de date SQL, gândiți-vă la fiecare element al lui articole ca înregistrare și numele proprietăților (adică: titlu, URL-ul, id, etc) ca nume de câmp. Este important să grotezi aspectul, deoarece aceste nume de proprietăți vor fi folosite ca atribute ale obiectului nostru de model - ceea ce reprezintă o idee perfectă în crearea modelului.

Ember.Object este principala clasă de bază pentru toate obiectele Ember și o vom subclasa pentru a crea modelul folosind extinde() metodă.

Pentru a face acest lucru, vom adăuga următorul cod la js / app.js imediat după codul care definește App.IndexRoute:

App.Item = Ember.Object.extend ();

App.Item servește ca clasă de model pentru datele Hacker News, dar nu are metode de recuperare sau manipulare a acestor date. Deci, va trebui să le definim:

 AplicațieIntr-o clasă (all: function () return $ .getJSON ("http://api.ihackernews.com/page?format=jsonp&callback=?") .Then (funcția (răspuns) var items = ]; answer.items.forEach (funcție (element) items.push (App.Item.create (item));); return items;););

Să defalcăm acest cod. În primul rând, folosim Ember reopenClass () metodă pentru a adăuga noile noastre metode la App.Item de clasă, iar tu îi dai un obiect care conține metodele dorite. Pentru acest exemplu, avem nevoie doar de o metodă numită toate(): returnează toate titlurile de pe prima pagină a site-ului Hacker News. Deoarece jQuery face parte din afacerea cu Ember, avem la dispoziție Ajax API-ul simplu. API utilizează JSONP pentru a returna datele JSON; așa că, pot folosi doar $ .GetJSON () să faceți cererea pentru:

$ .GetJSON ( "http://api.ihackernews.com/page?format=jsonp&callback=?")

"Callback =?" spune jQuery că aceasta este o solicitare JSONP, iar datele (odată ce sunt preluate) sunt transmise unui handler de apel invers anonim, definit folosind funcțiile promise de jQuery:

.apoi (funcția (răspunsul) ...);

Pot să pompez cu ușurință datele mele JSON într-un obiect Ember.

raspuns parametrul conține datele JSON, permițându-vă să vă bucurați de înregistrări și să actualizați datele locale articole array cu instanțe de App.Item. În cele din urmă, vom întoarce matricea nou populată când toate() execută. Sunt multe cuvinte, așa că lasă-mă să rezum:

Creați noua clasă de modele prin subclasare Ember.Object utilizând extinde().
Adăugați metodele modelului utilizând reopenClass ().
Efectuați un apel Ajax pentru a vă recupera datele.
Faceți buclă peste datele dvs., creând un Articol obiect și împingând-o într-o matrice.
Returnați matricele atunci când se execută metoda.

Dacă vă reîmprospătați index.html, veți vedea că nimic nu sa schimbat. Acest lucru are sens deoarece modelul a fost definit doar; nu am accesat-o.

Expunerea datelor dvs.

Controlorii acționează ca proxy-uri, oferindu-vă acces la atributele modelului și permițând accesul la șabloane pentru a afișa dinamic afișajul. Pe lângă accesarea atributelor dintr-un model asociat, controlorii pot, de asemenea, să stocheze alte proprietăți ale aplicației care trebuie să persiste fără a salva pe un server.

În prezent, aplicația noastră are următorul controler (cel care definește un set de date static):

App.IndexRoute = Ember.Route.extend (setupController: funcție (controler) controller.set ('conținut', ['roșu', 'galben', 'albastru']);

Ne putem asocia direct modelul App.IndexRoute folosind model (AKA modelul cârlig):

App.IndexRoute = Ember.Route.extend (model: function () retur App.Item.all (););

Amintiți-vă că Ember definește controlorul dvs. dacă nu îl definiți în mod explicit, și asta se întâmplă în acest caz.

În spatele scenei, Ember creează IndexController ca un exemplu de Ember.ArrayController, și utilizează modelul specificat în model metodă.

Acum trebuie doar să actualizăm șablonul de index pentru a accesa noile atribute. Deschidere index.html, putem vedea următorul cod de șablon Handlebars:

#pentru orice element din model articol
 /fiecare

Cu o mică schimbare (adăugând titlu proprietate), putem vedea imediat titlurile returnate de la API-ul Hacker News:

Item.title

Dacă actualizați browserul acum, ar trebui să vedeți ceva similar cu următorul:

 Bun venit la Ember.js
 Persona este distribuită. Astăzi.
 21 de grafice care arată că prețurile de îngrijire a sănătății ale Americii sunt ridicole
 10 000 de conexiuni în timp real în timp real către Django
 Docker, timpul de execuție a containerului Linux: acum deschis-sursă
 Să spunem că FeedBurner se închide ...

Dacă doriți să afișați mai multe informații, pur și simplu adăugați mai multe proprietăți:

item.title - item.postedAgo de item.postedBy

Actualizați pentru a vedea actualizările pe care le-ați realizat. Aceasta este frumusețea Handlebars; este dificil să adăugați noi elemente de date la interfața cu utilizatorul.

După cum am menționat anterior, controlorii pot fi, de asemenea, utilizați pentru a defini atribute statice care trebuie să persiste pe tot parcursul vieții aplicației dvs. De exemplu, probabil aș dori să persist anumite conținuturi statice, cum ar fi:

App.IndexController = Ember.ObjectController.extend (headerName: 'Bun venit la aplicația Hacker News', appVersion: 2.1);

Aici, eu subclasa Ember.ObjectController pentru a crea un nou controler pentru mine index traseu și șablon pentru a lucra cu. Acum mă pot duce index.html și actualizați șablonul meu pentru a înlocui următoarele:

Bun venit la Ember.js

cu:

HeaderName

modele sunt reprezentări obiect ale datelor utilizate de aplicația dvs..

Manerele vor lua atributele specificate în controlerul meu și vor înlocui dinamic HeaderName înlocuitorul cu valoarea nominală. Este important să întăriți două lucruri:

Prin aderarea la convențiile de numire ale lui Ember, nu aveam nevoie să fac cablare pentru a putea folosi controlerul cu șablonul de index.
Chiar dacă am creat în mod explicit un IndexController, Ember este suficient de inteligent pentru a nu suprascrie modelul existent care a fost asociat prin intermediul traseului.

Acestea sunt lucruri destul de puternice și flexibile!

Urmărește ... Șabloane

Lucrul cu datele din Ember nu este dificil. În realitate, partea cea mai grea lucrează cu diferite API-uri care abundă pe web.

Faptul că pot pompa cu ușurință datele mele JSON într-un obiect Ember face gestionarea mult mai ușoară - deși nu am fost niciodată un mare fan al seturilor mari de date pe partea clientului, mai ales atunci când sunt reprezentate ca obiecte.

Este ceva de care va trebui să fac mai multe teste și sper că Ember Data face toate aceste lucruri triviale.

Cu aceasta am spus, am atins pe scurt temele din acest articol. Sunt foarte importante ... atât de mult încât vreau să abordez acest subiect în propriul articol. Prin urmare, în următorul articol, vom examina modul de utilizare a Handelbars pentru a construi interfața dvs. de utilizare și analiza diferitelor directive pe care le oferă cadrul templating.

Cod