Accentsconagua

Komme inn i Ember.js Del 3

Kode
Share

Jeg håper at du begynner å se at Ember.js er et kraftig, men tilsynelatende rammeverk. Vi har bare riper på overflaten; det er mer å lære før vi kan bygge noe virkelig nyttig! Vi fortsetter å bruke Ember Starter Kit. I denne delen av serien vurderer vi tilgang til og håndtering av data innenfor Ember.

Spiller med data

I den siste artikkelen arbeidet vi med et statisk sett med fargenavn som ble definert i en kontroller:

App.IndexRoute = Ember.Route.extend (setupController: funksjon (controller) controller.set ('content', ['rød', 'gul', 'blå']););

Dette gjorde at kontrolleren kunne eksponere dataene til index mal. Det er søtt for en demo, men i virkeligheten vil vår datakilde ikke være et hardkodet array.

Dette er hvor modeller kommer inn. modeller er objektrepresentasjoner av dataene din søknad bruker. Det kan være et enkelt utvalg eller data som er dynamisk hentet fra en RESTful JSON API. Dataene i seg selv er tilgjengelige ved å referere til modellens attributter. Så, hvis vi ser på et slikt resultat:

"login": "rey", "id": 1, "alder": 45, "kjønn": "mann")

Attributtene som er eksponert i modellen er:

  • Logg Inn
  • id
  • alder
  • kjønn

Data selv er tilgjengelig ved å referere til modellens attributter.

Som du ser fra koden ovenfor, kan du definere en statisk butikk, men du bruker Ember.Object for å definere modellene mesteparten av tiden. Ved subclassing Ember.Object, Du vil kunne returnere data (for eksempel via et Ajax-anrop) og definere modellen. Mens du eksplisitt kan angi data i en kontroller, anbefales det alltid at du oppretter en modell for å overholde separasjon av bekymringer og kodeorganisasjonens beste praksis.

Alternativt kan du bruke en søsterramme kalt Ember Data. Det er en ORM-lignende API og persistensbutikk, men jeg må understreke at den er i en fluxstilstand som i denne skrivingen. Den har mye potensial, men bruker Ember.Object er mye tryggere på dette tidspunktet. Robin Ward, medstifter av Diskurs, skrev et flott blogginnlegg om bruk av Ember uten Ember Data. Det skisserer deres prosess, som jeg vil bryte ned for deg.

Definere dine modeller

I det følgende eksemplet skal jeg bruke den uoffisielle Hacker News API til å trekke JSON-baserte data fra nyhetsressursen. Disse dataene blir lagret i min modell og senere brukt av en kontroller for å fylle en mal. Hvis vi ser på dataene som returneres fra API, kan vi forstå egenskapene vi skal jobbe med:

