Entrare nella brace parte 4

Nel mio tutorial precedente, ho toccato come usare Ember.Object per definire i tuoi modelli e lavorare con i set di dati. In questa sezione, esamineremo più da vicino come Ember utilizza il framework di modelli Handlebars per definire l'interfaccia utente della tua app.

Modelli lato client

La maggior parte degli sviluppatori lato server è abituata a utilizzare i modelli per definire il markup che verrà riempito dinamicamente al volo. Se hai mai utilizzato ASP.NET, ColdFusion, PHP o Rails, è quasi certo che sai di cosa sto parlando.

JavaScript I templi della parte client sono davvero decollati soprattutto a causa del focus sulla creazione di esperienze più simili a desktop. Ciò significa che gran parte dell'elaborazione viene eseguita sul lato client con i dati che vengono principalmente estratti tramite richieste API lato server.

Ricordo di aver scritto alcuni modelli client-side qualche tempo fa, quando il plug-in jQuery Template è stato rilasciato per la prima volta. Quasi tre anni dopo, è ancora il post più letto del mio blog, a dimostrazione di quanto sia aumentato l'interesse per i template sul lato client. Da allora, sono stati rilasciati numerosi altri framework che offrono funzionalità avanzate e comunità di supporto. Handlebars è una delle opzioni più popolari e il framework scelto dal progetto Ember per potenziare le sue esigenze di template. Questo ha senso in quanto Handlerbars è stato creato dal co-fondatore di Ember.js e membro del team principale, Yehuda Katz. Nota, però, che non ho intenzione di fare confronti tra i modelli di templating e mi concentrerò strettamente su Handelbars poiché questo è ciò che Ember.js usa di default.

Negli articoli precedenti, ho mostrato alcuni modelli di base nel codice:

Due elementi che spiccano sono la dichiarazione del tipo per il tag script e le parentesi graffe che fungono da delimitatori per le espressioni su cui gestirà Handlebars. Questa è una sintassi molto tipica di cui parlerò più dettagliatamente e che userete in modo coerente mentre costruite i modelli di Ember.

La sintassi

Nonostante il fatto che Handlebars usi una sintassi speciale, alla fine della giornata, tu stai davvero lavorando principalmente con il markup HTML standard. Handlebars serve per iniettare il contenuto in questo markup per rendere i dati all'utente. Lo fa analizzando le espressioni delimitate e sostituendole con i dati che hai chiesto a Handlebars di utilizzare. Nel caso di Ember, Handlebars fornisce i ganci e Ember li usa. Questi dati provengono in genere dal controller (ricorda che i controller fungono da interfaccia per i tuoi modelli).

La prima cosa di cui ogni modello ha bisogno è una definizione del tag script. Molti di voi hanno probabilmente definito tag script per caricare la libreria JavaScript. In effetti, l'hai già fatto per caricare Manubri nel tuo progetto Ember:

C'è una leggera differenza nell'usarlo per definire un modello. Innanzitutto, stiamo specificando a genere attributo di "text / x-handlebar". Questo genere viene ignorato dal browser ma lascia il testo disponibile per l'ispezione e consente a Ember di identificare i modelli all'interno dell'app. Inoltre, Ember utilizza un attributo dati chiamato "nome-modello dati" che Ember può utilizzare per associare parti specifiche della tua applicazione a un modello. Ad esempio, la seguente dichiarazione definisce un modello con un nome "impiegato":

All'avvio dell'applicazione, Ember esegue la scansione del DOM per type = "text / x-manubri, compila i modelli che trova e li memorizza in una proprietà dell'oggetto Ember, chiamato Ember.TEMPLATES che usa per capire cosa rendere per una determinata rotta. Questo è il motivo per cui seguire le convenzioni di denominazione di Ember è così importante. Nell'esempio sopra, questo modello verrà automaticamente associato alla rotta dipendente e al controller che hai creato nella tua applicazione. Ancora una volta, non posso sottolineare abbastanza come queste convenzioni di denominazione renderanno il tuo sviluppo molto più facile.

Ember dipende dagli URL per determinare le risorse che devono essere utilizzate e i modelli che devono essere renderizzati. Immaginiamo che tu avessi una pagina profilo con l'URL "/ profilo". Avresti una risorsa, chiamata profilo che caricarebbe risorse specifiche per quell'URL (come un oggetto del percorso) e avresti anche un modello con lo stesso nome. Abbiamo esaminato la definizione delle risorse e il percorso degli oggetti nella seconda parte della mia serie Ember, quindi se non sei sicuro di ciò di cui sto discutendo, assicurati di tornare lì per rinfrescarti.

