Share
Spero che tu stia iniziando a vedere che Ember.js è un framework potente, eppure avvincente. Abbiamo solo graffiato la sua superficie; c'è altro da imparare prima di poter costruire qualcosa di veramente utile! Continueremo a utilizzare l'Ember Starter Kit. In questa parte della serie, esamineremo l'accesso e la gestione dei dati all'interno di Ember.
Nell'ultimo articolo, abbiamo lavorato con un set statico di nomi di colori definiti all'interno di un controller:
Accentsconagua
App.IndexRoute = Ember.Route.extend (setupController: function (controller) controller.set ('content', ['red', 'yellow', 'blue']);); Ciò ha permesso al controller di esporre i dati al indice modello. È carino per una demo, ma nella vita reale, la nostra fonte di dati non sarà una matrice hard-coded.
Qui è dove Modelli entra. Modelli sono rappresentazioni di oggetti dei dati utilizzati dall'applicazione. Potrebbe essere un semplice array o dati recuperati dinamicamente da un'API JSON RESTful. Si accede ai dati stessi facendo riferimento agli attributi del modello. Quindi, se guardiamo un risultato come questo:
"login": "rey", "id": 1, "age": 45, "gender": "male"
Gli attributi esposti nel modello sono:
Si accede ai dati stessi facendo riferimento agli attributi del modello.
Come puoi vedere dal codice precedente, potresti definire un archivio statico, ma utilizzerai Ember.Object per definire i tuoi modelli il più delle volte. Per sottoclassi Ember.Object, sarai in grado di restituire i dati (ad es. tramite una chiamata Ajax) e definire il modello. Sebbene sia possibile impostare in modo esplicito i dati all'interno di un controller, è sempre consigliabile creare un modello per aderire alla separazione delle preoccupazioni e alle migliori pratiche di organizzazione del codice.
In alternativa, è possibile utilizzare una struttura sorella chiamata Ember Data. È un'API di tipo ORM e un archivio di persistenza, ma devo sottolineare che è in uno stato di flusso al momento della stesura di questo documento. Ha un sacco di potenziale, ma usando Ember.Object è molto più sicuro in questo momento. Robin Ward, co-fondatore di Discourse, ha scritto un ottimo post sul blog sull'utilizzo di Ember senza Ember Data. Delinea il loro processo, che io abbatterò per te.
Nell'esempio seguente, utilizzerò l'API non ufficiale di Hacker News per estrarre i dati basati su JSON dalla risorsa di notizie. Questi dati verranno memorizzati nel mio modello e successivamente utilizzati da un controller per riempire un modello. Se guardiamo i dati restituiti dall'API, possiamo comprendere le proprietà con cui lavoreremo:
"nextId": null, "items": ["title": "Docker, il runtime del contenitore Linux: ora open-source", "url": "http://docker.io", "id": 5445387 , "commentCount": 39, "punti": 146, "postatoAgo": "2 ore fa", "pubblicatoBy": "shykes", "titolo": "Cosa \ u0027s realmente sbagliato con Yahoo \ u0027s Acquisto di Summly "," url ":" http://hackingdistributed.com/2013/03/26/summly/ "," id ": 5445159," commentCount ": 99," punti ": 133," postatoAgo ":" 2 ore fa "," postedBy ":" hoonose ",]," version ":" 1.0 "," cachedOnUTC ":" \ / Date (1364333188244) \ / "
Voglio lavorare con il elementi proprietà, che contiene tutti i titoli e le informazioni sulla storia. Se hai lavorato con database SQL, pensa a ciascun elemento di elementi come un record e i nomi delle proprietà (ad es .: titolo, url, id, ecc.) come nomi di campi. È importante annodare il layout perché questi nomi di proprietà saranno utilizzati come attributi del nostro oggetto modello, che è un seguito perfetto nella creazione del modello.
Ember.Objectè la classe base principale per tutti gli oggetti Ember e la sottoclasseremo per creare il nostro modello usando i suoiestendere()metodo.
Per fare ciò, aggiungeremo il seguente codice a js / app.js immediatamente dopo il codice che definisce App.IndexRoute:
App.Item = Ember.Object.extend ();
App.Item funge da classe modello per i dati di Hacker News, ma non ha metodi per recuperare o manipolare tali dati. Quindi, dovremo definire quelli:
App.Item.reopenClass (all: function () return $ .getJSON ("http://api.ihackernews.com/page?format=jsonp&callback=?") .Then (function (response) var items = [ ]; response.items.forEach (function (item) items.push (App.Item.create (item));); return items;);); Analizziamo questo codice. In primo luogo, usiamo Ember's reopenClass () metodo per aggiungere i nostri nuovi metodi al App.Item classe, e tu passi un oggetto che contiene i nostri metodi desiderati. Per questo esempio, abbiamo solo bisogno di un metodo chiamato tutti(): restituisce tutti i titoli della prima pagina di Hacker News. Poiché jQuery fa parte dell'accordo con Ember, abbiamo a disposizione la sua semplice API Ajax. L'API utilizza JSONP per restituire i dati JSON; quindi, posso solo usare $ GetJSON () per fare la richiesta a:
$ GetJSON ( "http://api.ihackernews.com/page?format=jsonp&callback=?")
Il "callback =?" dice a jQuery che si tratta di una richiesta JSONP e che i dati (una volta recuperati) vengono passati a un gestore di callback anonimo definito utilizzando la funzionalità promesse di jQuery:
.poi (funzione (risposta) ...);
Posso facilmente pompare i miei dati JSON in un oggetto Ember.
Il risposta parametro contiene i dati JSON, consentendo di scorrere i record e aggiornare il locale elementi array con istanze di App.Item. Infine, restituiamo l'array appena popolato quando tutti() esegue. Sono molte parole, quindi mi permetta di riassumere:
Ember.Object utilizzando estendere().reopenClass ().Articolo oggetto e spingendolo in un array.Se aggiorni index.html, vedrai che nulla è cambiato. Questo ha senso perché il modello è stato solo definito; non ci siamo acceduti.
I controller agiscono come proxy, consentendo di accedere agli attributi del modello e consentendo ai modelli di accedervi per rendere dinamicamente il display. Oltre ad accedere agli attributi da un modello associato, i controllori possono anche memorizzare altre proprietà dell'applicazione che devono persistere senza salvare su un server.
Attualmente, la nostra app ha il seguente controller (quello che definisce un set di dati statici):
App.IndexRoute = Ember.Route.extend (setupController: function (controller) controller.set ('content', ['red', 'yellow', 'blue']);); Possiamo associare direttamente il nostro modello con App.IndexRoute usando il modello metodo (AKA il gancio del modello):
App.IndexRoute = Ember.Route.extend (model: function () return App.Item.all (););
Ricorda che Ember definisce il tuo controller se non lo definisci esplicitamente tu stesso, e questo è ciò che accade in questo caso.
Dietro le quinte, Ember crea
IndexControllercome un esempio diEmber.ArrayController, e usa il modello specificato nelmodellometodo.
Ora abbiamo solo bisogno di aggiornare il modello di indice per accedere ai nuovi attributi. Apertura index.html, possiamo vedere il seguente codice template di Handlebars:
#each item in model
Con un piccolo cambiamento (aggiungendo il titolo proprietà), possiamo immediatamente vedere i titoli restituiti dall'API di Hacker News:
Titolo dell'oggetto
Se aggiorni il tuo browser ora, dovresti vedere qualcosa di simile al seguente:
Benvenuto in Ember.js
Se vuoi visualizzare più informazioni, aggiungi semplicemente altre proprietà:
item.title - item.postedAgo di item.postedBy
Aggiorna per vedere gli aggiornamenti che hai fatto. Questa è la bellezza di Handlebars; rende banale aggiungere nuovi elementi di dati all'interfaccia utente.
Come accennato in precedenza, i controller possono anche essere utilizzati per definire attributi statici che devono persistere per tutta la vita della vostra applicazione. Ad esempio, potrei voler mantenere determinati contenuti statici, come questo:
App.IndexController = Ember.ObjectController.extend (headerName: 'Benvenuto nell'app Hacker News', appVersion: 2.1);
Qui, sottoclassi Ember.ObjectController creare un nuovo controller per il mio indice percorso e modello con cui lavorare. Ora posso andare index.html e aggiorna il mio modello per sostituire quanto segue:
Benvenuto in Ember.js
con:
HeaderName
Modelli sono rappresentazioni di oggetti dei dati utilizzati dall'applicazione.
I manubri assumono gli attributi specificati nel mio controller e sostituiscono dinamicamente il HeaderName segnaposto con il suo valore omonimo. È importante rafforzare due cose:
IndexController, Ember è abbastanza intelligente da non sovrascrivere il modello esistente che è stato associato tramite il percorso.È roba abbastanza potente e flessibile!
Lavorare con i dati in Ember non è difficile. In realtà, la parte più difficile è lavorare con le varie API che abbondano sul web.
Il fatto di poter facilmente pompare i miei dati JSON in un oggetto Ember rende la gestione sostanzialmente più semplice, anche se non sono mai stato un grande fan dei grandi set di dati sul lato client, specialmente se rappresentati come oggetti.
È qualcosa su cui dovrò fare più test e spero che Ember Data renda tutto questo banale.
Detto questo, ho brevemente toccato i modelli in questo articolo. Sono molto importanti ... così tanto che voglio affrontare questo argomento nel suo stesso articolo. Quindi nel prossimo articolo vedremo come sfruttare Handelbars per costruire la tua interfaccia utente e approfondire le varie direttive proposte dal framework di templating.