"nextId": null, "items": ["title": "Docker, Linux-container runtime: nå åpen kildekode", "url": "http://docker.io", "id": 5445387 , "commentCount": 39, "poeng": 146, "postedAgo": "2 timer siden", "postedBy": "shykes", "title": "Hva er egentlig feil med Yahoo? "," url ":" http://hackingdistributed.com/2013/03/26/summly/ "," id ": 5445159," commentCount ": 99," poeng ": 133," postedAgo ":" 2 timer siden "," postedBy ":" hoonose "," versjon ":" 1.0 "," cachedOnUTC ":" \ / Date (1364333188244) \ / "

Jeg vil jobbe med elementer eiendom, som inneholder alle overskriftene og historien. Hvis du har jobbet med SQL databaser, tenk på hvert element av elementer som en post og eiendomsnavnene (dvs. tittel, url, id, etc.) som feltnavn. Det er viktig å groke oppsettet fordi disse egenskapene vil bli brukt som egenskapene til modellobjektet, noe som er en perfekt segue til å skape modellen.

Ember.Object er den viktigste basen klassen for alle Ember objekter, og vi vil subclass det for å lage vår modell ved hjelp av sin forlenge() metode.

For å gjøre dette legger vi til følgende kode til JS / app.js umiddelbart etter koden som definerer App.IndexRoute:

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

App.Item Fungerer som modellklasse for Hacker News-dataene, men det har ingen metoder for å hente eller manipulere dataene. Så, vi må definere disse:

 App.Item.reopenClass (all: function () return $ .getJSON ("http://api.ihackernews.com/page?format=jsonp&callback=?") .Then (funksjon (svar) var items = [ ]; response.items.forEach (funksjon (element) items.push (App.Item.create (item));); returnere elementer;););

La oss bryte ned denne koden. Først bruker vi Embers reopenClass () metode for å legge til våre nye metoder til App.Item klassen, og du sender den et objekt som inneholder våre ønskede metoder. For dette eksempelet trenger vi bare en metode som heter alle(): Det returnerer alle overskriftene fra Hacker News-forsiden. Fordi jQuery er en del av avtalen med Ember, har vi sin enkle Ajax API til vår disposisjon. API bruker JSONP til å returnere JSON data; så jeg kan bare bruke $ .GetJSON () å gjøre forespørselen til:

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

Den "tilbakeringing =?" forteller jQuery at dette er en JSONP-forespørsel, og dataene (når den hentes) blir sendt til en anonym tilbakeringingshåndterer definert ved hjelp av jQuerys løftefunksjonalitet:

.da (funksjon (svar) ...);

Jeg kan enkelt pumpe i JSON-dataene mine i et Ember-objekt.

De respons parameteren inneholder JSON-dataene, slik at du kan løse over postene og oppdatere den lokale elementer array med forekomster av App.Item. Til slutt returnerer vi den nyfylte gruppen når alle() utfører. Det er mange ord, så la meg oppsummere:

  • Opprett din nye modellklasse ved å subclassing Ember.Object ved hjelp av forlenge().
  • Legg til modellmodellene dine ved å bruke reopenClass ().
  • Lag et Ajax-anrop for å hente dataene dine.
  • Loop over dataene dine, opprett en Punkt objekt og skyve den inn i en matrise.
  • Returner arrayet når metoden kjøres.

Hvis du oppdaterer index.html, Du ser ingenting har endret seg. Dette gir mening fordi modellen bare er definert; Vi har ikke tilgang til den.

Eksponering av dataene dine

Controllers fungerer som proxyer, som gir deg tilgang til modellens attributter og lar maler få tilgang til dem for å dynamisk gjengi skjermen. I tillegg til å få tilgang til attributter fra en tilknyttet modell, kan kontrollører også lagre andre applikasjonsegenskaper som må fortsette uten å lagre til en server.

Foreløpig har vår app følgende kontroller (den som definerer et statisk datasett):

App.IndexRoute = Ember.Route.extend (setupController: funksjon (controller) controller.set ('content', ['rød', 'gul', 'blå']););

Vi kan direkte forbinde vår modell med App.IndexRoute bruker modell metode (AKA modell kroken): 

App.IndexRoute = Ember.Route.extend (modell: funksjon () retur App.Item.all (););

Husk at Ember definerer kontrolleren din hvis du ikke spesifikt definerer det selv, og det er det som skjer i dette tilfellet.

Bak kulissene skaper Ember IndexController som en forekomst av Ember.ArrayController, og den bruker modellen spesifisert i modell metode.

Nå trenger vi bare å oppdatere indeksmalen for å få tilgang til de nye attributter. Åpning index.html, vi kan se følgende håndboksmalkode:

#each element i modell 
  • punkt
    •  /Hver

    Med en liten endring (legger til tittel eiendom), kan vi umiddelbart se titlene returnert fra Hacker News API:

    Item.title

    Hvis du oppdaterer nettleseren din nå, bør du se noe som ligner på følgende:

     
    Velkommen til Ember.js
     
    • Persona er distribuert. I dag.
      •  
    • 21 grafer som viser Amerikas helseomsorgspriser er latterlige
      •  
    • 10 000 samtidige sanntidsforbindelser til Django
      •  
    • Docker, Linux-container runtime: nå åpen kildekode
      •  
    • La oss si at FeedBurner avsluttes ...

    Hvis du vil vise mer informasjon, legg ganske enkelt til flere egenskaper:

    item.title - item.postedAgo av item.postedBy

    Oppdater for å se oppdateringene du har laget. Det er skjønnhet håndtakene; Det gjør det trivielt å legge til nye dataelementer i brukergrensesnittet.

    Som nevnt før, kan kontrollører også brukes til å definere statiske attributter som må fortsette gjennom hele applikasjonsperioden. For eksempel vil jeg kanskje fortsette visse statiske innhold, slik som dette:

    App.IndexController = Ember.ObjectController.extend (headerName: 'Velkommen til Hacker News App', appVersion: 2.1);

    Her er jeg underklasse Ember.ObjectController å opprette en ny kontroller for min index rute og mal for å jobbe med. Jeg kan nå gå til index.html og oppdater min mal for å erstatte følgende:

    Velkommen til Ember.js

    med:

    HeaderName

    modeller er objektrepresentasjoner av dataene din søknad bruker.

    Håndtak vil ta de angitte egenskapene i kontrolleren min og bytte ut dynamisk HeaderName plassholder med navneverdi. Det er viktig å styrke to ting:

    • Ved å overholde Embers navnekonvensjoner måtte jeg ikke gjøre noen ledninger for å kunne bruke kontrolleren med indeksmal.
    • Selv om jeg eksplisitt opprettet en IndexController, Ember er smart nok til ikke å overskrive den eksisterende modellen som har vært knyttet via ruten.

    Det er ganske kraftige og fleksible ting!

    Neste opp ... Maler

    Det er ikke vanskelig å jobbe med data i Ember. I virkeligheten jobber den vanskeligste delen med de forskjellige APIer som finnes i overflod på nettet.

    Det faktum at jeg enkelt kan pumpe i JSON-dataene mine i et Ember-objekt, gjør ledelsen betydelig enklere, selv om jeg aldri har vært en stor fan av store datasett på klientsiden, spesielt når de er representert som objekter.

    Det er noe jeg må gjøre mer testing på, og jeg håper at Ember Data gjør alt dette trivielt.

    Med det sagt, berørte jeg kort på maler i denne artikkelen. De er veldig viktige ... så mye at jeg vil takle dette emnet i sin egen artikkel. Så i neste artikkel går vi over hvordan du kan utnytte Handelbars til å bygge ditt brukergrensesnitt og drill ned i de ulike direktivene som templerende rammeverket tilbyr.

    Kode
    ×