Quando visiti quell'URL, Ember sa che è necessario caricare queste risorse e analizzare il modello che hai definito. Lo fa tramite le sue convenzioni di denominazione, sapendo che poiché sei andato su "/ profile" ha bisogno di caricare le risorse definite nel file profilo, e rendere il modello, denominato Dati-template-name = "profilo".

Itinerario: ProfileRoute
controller: ProfileController
Modello: profilo (nota che è in minuscolo)

Passando nuovamente alle convenzioni di denominazione, vedrai che il percorso, il controller e il modello sono tutti collegati usando lo stesso nome URL con l'eccezione che il modello è scritto in lettere minuscole. Questo è ciò che permette a Ember di gestire tutto dietro le quinte senza dover fare molto cablaggio.

È anche importante notare che, se si dichiara un modello senza a -Template-name dati attributo, Ember assumerà che si tratta del modello con ambito applicazione, quello in genere utilizzato come modello a livello di sito per la creazione di elementi dell'interfaccia utente, come intestazioni, piè di pagina e navigazione. E se non definisci esplicitamente un modello per un'applicazione o anche una risorsa (ad es. Per un URL), Ember lo fa automaticamente per te per garantire stabilità e coerenza nella tua app.

espressioni

Il prossimo passo è includere il tuo markup e le espressioni delimitate che utilizzerai per rappresentare i tuoi dati. Le espressioni sono delimitate, tramite doppie parentesi graffe che consentono di identificarle e analizzarle facilmente con i dati trasmessi dal controller. Ecco un esempio:

In questo caso, il nome di battesimo e cognome le espressioni saranno analizzate da Ember e sostituite da dati reali. Inoltre, Ember configura osservatori in modo che quando i dati cambiano, il modello viene aggiornato automaticamente e gli aggiornamenti vengono visualizzati dall'utente della tua app.

Finora, ti ho mostrato un esempio molto semplice, ma il takeaway è che:

Ember usa un attributo type speciale per definire i template.
I modelli utilizzano il markup standard insieme alle espressioni delimitate, che vengono analizzate sul lato client.
Questi modelli hanno le funzionalità complete di set di manubri.
Ember imposta gli osservatori per aggiornare dinamicamente i dati dell'interfaccia utente, man mano che cambia.

Questo offre molta flessibilità nel modo in cui strutturate la vostra interfaccia utente. Continuiamo a guardare le funzionalità disponibili.

Espressioni avanzate

Ricorda che Ember fa leva su Handlebars, quindi hai accesso a tutta la gamma di espressioni qui. Le espressioni condizionali sono un must, al fine di rendere quasi tutto utile; Handlebars offre un buon numero di opzioni.

