Share
Nota del redattore: il team Ember.js si è spostato su una pianificazione di rilascio accelerata e alla data di pubblicazione sono in versione 1.2.0. Questo tutorial è stato scritto pre-v1.0 ma molti dei concetti sono ancora applicabili. Facciamo del nostro meglio per commissionare contenuti tempestivi e queste situazioni accadono di volta in volta. Lavoreremo per aggiornarlo in futuro.
Nella terza parte della mia serie di Ember, ti ho mostrato come puoi interagire con i dati usando Ember Ember.Object classe base principale per creare oggetti che definiscono i metodi e le proprietà che fungono da wrapper per i dati. Ecco un esempio:
Accentsconagua
App.Item = Ember.Object.extend (); 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;); In questo codice, abbiamo sottoclasse Ember.Object usando il "estendere()"e creare un metodo definito dall'utente chiamato chiamato"tutti()"che fa una richiesta a Hacker News per i risultati in formato JSON del suo feed di notizie.
Anche se questo metodo funziona sicuramente ed è persino promosso dal Discourse di Ember come il loro modo di farlo, lo richiede tu arricchire ed esporre l'API con cui si desidera fare riferimento ai dati. La maggior parte dei framework MVC tende a includere funzionalità simili a ORM, quindi, se sei abituato a Rails, ad esempio, conoscerai i vantaggi di ActiveRecord, che aiuta a gestire e a fare il grande lavoro di interazione con i dati.
Il team Ember ha voluto fare la stessa cosa, ma il loro obiettivo principale è stato quello di ottenere una versione stabile v1 del proprio framework core prima di assicurare che i componenti complementari potessero essere costruiti su fondamenta stabili. In realtà lo applaudo e in realtà ho fatto cenno al fatto che dovresti smettere di usare Ember Data per questo.
Ora che Ember RC8 è fuori e v1 sembra essere dietro l'angolo, ho sentito che era un buon momento per iniziare ad esplorare Ember Data e vedere cosa offre.
La prima cosa che voglio sottolineare è che Ember Data è un work in progress e più o meno allo stesso modo in cui ha iniziato Ember, probabilmente vedremo una serie di modifiche alle API che si stanno rompendo nei prossimi mesi. Anche se non è l'ideale, è importante cominciare a considerare come strutturare le tue app utilizzando la libreria. Per darti una buona descrizione di ciò che fornisce Ember Data, ho copiato nella descrizione ben scritta dalla pagina GitHub:
Ember Data è una libreria per il caricamento di dati da un livello di persistenza (come un'API JSON), che associa questi dati a una serie di modelli all'interno dell'applicazione client, aggiornando tali modelli, quindi salvando le modifiche su un livello di persistenza. Fornisce molte delle funzionalità che potresti trovare negli ORM lato server come ActiveRecord, ma è progettato specificamente per l'ambiente unico di JavaScript nel browser.
Quindi, come ho detto, ha lo scopo di astrarre molte delle complessità del lavoro con i dati.
Se hai letto le mie esercitazioni precedenti, dovresti avere molta familiarità con come configurare una pagina per sfruttare Ember. Se non lo hai fatto, vai alla pagina iniziale di Ember.js e prendi lo Starter Kit. Puoi trovarlo proprio nel mezzo della pagina come viene visualizzato tramite un grosso pulsante. Questo ti darà la versione più aggiornata di Ember di cui avrai bisogno per lavorare con Ember Data. Il modo più semplice per ottenere una versione scaricabile di Ember Data è di andare ai documenti API per Modelli, scorri fino in fondo e scarica la libreria. Inoltre, puoi andare al costruisce pagina per estrarre le ultime build di qualsiasi libreria relativa a Ember.
Aggiungere dati di taglio è semplice come aggiungere un altro file JavaScript al mix in questo modo:
Questo ora ti dà accesso agli oggetti, al metodo e alle proprietà di Ember Data.
Senza alcuna configurazione, Ember Data può caricare e salvare record e relazioni servite tramite un'API JSON RESTful, a condizione che segua determinate convenzioni.
Ember usa un oggetto speciale chiamato a memorizzare caricare i modelli e recuperare i dati e si basa sulla brace DS.Store classe. Ecco come definiresti un nuovo negozio:
App.Store = DS.Store.extend (...);
Se ricordi dai miei precedenti articoli, "App" è solo uno spazio dei nomi creato per gli oggetti, i metodi e le proprietà a livello di applicazione per l'applicazione. Mentre non è una parola riservata in Ember, ti esorto a usare lo stesso nome di quasi tutti i tutorial e la demo che ho visto lo usa per coerenza.
Il negozio che creerai conserverà i modelli che crei e fungerà da interfaccia con il server definito nell'adattatore. Per impostazione predefinita, Ember Data crea e associa al tuo negozio un adattatore REST basato sul DS.RestAdapter classe. Se hai semplicemente definito il codice sopra, per impostazione predefinita ti sarà associato un adattatore. La magia dell'ebra al suo meglio. È anche possibile utilizzare un adattatore Fixture se si sta lavorando con dati basati sulla memoria (ad esempio, JSON che si sta caricando dal codice) ma poiché si tratta di effettuare chiamate API, l'adattatore REST è più appropriato.
È inoltre possibile definire il proprio adattatore per quelle situazioni in cui è necessario un maggiore controllo personalizzato sull'interfacciamento con un server utilizzando il adattatore proprietà all'interno della dichiarazione del negozio:
App.Store = DS.Store.extend (adapter: 'App.MyCustomAdapter');
Il codice che ho elencato all'inizio di questo tutorial è un esempio di come usare Ember.Object per creare i modelli per la tua applicazione. Le cose cambiano un po 'quando si definiscono i modelli tramite Ember Data. Ember Data fornisce un altro oggetto chiamato DS.Model quale sottoclasse per ogni modello che vuoi creare. Ad esempio, prendendo il codice dall'alto:
App.Item = Ember.Object.extend ();
Ora sembrerebbe questo:
App.Item = DS.Model.Extend ()
Non c'è molta differenza in termini di aspetto ma una grande differenza in termini di funzionalità, dal momento che ora hai accesso alle funzionalità dell'adattatore REST e alle relazioni integrate di Ember Data come one-to-one, one-to-many e altro ancora. Il vantaggio principale, tuttavia, è che Ember Data fornisce i ganci per interagire con i tuoi dati tramite i tuoi modelli anziché doverli lanciare da soli. Riferendo nuovamente il codice dall'alto:
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));); restituire articoli; ); Mentre dovevo creare il mio metodo per restituire tutti i risultati della mia chiamata JSON, Ember Data fornisce a trova() metodo che fa esattamente questo e serve anche a filtrare i risultati. Quindi, in sostanza, tutto ciò che devo fare è effettuare la seguente chiamata per restituire tutti i miei record:
App.Item.find ();
Il trova() il metodo invierà una richiesta Ajax all'URL.
Questo è esattamente ciò che attrae così tanti sviluppatori in Ember; la premessa per rendere le cose più facili.
Una cosa da tenere a mente è che è importante definire all'interno del modello gli attributi che prevedi di utilizzare in seguito (ad esempio nei tuoi modelli). È facile da fare:
App.Post = DS.Model.extend (title: DS.attr ('string')); Nella mia app demo, voglio utilizzare la proprietà del titolo restituita tramite JSON, quindi utilizzare il attr () metodo, specificare quali attributi ha un modello a mia disposizione.
Una cosa che voglio menzionare è che Ember Data è incredibilmente pignoli sulla struttura del JSON restituiti. Poiché Ember sfrutta le strutture di directory per identificare parti specifiche delle tue applicazioni (ricorda le convenzioni di denominazione discusse nel mio primo articolo di Ember?), Fa alcune ipotesi sul modo in cui sono strutturati i dati JSON. Richiede che ci sia una radice con nome che verrà utilizzata per identificare i dati da restituire. Ecco cosa intendo:
'post': ['id': 1, 'titolo': 'Un mio amico ha appena postato questo.', 'url': 'http://i.imgur.com/9pw20NY.jpg'] [JS]Se lo avessi definito in questo modo:
[js] 'id': '1', 'titolo': 'Un mio amico ha appena postato questo.', 'url': 'http://i.imgur.com/9pw20NY.jpg', 'id': '2', 'titolo': 'Un mio amico ha appena postato questo.', 'url': 'http://i.imgur.com/9pw20NY.jpg',
Ember Data si sarebbe completamente impantanato e ha generato il seguente errore:
Il tuo server ha restituito un hash con l'ID della chiave ma non hai alcuna mappatura per questo.
Il motivo è che dal momento che il modello è chiamato "App.Post", Ember Data si aspetta di trovare un URL chiamato "post" da cui estrarrà i dati. Quindi se definissi il mio negozio come tale:
App.Store = DS.Store.extend (url: 'http: //emberdata.local');
e il mio modello in questo modo:
App.Post = DS.Model.extend (title: DS.attr ('string')); Ember Data assumerebbe che la richiesta Ajax fatta dal trova() il metodo sarebbe simile a questo:
http: //emberdata.local/posts
E se stavi facendo una richiesta per un ID specifico (come find (12)), sarebbe simile a questo:
http: //emberdata.local/posts/12
Questo problema mi ha fatto impazzire, ma facendo una ricerca ho trovato molte discussioni su di esso. Se non è possibile configurare i risultati JSON in questo modo, sarà necessario creare un adattatore personalizzato per massaggiare i risultati per serializzarli correttamente prima di poterli utilizzare. Non lo sto citando qui, ma ho intenzione di esplorarne di più presto.
Ho volutamente voluto mantenere questo tutorial semplice perché so che Ember Data sta cambiando e volevo dare una breve panoramica di ciò che ha fornito. Quindi ho montato un'app demo rapida che utilizza Ember Data per estrarre i dati JSON dal mio server locale. Diamo un'occhiata al codice.
Per prima cosa creo il mio spazio dei nomi dell'applicazione (che faresti per qualsiasi app Ember):
// Crea la nostra Application App = Ember.Application.create ();
Successivamente, definisco il mio archivio dati e dichiaro il url da dove il modello estrarrà i dati da:
App.Store = DS.Store.extend (url: 'http: //emberdata.local';);
Nel modello, specifico l'attributo: titolo, che userò nel mio modello più tardi:
// Il nostro modello App.Post = DS.Model.extend (title: DS.attr ('string')); Infine, associo il modello al percorso tramite il gancio del modello. Si noti che sto utilizzando il metodo Ember Data predefinito trova() per ritirare immediatamente i miei dati JSON non appena viene avviata l'app:
// La nostra rotta predefinita. App.IndexRoute = Ember.Route.extend (model: function () return App.Post.find (););
Nel modello per la pagina radice (indice), io uso il #ogni Direttiva Handlebars per esaminare i risultati dei miei dati JSON e rendere il titolo di ciascuno dei miei post:
Questo è tutto! Nessuna chiamata Ajax da effettuare o metodi speciali per lavorare con i miei dati. Ember Data si è occupata di effettuare la chiamata XHR e di memorizzare i dati.
Ora, questo è incredibilmente semplicistico e non voglio portarti a credere che siano tutti unicorni e cuccioli di cane. Durante il processo di collaborazione con Ember Data, mi sono ritrovato a voler tornare a utilizzare Ember.Object dove ho avuto più controllo. Ma mi rendo anche conto che sta lavorando molto per migliorare i dati di Ember, soprattutto per il modo in cui gestisce i diversi risultati dei dati. Quindi è importante almeno iniziare il processo di comprensione di come funziona questa cosa e anche di offrire un feedback costruttivo al team.
Quindi vi esorto a saltare dentro e iniziare a lavorarci su, specialmente quelli che hanno uno sfondo molto intenso ORM e potrebbero aiutare a modellare la direzione di Ember Data. Ora è il momento migliore per farlo.