Diciamo che avevo un set di dati JSON che assomigliava a questo:

 "items": ["title": "Simulazione di Cloth Tearable in JavaScript", "url": "http://codepen.io/stuffit/pen/KrAwx", "id": 5592679, "commentCount": 20, "points": 127, "postedAgo": "1 ora fa", "postatoBy": "NathanKP", "titolo": "Netflix ora più grande di HBO", "url": "http://qz.com / 77067 / netflix-now-bigger-than-hbo / "," id ": 5592403," commentCount ": 68," punti ": 96," postatoAgo ":" 2 ore fa "," postatoBy ":" edouard1234567 "

Se volessi assicurarmi che il titolo i dati sono disponibili, potrei aggiungere un'istruzione "if" condizionale usando il #Se espressione:

 #if item.title item.title - item.postedAgo di item.postedBy
 /Se

Questo controlla se Titolo dell'oggetto non è indefinito e continua ad elaborare le espressioni successive per il titolo, postedAgo e Pubblicato da espressioni di dati.

Poiché questo set di dati contiene più di un "record", è lecito ritenere che probabilmente vorremmo eseguire il loop su ciascun elemento di articolo. Ecco dove il #ogni l'espressione entra in gioco. Ti permette di enumerare su un elenco di oggetti. Quindi, ancora una volta, tenendo presente che i modelli sono una combinazione di espressioni di markup e manubri, possiamo usare il #ogni espressione per scorrere tutti gli oggetti disponibili nel nostro oggetto modello Ember. Ricorda che il modello Ember è derivato dal controller, che è associato al modello, tramite le convenzioni di denominazione di Ember.

  #each item in model #if item.title item.title - item.postedAgo di item.postedBy
 / if / each

Ciò renderebbe qualcosa di simile a:

  Simulazione di Cloth Tearable in JavaScript - 1 ora fa da NathanKP
 Netflix ora più grande di HBO - 2 ore fa da edouard1234567
 Il database veloce emerge dalla classe MIT, dalle GPU e dall'invenzione degli studenti - 33 minuti fa da signa11
  Connessione di un LCD retina per iPad a un PC - 6 ore fa da noonespecial

Il netto vantaggio è la specifica implicita dell'osservatore di Ember, che aggiornerà i dati su un aggiornamento.

Se la tua espressione condizionale deve essere più complessa, ti consigliamo di creare una proprietà calcolata. Ciò consente di creare una proprietà basata su un metodo che può applicare condizioni di codice complesse ai dati. Diciamo che volevo voler solo visualizzare i dati che avevano il titolo "Tearable Cloth Simulation in JavaScript". Ci sono un paio di cose che ho bisogno di impostare:

Ho bisogno di una proprietà calcolata per scansionare ogni elemento e dirmi se il titolo corrisponde
Devo creare un controller che possa essere utilizzato da ciascun elemento che viene enumerato nel modello
Devo aggiornare il modello in modo che utilizzi questo controller per ciascun elemento
La prima cosa che devo fare è creare il nuovo controller che avvolgerà ogni elemento in loop e creerà la proprietà calcolata al suo interno:

 App.TitleController = Ember.ObjectController.extend (titleMatch: function () return this.get ('title') === "Simulazione di Cloth Tearable in JavaScript"; .property ());

Guardando il codice, stiamo sottoclassi Ember.ObjectController per creare il controller. Questo è il controller che avvolgerà ogni elemento in loop nel nostro modello. Successivamente, stiamo creando un metodo, chiamato titleMatch che usa il ottenere() metodo per ritirare il titolo corrente, confrontarlo con il testo che ho definito e restituire un valore booleano. Infine, l'Ember proprietà() il metodo è chiamato per definire il titleMatch metodo come proprietà calcolata.

Una volta installato, aggiorniamo i modelli #ogni espressione per rappresentare ogni elemento con il nuovo controller che abbiamo creato. Questo viene fatto usando il itemController direttiva. Una cosa fondamentale da capire è questo itemController è una frase chiave in Ember destinata a associare un controller a elementi di un modello. Non confonderlo con un nome effettivo del controller (come inizialmente ho fatto). Il nome del controller è assegnato a itemController, come questo:

  #each item in model itemController = "title" #if titleMatch foo.title - foo.postedAgo di foo.postedBy
 / if / each

Ancora una volta, le convenzioni di denominazione impongono che, quando si assegnano i nomi nei modelli, si utilizza il carattere minuscolo. In questo caso, stiamo assegnando TitleController a itemController.

Ora, man mano che ogni elemento viene ricollegato, la proprietà calcolata, titleMatch, è usato per valutare il titolo e visualizzare i dati se corrisponde.

Legare i dati agli elementi

La creazione di modelli dinamici non significa solo sputare il testo. Ci sono momenti in cui l'aspetto grafico dell'interfaccia utente deve essere influenzato dai dati in elaborazione. La visualizzazione di un'immagine o la costruzione di un link sono ottimi esempi di questo.

Associare i dati a un elemento richiede l'utilizzo di speciali helper Ember che aiutano a definire il contesto di un attributo, oltre a garantire che gli attributi vengano aggiornati correttamente quando i dati cambiano. Per gli attributi degli elementi, il BindAttr helper è usato per riempire i valori di un attributo. Se avessimo bisogno di specificare dinamicamente l'URL di un'immagine, useremmo la seguente sintassi:

Lo stesso può essere fatto per gli attributi che non ricevono un valore, come ad esempio Disabilitato:

In questo caso, isAdminstrator potrebbe essere una proprietà calcolata basata su un metodo nel controller o solo una normale proprietà dell'oggetto che offre molta flessibilità nella definizione delle condizioni per disabilitare la casella di controllo. Questa flessibilità porta anche alla definizione dei nomi delle classi. Se volessi usare un'istruzione condizionale per definire se una classe dovrebbe essere applicata al mio elemento, potrei usare il seguente codice:

  avvertimento!

A seconda dello stato booleano, il mio markup potrebbe essere:

  avvertimento!

per un vero condizione, o:

  avvertimento!

per un falso condizione. Si noti che, quando ho specificato isUrgent per la classe, Ember ha cancellato il nome e ha reso la classe come è urgente. Se preferisci specificare la tua classe in base ai risultati, puoi utilizzare un'espressione condizionale simile a un'istruzione ternaria:

Questo tornerà urgente o normale per la classe, in base al valore condizionale di isUrgent.

Imparare a conoscere i modelli

I modelli costituiranno la base dell'interfaccia utente, quindi sarà importante che passi il tempo a leggere i documenti sul sito di Ember e di Handlebars per avere un'idea della loro potenza complessiva. Anche se non usi Ember, Handlebars è un ottimo framework per te da usare giorno per giorno, e vale la pena investire nell'imparare come usarlo.

Gabriel Manricks ha scritto un ottimo tutorial su Handlebars qui su Nettuts + che puoi usare per essere aggiornato sulla struttura.

Codice