1.3.1.3 Lab - Mapping The Internet

MANNING
Stephan Hochhaus
Manuel Schoebel
F REMESSA BY Matt DeBergalis
www.it-ebooks.info
Meteor in azione
Licensed to Mark Watson <nordickan@gmail.com>

www.it-ebooks.info
www.it-ebooks.info
Meteor in azione
STEPHAN hochhaus
MANUEL CHRISTOPH Schoebel
MANN I ONE
S HELTER io sland

www.it-ebooks.info
Per informazioni on-line e l'ordinamento di questo e altri libri Manning, si prega di visitare il sito www.manning.com. L'editore
offre sconti su questo libro quando viene ordinato in quantità. Per ulteriori informazioni, si prega di contattare
Sales Department speciale

Manning Publications Co. 20
Baldwin Strada PO Box 761
Shelter Island, NY 11964 e-mail:

orders@manning.com
© 2016 da Manning Publications Co. Tutti i diritti riservati.
Nessuna parte di questa pubblicazione può essere riprodotta, memorizzata in un sistema di recupero, o trasmessa, in qualsiasi
forma o con mezzi elettronici, meccanici, fotocopie, o altro, senza previa autorizzazione scritta dell'editore.
Molti dei nomi identificativi usati dai produttori e venditori per distinguere i loro prodotti sono rivendicati come marchi.
Quando questi nomi appaiono nel libro, e Manning Publications era a conoscenza di un marchio, vengono designazioni
sono state stampate in maiuscolo iniziali o tutti i tappi.
Riconoscendo l'importanza di preservare quanto è stato scritto, è la politica di Manning per avere i libri che Pubblichiamo
stampati su carta priva di acidi, e noi esercitiamo i nostri migliori sforzi a tal fine. Riconoscendo anche la nostra responsabilità
di conservare le risorse del nostro pianeta, libri Manning sono stampate su carta che è di almeno il 15 per cento riciclati e
trattati senza l'uso di cloro elementare.
Manning Publications Co. Editor di sviluppo: Dan Maharry

20 Baldwin Strada editor di sviluppo tecnico Kostas Passadis
PO Box 761 Copyeditor: Liz Welch
Shelter Island, NY 11964 Correttore di bozze: Barbara Mirecki
correttore di bozze tecniche: Al Krinker
Tipografo: Dennis Dalinnik Cover
Designer: Marija Tudor
ISBN: 9781617292477
Stampato negli Stati Uniti d'America
1 2 3 4 5 6 7 8 9 10 - EBM - 20 19 18 17 16 15

www.it-ebooks.info
brevi contenuti
P ARTE 1 L OOK - UN STELLA CADENTE! ........................................... 1
1 ■ Un modo migliore per costruire applicazioni 3
2 ■ Il mio frigo! Un gioco reattivo 31
P ARTE 2 3, 2, 1- IMPACT! .................................................. ....... 49
3 ■ Lavorare con i modelli 51
4 ■ Utilizzo dei dati 76
5 ■ editing completamente reattivo 105
6 ■ Utenti, autenticazioni e autorizzazioni 130
7 ■ Scambio di dati 153
8 ■ Routing utilizzando Iron.Router 176
9 ■ Il sistema dei pacchetti 203
10 ■ metodi di server avanzate 227
P ARTE 3 L on partenza IL CRATERE................................................ 251
11 ■ Costruzione e debugging 253
12 ■ Andando in produzione 281

www.it-ebooks.info
www.it-ebooks.info
contenuto
prefazione xiii riconoscimenti prefazione
XV XVII su questo libro xix sulla
copertina illustrazione xxiii
P ARTE 1 L OOK - UN TIRO STELLA!................................ 1
1 Un modo migliore per costruire

1.1 Introduzione Meteor 4applicazioni 3
La storia dietro Meteor 4 Il Meteor pila 5 quadri isomorfi: full-stack
■
JavaScript 7 Esame nel browser: in esecuzione su piattaforme distribuite 9

programmazione reattiva 11
1.2 Come funziona Meteor 12

progetti nucleo 14 Isobuild e il codice del client CLI strumento 17 vs
■
codice del server 17
1.3 Punti di forza e di debolezza 19

Dove Meteor brilla 19 Le sfide quando si usa Meteor 21
■
1.4 La creazione di nuove applicazioni 24
La creazione di un nuovo progetto 24 Avvio dell'applicazione 25

■
vii

www.it-ebooks.info
viii CONTENUTO
1.5 dissezione il progetto predefinito 25

helloWorld.css 26 HelloWorld.html 26 helloWorld.js 27
■ ■
1.6 Sintesi 29
2 Il mio frigo! Un gioco reattivo 31

2.1 Panoramica sulle applicazioni 32
2.2 Configurazione iniziale 32
La creazione di un nuovo progetto 33
2.3 Creazione di un layout 34

Impostazione degli stili 34 Aggiungendo i modelli 35
■
2.4 Aggiunta di contenuto al database in tempo reale 38

Memorizzazione degli elementi nel database 38 Collegamento dati per i modelli 40 Aggiunta
■ ■
di un insieme definito di prodotti 43
2.5 Spostamento di elementi in frigo 44

Aggiunta jQuery-UI al progetto 44 Definizione di destinazioni di rilascio per gli elementi 44 Permettere
■ ■
elementi per essere trascinabili 47
2.6 Distribuzione per meteor.com e utilizzando il frigo 48

2.7 Sommario 48
P ARTE 2 3, 2, 1- IMPACT! ............................................. 49
3 Lavorare con i modelli 51

3.1 Introduzione ai modelli 52
3.2 Lavorare con i modelli 53

Il motore 53 Blaze Organizzare i file di modello 54
■
3.3 Creazione di modelli HTML dinamico 55

Tag doppie e triple-rinforzato (espressioni) 55 tag di inclusione (parziali) 57 Etichette
■ ■
block 60 Helpers 63
■
3.4 Gestione degli eventi 68

evento Template mappe 69 propagazione degli eventi 70 Prevenire il
■
comportamento di default del browser 71
3.5 Il ciclo di vita del modello 72

3.6 Sommario 74

www.it-ebooks.info
CONTENUTO ix
4 Utilizzo dei dati 76

4.1 fonti di dati di default del Meteor 79
Che cosa rende una fonte di dati reattiva? 80 Come reattivo dati è collegato alle
■
funzioni 81
4.2 Costruire un'applicazione house-sitter 82
Configurazione dei modelli 84 Collegamento a un database e dichiarando

■
collezioni 85
4.3 Lavorare con l'oggetto Session 86

L'oggetto Session 86 Utilizzando Session per memorizzare selezionato discesa
■
Valori 87 La creazione di un contesto reattiva utilizzando Tracker.autorun 89

■
4.4 Lavorare con MongoDB collezioni 89

Interrogazione documenti in MongoDB 91 Lavorare con le collezioni Meteor 92
■ ■
L'inizializzazione di un insieme di 93 collezioni Interrogazione 94 i dati di

■
raccolta di visualizzazione in un modello 95 L'aggiornamento dei dati in una

■
raccolta 98 Inserimento nuovi dati in un insieme 101 Rimozione dei dati da una
■
collezione 102
4.5 Sintesi 104
5 editing completamente reattivo 105

5.1 Il flusso di lavoro di editing reattivo 106
5.2 anteriore reattiva termina vs. DOM manipolazione 107
5.3 cambiamenti di gestione temporanea di una raccolta locale di 111
5.4 Visualizzazione dei dati di raccolta all'interno di un modulo 115
Aggiunta di informazioni di indice di matrice per un ciclo #each 116
5.5 aggiornamenti reattivi usando una raccolta locale 118

mappa evento per il modello 119 houseForm mappa evento per il modello
■
121 plantFieldset
5.6 L'implementazione di un semplice sistema di notifiche 124
Aggiunta di un modello notifiche 125 Aggiunta di una proprietà di stato

■
125 Utilizzando una variabile di sessione per attivare le notifiche 127

■
5.7 Sommario 129

www.it-ebooks.info
X CONTENUTO
6 Utenti, autenticazioni
6.1 Aggiunta di utenti a e autorizzazioni
un'applicazione 131 130
L'aggiunta di autenticazione della password 132 Registrazione e password ripristino 133
■ ■
Configurazione della posta elettronica 137
6.2 L'autenticazione degli utenti con OAuth 141

Un'introduzione a OAuth 141 L'integrazione di autenticazione Facebook 143 L'integrazione
■ ■
di altri fornitori di OAuth 147
6.3 Gestire le autorizzazioni degli utenti, ruoli e gruppi 148

Gestione delle autorizzazioni con permettere / negare 149
6.4 Sommario 152
7 Scambio di dati 153

7.1 Pubblicazioni e abbonamenti 155
pubblicare () e sottoscrivere () 155 abbonamenti globali 157 sottoscrizioni a livello
■
Modello 158 Parametrizzazione abbonamenti 159 La pubblicazione di dati

■ ■
aggregati a una collezione solo client 162 Girando una pubblicazione di

■
aggregazione in una fonte di dati reattivo 165 Limitare la visibilità dei dati da ID
■
utente 167
7.2 metodi Meteor 169

Rimozione del pacchetto di 170 insicuro Utilizzando metodi per scrivere dati
■
su raccolte 171
7.3 Sommario 174
8 Routing utilizzando
8.1 Routing Iron.Router
in applicazioni 176177
web
8.2 sul lato client di routing 180
Aggiunta Iron.Router 180 Creazione del primo percorsi 181 Definizione di un layout
■
a seconda di un percorso 183 Impostazione del contesto dati in funzione di un

■
percorso 187 abbonamenti dati con Iron.Router 190

■
8.3 metodi avanzati di routing 192

Utilizzando percorsi denominati e aiutanti di collegamento 192 Lavorare con percorsi attivi per la
■
navigazione migliori collegamenti 194 In attesa di librerie esterne per caricare 195 percorsi
■ ■
organizzando i controller 196 che applica la procedura percorso utilizzando ganci 197 La creazione■
di un plug-in Iron.Router 199
8.4 lato server di routing con un'API REST 200

8.5 Sintesi 202

www.it-ebooks.info
CONTENUTO xi
9 Il sistema dei pacchetti 203

9.1 La base di tutte le applicazioni 204
9.2 Utilizzo Isopacks 205
Versione Solver e delle versioni semantica 205 Individuazione dei pacchetti
■
206 Aggiunta e rimozione Isopacks 210 pacchetti Aggiornamento 212

■
9.3 Utilizzo dei pacchetti NPM 212

9.4 Creazione di un Isopack 213
Creazione di un pacchetto 214 Dichiarando pacchetto di metadati 215 Aggiungere
■
funzionalità pacchetto 217 Test Isopacks utilizzando tinytest 220 Pubblicazione 224
■ ■
9.5 Sommario 225
10 metodi di server avanzate 227

10.1 reintroducendo Node.js 227
codice sincrono 228 codice asincrono 230
■
10.2 funzioni asincroni utilizzando fibre 232

Introducendo multitasking al ciclo di eventi 232 callback legame
ad una fibra con wrapAsync 235 chiamate di metodo Sblocco
per un singolo cliente 237 Creazione fibre con bindEnvironment
238
10.3 Integrazione API esterne 240

Effettuare chiamate RESTful con il pacchetto http 241 Utilizzando un
metodo sincrono per interrogare un'API 242 Utilizzando un metodo
asincrono per chiamare un'API 242
10.4 file Caricamento di una collezione 244

Caricamento di file al database 246
10.5 Sommario 249
P ARTE 3 L on partenza IL CRATER .................................... 251
11 Costruzione e debugging 253

11.1 Il Meteor processo di compilazione 254
Costruire stadi 256 Correndo con la bandierina --production 259 ordine di carico 260 Aggiunta di
■ ■
costruire stadi tramite pacchetti 262 Aggiunta di una fase di generazione personalizzata 264

www.it-ebooks.info
xii CONTENUTO
11.2 Accesso alle applicazioni in esecuzione 266

Utilizzando il server shell interattiva 266 Debug utilizzando node-ispettore
■
267
11.3 Creazione di applicazioni browser 270

Configurazione dell'applicazione utilizzando Meteor.settings 270 edifici
Meteor proietta 271
11.4 Creazione di applicazioni mobili 273

apps ibridi con Cordova 273 Aggiunta di piattaforme mobili 274 Configurazione
■
applicazioni mobili 276 L'aggiunta di funzionalità mobili 279

■
11.5 Sommario 280
12 Andando in produzione
12.1 Preparazione 281
per la produzione di 282
Utilizzando il controllo di versione 282 funzionalità di test: il quadro Velocity

■
284 La stima e test di carico 286 amministrazione Server 289 lista di controllo
■ ■
290
12.2 Setup e la distribuzione 290

La distribuzione più semplice: meteor.com 291 All-inclusive di hosting: fornitori di cloud 294 flessibilità
■ ■
completa: configurazione manuale 297
12.3 collegando i pezzi 301

Le variabili d'ambiente 301 Collegamento Meteor MongoDB
■
301
12.4 strategie Scaling 303

elevata disponibilità attivo-passivo con ridondanza 303 monocomponente
implementazioni 304 Ridondanza e bilanciamento del carico 305 disponibilità
■ ■
Bulletproof 307
12.5 Sommario 308
Appendice A Installazione Meteor 309 Appendice B

L'anatomia del MongoDB 314 Appendice C Configurazione
nginx 322
Indice 331

www.it-ebooks.info
prefazione
Nel 2011, Geoff Schmidt, Nick Martin, e ho iniziato a scrivere Meteor, una nuova piattaforma di applicazioni JavaScript. Il nostro
piano era quello di rendere possibile per qualsiasi sviluppatore Javascript per grandi applicazioni web e mobile costruite con un
mimimum di confusione e la confusione.
JavaScript è un notevole tecnologia. Dalle sue umili origini come uno strumento di scripting per i browser, è
diventato il linguaggio di programmazione che gira ovunque: all'interno di un browser, su un dispositivo mobile, e nel
cloud. È favorita da esperti e principianti, una combinazione insolita per l'industria del software. Ma l'ecosistema
JavaScript è molto frammentato, e le squadre che scelgono JavaScript dover montare ed effettuare stack applicativi
completi da zero e spendere troppo del loro tempo lavorando su compiti like-tecnici di basso livello di progettazione
specifici per l'applicazione messaggi-che websocket hanno poco a che fare con la loro effettiva applicazione.
Meteor offre una soluzione semplice e diretta per gli sviluppatori JavaScript che cercano di costruire una
moderna applicazione, e Meteor in azione include tutto il necessario per iniziare. Copre tutte le parti principali della
pila Meteor: il sistema di sincronizzazione di dati che pubblicano nuove informazioni dalla nube di ciascun utente
attivo, forme reattive che ridisegnare lo schermo al variare dei dati, eventi e forme, sistema account isomorfa Meteor,
instradamento, pacchetti , e la sicurezza.
Più di questo, però, Meteor in azione insegna i fondamenti dell'architettura applicazione di Meteor. Meteor è una
piattaforma reattivo full-stack, il che significa che tutte le sue parti, dal driver di database per il motore di template lato
client per spingere il codice a caldo, lavorano insieme per rispondere ai cambiamenti in tempo reale. E Meteor è una
piattaforma isomorfo, il che significa che per quanto possibile il JavaScript API si utilizza sono identici in tutto il
xiii

www.it-ebooks.info
xiv PREFAZIONE
del browser, dispositivi mobili, e nel cloud. Con esempi chiari, gli autori spiegano questi principi e mostrano come si
sommano a formare l'esperienza di sviluppo Meteor.
Stephan e Manuel sono stati attivi nella comunità Meteor da quando i nostri primi rilasci. Hanno contribuito in
innumerevoli thread di posta elettronica e forum, e ora hanno condiviso le loro conoscenze in un libro divertente e
accessibile su Meteor.
pirateria felice!
M ATT D E B ERGALIS
F OUNDER, M ETEOR D SVILUPPO sol RUPPO

www.it-ebooks.info
prefazione
Ho incontrato Manuel nel 2013, quando un amico mi ha portato al primo meetup Meteor Ruhr. Dopo troppi anni nel
mondo enterprise stavo per iniziare la mia attività sulla base di una piattaforma web costruita su PHP. Cosa Manuel ci
ha mostrato in queste prime fasi risolto tanti problemi che aveva affrontato, e ha fatto la programmazione web sembrare
un gioco da ragazzi. Altamente motivato, sono tornato a casa e subito raccolto più materiale su questa nuova
piattaforma. Ho messo la collezione sul mio blog, e dato che avevo appena letto un articolo su SEO che consiglia di
utilizzare superlativi per attirare l'attenzione della gente, ho coraggiosamente affermato di presentare le “migliori risorse
di apprendimento per Meteor.js.” E questo è dove tutto è iniziato .
Nel mese di marzo 2014, Manning mi ha contattato e chiesto se ero interessato a scrivere un libro sulla
piattaforma Meteor promettente. Avevano trovato il mio post sul blog e sono stati convinti ero abbastanza esperto per
spiegare la piattaforma ad altri sviluppatori. Naturalmente ho accettato, ma anche se avevo raccolto la-cosa ho
pensato di essere-best risorse per l'apprendimento, non avevo la minima idea di come applicarli in realtà. Ero ancora
bloccato in PHP-terre. Scrivere un libro è stato un'ottima occasione per imparare tutto su Meteor, così ho felicemente
d'accordo, ma non senza aver prima consultato Manuel e chiedendogli di unirsi a me in questo sforzo. Fortunatamente
per me, ha accettato di scrivere il libro, così insieme abbiamo deciso di spiegare questa nuova piattaforma.
Dopo aver scritto questo libro, sento che la combinazione di vasta conoscenza di Manuel e la mia ignoranza ci
ha aiutato a evitare le insidie di assumere troppo sulla parte del lettore e trovare un buon bilanciamento utilità vs
profondità teorica. Fateci sapere se questa strategia paga.
xv

www.it-ebooks.info
xvi PREFAZIONE
Sentiamo il contenuto di questo libro sono sufficienti per ottenere in buona forma per scrivere applicazioni
sorprendenti. Anche se non siamo in grado di affrontare ogni dettaglio di lavorare con Meteor, ci auguriamo che i
fondamentali vi insegniamo vi aiuterà a capire la documentazione disponibile, i pacchetti, e il codice sorgente molto
meglio. Alla fine della giornata Meteor, e la Meteor in azione libro, stanno consentendo di trasformare le vostre idee in
applicazioni. Diteci cosa avete costruito! Ci potete trovare su Twitter, usare GitHub pronti contro termine del libro, o
inviare nel Autore Forum online per questo libro. Ci piacerebbe sentire di nuovo da voi!
S TEPHAN H OCHHAUS

www.it-ebooks.info
riconoscimenti
Guardando la copertina, si vedrà solo due nomi, Manuel e la mia, ma c'erano così tante persone meravigliose che
hanno contribuito al nostro libro, che sarebbe stato un peccato lasciarli andare sotto silenzio. In primo luogo, grazie
sono dovuti ai genietti di Manning, soprattutto Robin De Jongh, che credevano che un libro su Meteor era una buona
idea, e Ozren Harlovic, che ha fatto il primo contatto con me. Grazie anche alla nostra Redazione Sean Dennis e
Dan Maharry, che hanno contribuito a trasformare la nostra senza senso tecnico in parole intelligibili e grafica. Grazie
alla nostra Copyeditor Liz Welch, che ha dovuto mettere in su con decine di faux amis du traducteur, e al nostro
correttore di bozze Barbara Mirecki, così come ai molti altri ragazzi di Manning che hanno lavorato con noi dietro le
quinte.
La comunità Meteor è stato prezioso nella creazione di questo libro. Vorremmo ringraziare tutti i pionieri in
anticipo (e degli ultimi giorni) utilizzando Meteor e la pubblicazione di articoli sul web, la scrittura dei pacchetti, e
spingendo i confini della piattaforma. Voi sapete chi siete!
editoriale di Manning, la produzione e il personale tecnico era incredibile con cui lavorare, anche se ci hanno
tenuto spingendo duramente per rendere questo libro il meglio che potevamo. Apprezziamo l'assillo; ne valeva la
pena!
Molti recensori hanno letto il manoscritto a vari stadi del suo sviluppo, e vorremmo ringraziarli per fornire un
feedback prezioso: Carl Wolsey, Charlie Gaines, Cristian Antonioli, Daniel Anderson, Daniel Bertoi, David DiMaria,
Dennis Hettema, John Griffiths, Jorge Bo, Keith Webster, Patrick Regan, Subhasis Ghosh, Tim Couger e Touko
Vainio-Kaila.
xvii

www.it-ebooks.info
xviii RINGRAZIAMENTI
Grazie anche al nostro redattore sviluppo tecnico Kostas Passidis, che hanno fatto sì che le nostre spiegazioni
tecniche erano sia accurata e comprensibile, così come ad Al Krinker per la sua revisione tecnica completa del
manoscritto finale poco prima della sua stampa. E speciale gratitudine a Matt DeBergalis per aver contribuito la
prefazione al nostro libro.
Un enorme ringraziamento va a voi, nostri lettori, soprattutto quelli che hanno creduto nel libro nella fase iniziale e
aderito al programma di accesso precoce MEAP quando solo pochi capitoli erano disponibili. Il vostro contributo,
l'interesse e l'incoraggiamento ci ha saziati!
S TEPHAN H OCHHAUS
Vorrei ringraziare detto Seihoub per avermi fatto andare in quel meetup Meteor. Senza di lui questo libro non
sarebbe mai stato scritto. Enormi grazie anche a Manuel, che sapeva sempre una risposta quando mi sono imbattuto
in problemi. La scrittura è un business solitario, quindi grazie anche a tutto il canale IRC #meteor che mi ha tenuto
compagnia quando avevo bisogno di procrastinare. Senza di voi questo libro sarebbe probabilmente uscito già nel
2014!
Grazie anche a Anton Bruckner, Johann Sebastian Bach, Joss Whedon, e Terry Pratchett per creare l'atmosfera
di lavoro a destra. Infine il mio ringraziamento va alla mia famiglia, che ha mostrato un sacco di pazienza quando ho
detto loro una volta al mese che ho finito un capitolo, solo per tornare a quello stesso capitolo la prossima settimana
per riscrivere e 'finitura' di nuovo.
M ANUEL S CHOEBEL
Scrivere un libro richiede molto più impegno di quanto immaginassi, ma è stato un grande viaggio che mi ha aiutato a
scavare più in profondità i dettagli di Meteor. Grazie Stephan per me di salire a bordo. Come sempre, è stato un piacere
lavorare con voi.
Durante la stesura di questo libro sono andato su un altro viaggio così, con la mia startup che ha preso tanto del
mio tempo. Christina, senza il tuo indulgenza e la pazienza e il sostegno che non avrebbe lavorato su entrambi i
progetti, in modo da grazie per essere così grande come sei!
Avere una famiglia che è sempre dietro di voi è un lusso che non tutti experinces. So che e apprezzo molto, mi
dia la pace della mente quando le cose si fanno difficili.
Ultimo ma non meno importante, ringrazio tutti coloro che sono parte del gruppo di persone che lavorano per
rendere il web più impressionante ogni giorno. Questo include non solo i ragazzi di Meteor per sé, ma anche tutti
coloro che crea nuovi pacchetti, si unisce meetup, o è appena iniziando a imparare a portare le loro idee per il web. Il
web ci ha dato la libertà di imparare e di esplorare, di lavorare e di giocare, più libertà di quanto abbiamo mai
conosciuto in passato. Si tratta di un parco giochi in cui si può anche fare una vita. Vi invitiamo a giocare con noi!

www.it-ebooks.info
A proposito di questo libro
Una frase comune che si sente da sviluppatori esperti è che “la creazione di applicazioni non è scienza missilistica.”
Anche se non può essere così complicato come l'invio di persone nello spazio, può essere abbastanza scoraggiante per
i non iniziati. Un gran numero di strumenti e componenti del server è in genere necessario per mettere le applicazioni sul
web, per non parlare di dispositivi mobili. Meteor mira a diventare un game-changer. Come Nick Martin, uno dei creatori
di Meteor, lo mette:
A Meteor, speriamo di democratizzare lo sviluppo web app che abilita chiunque, ovunque per
creare applicazioni. 1
Abbiamo visto persone con solo la conoscenza di base di HTML e CSS trasformare le loro idee in codice dopo meno
di un giorno con Meteor. Come tale crediamo che renderà più facile lo sviluppo. Sarà anche aprire lo sviluppo per le
persone che non hanno mai considerato se stessi sviluppatori.
Se non avete un buon insegnante si avrà probabilmente bisogno di più di mezza giornata per conoscere il modo
per aggirare la piattaforma Meteor. Qui è dove Meteor in azione entra in gioco. E 'il vostro insegnante personale che ti
guida attraverso tutti i principali aspetti delle applicazioni che creano, a prescindere se si desidera scrivere un web o
app mobile. Alla fine si sarà in grado di trasformare le proprie idee in codice. Se avete fatto questo prima Meteor,
sarete stupiti di quanto velocemente Meteor risolve alcuni dei problemi più comuni.
1 http://blog.heavybit.com/blog/2014/04/01/meteor
xix

www.it-ebooks.info
xx SU QUESTO LIBRO
quando si scrive Meteor in azione abbiamo voluto affrontare sia gli sviluppatori front-end che vogliono estendere
le loro competenze per il lato server e agli sviluppatori un server in background, rendendo il passaggio da Java,
Ruby, o PHP per stack completo JavaScript. Non è un libro per principianti; ci aspettiamo che avete costruito (o
almeno provato) qualcosa per il web prima.
Come tutti gli strumenti che sono ancora in uso, Meteor è in continua evoluzione e in continua evoluzione. Abbiamo
preso grande cura per gettare una buona base con questo libro per insegnare i fondamenti di questa piattaforma. Abbiamo
confermato che tutte le funzionalità descritte nei capitoli seguenti funziona bene con la versione 1.1.
Roadmap
Meteor in azione è organizzato in tre parti.
Parte 1 fornisce una panoramica di alto livello della piattaforma. Introduce i vari componenti ei concetti che
costituiscono la pila Meteor. Dopo un primo sguardo a Node.js, MongoDB, isomorfismo, e reattività nel capitolo 1,
potrete costruire la vostra prima applicazione Meteor nel capitolo 2.
Parte 2 vi insegna i mattoni fondamentali per le applicazioni reattive. Ogni capitolo si concentra su un aspetto
diverso di applicazioni di scrittura. Capitolo 3 inizia con i modelli, capitolo 4 spiega come lavorare con i dati ed
eseguire operazioni CRUD. Capitolo 5 mette insieme questi due e mette in evidenza alcune importanti considerazioni
per la costruzione di interfacce reattivi. Capitolo 6 introduce un modo per proteggere le applicazioni da portare in
funzionalità user-related. Il capitolo seguente 7 spiega come sostituire il meccanismo di pubblicazione automatica dei
dati Meteor utilizza di default. Copre pub / sub concetto di Meteor e come utilizzare i metodi per implementare un
ulteriore livello di sicurezza. le operazioni di instradamento su client e server utilizzando la libreria Iron.Router
popolare è discusso nel capitolo 8. Capitolo 9 insegna come utilizzare i pacchetti per estendere la funzionalità di base
del Meteor, sia utilizzando Isopacks esistenti, pacchetti NPM, o scrivere il proprio. Capitolo 10 si conclude la seconda
parte del libro, cercando in metodi lato server per le operazioni asincrone, l'accesso API esterne, o il caricamento dei
file.
Parte 3 prende un ulteriore passo avanti e copre la costruzione e la distribuzione delle applicazioni in modo
corretto. Capitolo 11 spiega sistema di compilazione del Meteor, il debug del codice, e su come trasformare il vostro
codice in entrambe web e applicazioni mobili. Il capitolo 12 indirizzi finali vari aspetti della vostra applicazione mettere
Meteor in produzione.
Il libro si conclude con tre appendici. Appendice A comprende l'installazione di Meteor su tutte le piattaforme
supportate. Appendice B fa luce sull'architettura di MongoDB e quali componenti sono utilizzati per ottenere elevata
disponibilità. Esso comprende anche le istruzioni su come impostare tailing oplog, una tecnica importante dietro
l'approccio di Meteor alla scalabilità. Appendice C insegna come impostare il nginx proxy inverso per il bilanciamento
del carico tra più server Meteor, che serve contenuti statici, e permettendo SSL.

www.it-ebooks.info
SU QUESTO LIBRO xxi
Prerequisiti
Per ottenere il massimo da questo libro, è necessario aver Meteor installato sul vostro sistema. Istruzioni per
l'installazione Meteor si possono trovare in appendice A e anche sul sito ufficiale Meteor (http://meteor.com).
In tutto il libro si presuppone di avere almeno una conoscenza di base di HTML, CSS e JavaScript. Si deve
sapere come lavorare con gli oggetti e hanno utilizzato un callback prima. E 'anche utile, ma non necessario, avere
una conoscenza di base di come il lavoro dei database. Tuttavia, non è necessario avere alcuna esperienza con
server-side JavaScript o anche Node.js per essere in grado di seguire.
Codice
Tutto il codice presentato in questo libro è disponibile come download dal sito web
www.manning.com/books/meteor-in-action Manning. È inoltre possibile trovare su GitHub a
www.github.com/meteorinaction.
Per rendere più facile da seguire, ogni capitolo è disponibile come un repository git separata. Poiché non tutto il
codice viene stampato nel libro, abbiamo aggiunto tag per ogni repository rendendo più facile per voi per tornare in pista se
mai perdersi. Ad esempio, quando si inizia il capitolo 2, è possibile fare riferimento al codice contrassegnati come inizio per
vedere ciò che il codice che inizia assomiglia. Se si desidera passare direttamente al quando abbiamo aggiunto infissi
all'avvio del server, controllare il codice tag elenco-2.9.
Autore online
L'acquisto di Meteor in azione include l'accesso gratuito a un forum privato gestito da Manning Publications dove è
possibile fare commenti sul libro, porre domande tecniche, e ricevere aiuto da parte degli autori e altri utenti. Per
accedere e iscriversi al forum, puntare il browser su www.manning.com/books/meteor-in-action. Questa pagina
fornisce informazioni su come ottenere sul forum Una volta registrati, che tipo di aiuto è disponibile, e le regole di
comportamento nel forum.
L'impegno di Manning ai nostri lettori è quello di fornire un luogo in cui un dialogo significativo tra i singoli lettori
e tra i lettori e gli autori può avvenire. Non è un impegno a qualsiasi specifica quantità di partecipazione da parte
degli autori, i cui contributi al forum del libro rimane volontaria (e gratuita). Vi consigliamo di provare a chiedere loro
alcune domande impegnative, per timore che i loro interessi randagi!
L'Autore Forum online e gli archivi delle discussioni precedenti saranno accessibili dal sito della casa editrice
fino a quando il libro è in stampa.
Riguardo agli Autori
Stephan Hochhaus iniziato la sua carriera di sviluppo quando accidentalmente si è trovato in una classe Perl per
linguisti. Dopo molti anni di lavoro per le grandi imprese che creano soluzioni web scalabili e diversi scaglia con PHP,
C #, Java e anche, nel 2013 ha iniziato la sua attività di sviluppo applicazioni web per le piccole e medie imprese. Dal
momento che ha incontrato Meteor si sente pronto a stabilirsi con JavaScript. Stephan fa anche

www.it-ebooks.info
xxii SU QUESTO LIBRO
attività di consulenza per le squadre che introducono mischia o erogazione continua. Ha conseguito un master in
linguistica e socio-psicologia presso l'Università di Bochum e parla correntemente espressioni regolari.
Manuel Schoebel diplomato in informatica di gestione presso l'Università di Essen, con un focus particolare sul web
imprenditorialità. Manuel ha passato molto del suo tempo di coaching fondatori e lo sviluppo di MVP e anche fondato
diverse startup. Ha iniziato con Meteor nel 2012 quando la piattaforma era ancora nella sua infanzia e divenne
rapidamente un esperto di fama nella comunità Meteor per il suo prezioso post del blog. Dal 2013, Manuel usa
Meteor esclusivamente per i suoi progetti.
Insieme, Manuel e Stephan hanno stabilito meetup Meteor a Colonia e la zona della Ruhr in Germania, che riunisce
gli sviluppatori Meteor per scambiare idee e presentare nuovi sviluppi.
A proposito del titolo
Combinando introduzioni, panoramiche, e come da esempi, la in Azione libri sono progettati per aiutare
l'apprendimento e ricordare. Secondo la ricerca nelle scienze cognitive, le cose che le persone ricordano sono cose
che scoprono durante l'esplorazione auto-motivato.
Anche se nessuno a Manning è uno scienziato cognitivo, siamo convinti che per imparare a diventare
permanente deve passare attraverso le fasi di esplorazione, gioco, e, curiosamente, rivisitazione di ciò che viene
appreso. La gente capisce e ricordare nuove cose, vale a dire che loro padrone, solo dopo che li esplorando
attivamente. Gli esseri umani imparano in azione. Una parte essenziale di un in Azione libro è che è exampledriven.
Essa incoraggia il lettore a provare le cose, per giocare con il nuovo codice, ed esplorare nuove idee.
V'è un altro, più banale, motivo per il titolo di questo libro: i nostri lettori sono occupati. Usano i libri per fare un
lavoro o risolvere un problema. Hanno bisogno di libri che consentono loro di saltare dentro e saltano fuori facilmente
e imparare solo ciò che vogliono solo quando lo vogliono. Hanno bisogno di libri che li aiutano in azione. I libri di
questa serie sono stati progettati per tali lettori.

www.it-ebooks.info
circa l'illustrazione di copertina
La figura sulla copertina di Meteor in azione è un “Roustabout” -un manovale, marinaio, o lavoratore dock, di
disposizione apparentemente pugnace. L'illustrazione è tratta da un'edizione di quattro volumi compendio di Sylvain
Maréchal dei costumi vestito regionali pubblicati in Francia del diciannovesimo secolo. Ogni illustrazione è finemente
disegnate e colorate a mano. La ricca varietà della collezione di Maréchal ci ricorda vividamente di come
culturalmente parte città e regioni di tutto il mondo sono stati solo 200 anni fa. Isolati l'uno dall'altro, la gente parlava
dialetti diversi e linguaggi. Nelle strade o in campagna, era facile individuare dove hanno vissuto e quale sia il loro
mestiere o posizione nella vita era solo per il loro vestito.
codici di abbigliamento sono cambiate da allora e la diversità per regione, così ricco al momento, è svaniti. Ora è
difficile distinguere gli abitanti di diversi continenti, per non parlare di città o regioni diverse. Forse abbiamo
scambiato la diversità culturale per una più vario vita personale certamente per una vita tecnologica più varia e
veloce.
In un momento in cui è difficile dire un libro computer da un altro, Manning celebra l'inventiva e iniziativa del
business dei computer con il libro copertine sulla base della ricca diversità della vita regionale di due secoli fa,
riportato in vita da immagini di Maréchal.
xxiii

www.it-ebooks.info
www.it-ebooks.info
Parte 1
Look-una stella cadente!
P art 1 serve come una panoramica di alto livello. Si prende in esame i vari pezzi che compongono la
piattaforma Meteor e come funzionano insieme. Ci presentiamo a Node.js, MongoDB, e il concetto di
programmazione reattiva. Dopo uno sguardo approfondito al l'intero stack nel capitolo 1, ti costruire la vostra
prima applicazione Meteor nel secondo capitolo.

www.it-ebooks.info
www.it-ebooks.info
Un modo migliore per costruire applicazioni
Questo capitolo tratta

■ La storia dietro Meteor
■ Lo stack Meteor
■ Full-stack JavaScript, la reattività, e piattaforme
distribuite
■ I componenti principali della piattaforma Meteor
■ I pro ei contro di utilizzare Meteor

■ L'anatomia di applicazioni Meteor
Meteore hanno una reputazione di cambiare la vita come noi la conosciamo. Sono in grado di fare dinosauri
estinti o forzare Bruce Willis a sacrificare la sua vita per l'umanità. Questo libro parla di una meteora che lo
sviluppo impatti web, ma non minaccia di distruggere qualsiasi cosa. Al contrario, promette di offrire un modo
migliore per creare applicazioni. Meteor richiede diversi strumenti e librerie esistenti; li combina con nuovi
pensieri e nuove librerie, gli standard e servizi; e li fasci di fornire un intero ecosistema per lo sviluppo di
applicazioni web e mobile che sono un piacere da usare.

www.it-ebooks.info
4 CAPITOLO 1 Un modo migliore per costruire applicazioni
Meteor è un open source, MEAN 1 basata su stack piattaforma di sviluppo di applicazioni progettato per avere un'API
JavaScript coerente tra client e server, con un focus sulla real-time, applicazioni reattive, la prototipazione rapida, e il
riutilizzo del codice.
Come sviluppatore, si sa che una volta che si apre la vista origine del tuo browser tutte le applicazioni web sono
solo una combinazione di HTML, CSS e JavaScript. Giganti come Google, Twitter, o Facebook ottenere risultati
impressionanti che guardare e sentire come applicazioni desktop piuttosto che siti web. La scorrevolezza di Google
Maps e l'immediatezza di Facebook Messenger ha portato ad utenti che hanno molto più alte aspettative verso tutti i
siti su Internet. Meteor consente di soddisfare queste aspettative perché fornisce tutte le funzionalità di infrastrutture
come abbonamenti dati e la gestione degli utenti, permettendo di concentrarsi sull'implementazione di funzionalità di
business.
In questo capitolo vi dirà come Meteor rende la vita più facile come sviluppatore. Dopo un breve sguardo al motivo per cui
è stato creato, ci concentreremo su ciò che è costituito da e come si può utilizzare per costruire le proprie applicazioni che
possono aver solo una frazione del tempo.
1.1 L'introduzione di Meteor
Se si guarda lo stato di sviluppo web negli ultimi anni, vedrete due tendenze chiare. In primo luogo, le applicazioni
diventano più potenti, spesso indistinguibili da applicazioni desktop. Francamente, gli utenti non importa ciò che la
tecnologia è che lavora dietro le quinte; semplicemente si aspettano una grande esperienza utente. Questo include un
feedback immediato sui clic, interazione in tempo reale con altri utenti, e l'integrazione con altri servizi. La seconda
tendenza è che il numero di lingue, biblioteche, strumenti e flussi di lavoro è in aumento così rapidamente che sta
diventando impossibile per gli sviluppatori di tenere il passo con tutte le tendenze. Di conseguenza, possiamo
riassumere lo stato attuale di sviluppo web:
1 Gli utenti si aspettano più convenienza dalle applicazioni.
2 Gli sviluppatori si aspettano di preoccuparsi meno di fare diverse biblioteche funzionano bene
insieme o scrivere codice tubature.
1.1.1 La storia dietro Meteor
Quando Geoff Schmidt, Matt DeBergalis, e Nick Martin ottenuto accettati nel acceleratore di seme di avvio Y
Combinator, che prevede di costruire un sito raccomandazione viaggio. Ma quando hanno parlato ai compagni di
start-up, si sono resi conto di quanto hanno lottato con le stesse sfide che avevano già risolto quando hanno lavorato
su Asana, una piattaforma online per progetto di cooperazione e gestione delle attività. Così hanno cambiato i loro
piani e ha deciso di venire con una piattaforma open source per fornire una solida base per le applicazioni web che
sono altrettanto agevole da usare come applicazioni desktop.
1 Lo stack MEAN si riferisce a tutte le applicazioni costruite su MongoDB, Node.js, angolare, e Express.js.
Ci sono diverse varianti della pila MEAN, come MEEN-MongoDB, Ember.js, espresso e Node.js. A volte il termine viene usato
impropriamente per indicare qualsiasi infrastruttura in esecuzione su Node.js in combinazione con un database NoSQL.

www.it-ebooks.info
L'introduzione di Meteor 5
Il 1 ° dicembre 2011, il gruppo di sviluppo Meteor (MDG) ha annunciato la prima versione di anteprima di
Skybreak, 1 che subito dopo ha ottenuto rinominato Meteor. Solo otto mesi più tardi, il progetto aveva organizzato per
$ 11,2 milioni finanziamenti da grandi nomi del settore, come Andreessen Horowitz, Matrix Partners, Peter Levine (ex
CEO di XenSource), Dustin Moskovitz (co-fondatore di Facebook), e Rod Johnson (fondatore di SpringSource). Il
repository Meteor GitHub è rimasto nella top 20 repository più popolari da allora e è salito a diventare il 11 °
repository più popolare su GitHub pochi giorni dopo la sua release 1.0, avere più stelle di quanto il kernel di Linux,
Mac OS X gestore di pacchetti homebrew, e backbone.js.
Perché Meteor ha creato tale interesse con gli sviluppatori? Perché toglie la necessità di creare infrastrutture di
basso livello, come la sincronizzazione dei dati o per costruire oleodotti per minimizzare e compilare il codice e
permette agli sviluppatori di concentrarsi sulle funzionalità di business. Con più di $ 11 milioni nel finanziamento, gli
investitori trovano Meteor molto attraente. Simile a Xen, l'hypervisor gratuito per la virtualizzazione dei server, o JBoss,
l'application server Java, l'OSM finirà per offrire strumenti aggiuntivi destinati a imprese più grandi.
Il MDG divide i suoi progetti in quattro aree:
■ Utensili come una riga di comando interfaccia (CLI), un ibrido tra un accumulo strumento come
rendere e un gestore di pacchetti come il gestore dei pacchetti nodo NPM, che si occupa di interi flussi di
generazione che preparano una domanda di mobilitazione per i dispositivi web o mobili
■ Una collezione di librerie software, una serie di pacchetti fondamentali che forniscono funzionalità che possono anche
essere esteso con pacchetti personalizzati o moduli installati tramite Node.JS npm
■ Standards come il Distributed Protocol Data (DDP), un protocollo di dati basati WebSocket
■ Servizi come ad esempio un server pacchetto ufficiale o una fattoria di compilazione
Tutti i progetti di Meteor sono accessibili tramite un API unificata in modo che gli sviluppatori non hanno bisogno di sapere
quali componenti compongono l'intero stack Meteor.
1.1.2 Lo stack Meteor

In poche parole, Meteor è una piattaforma open source per la creazione di applicazioni web ricche interamente in
JavaScript. Esso raggruppa e fornisce tutti i pezzi necessari sotto un unico ombrello. Si compone di Node.js, MongoDB,
il codice dell'applicazione effettiva, e un potente strumento CLI che combina la potenza di npm e rendere. Come tale, è più
di una combinazione di processi server e librerie. Alcuni, come per riferirsi ad esso come un intero ecosistema piuttosto
che un quadro. Ma anche se si va al di là di quello che offrono altri framework web, al suo interno si basa ancora su una
pila per eseguire le applicazioni.
Lo stack Meteor (vedi figura 1.1) è un membro della famiglia MEAN, che significa che è alimentato dal Node.js
sul lato server. Node.js è un event-driven, altamente scalabile
1 https://www.meteor.com/blog/2011/12/01/first-preview

www.it-ebooks.info
La stessa base di codice viene utilizzato

per distribuire applicazioni per il web e
dispositivi mobili.
Mobile
Browser
Ibrido
App
Le applicazioni possono usufruire di molti

pacchetti che forniscono funzionalità, come ad
esempio gli account di accesso OAuth,
App interfacce utente reattiva, e richiesta di routing.
Lo strumento CLI gestisce il

processo di creazione, la Node.js è un ambiente runtime
gestione dei pacchetti, la altamente scalabile event-driven
codice dell'applicazione
distribuzione app, e di altre per JavaScript sul server.
attività comuni.
MongoDB Node.js MongoDB è il database predefinito per Meteor.

Come un database NoSQL memorizza i
documenti, piuttosto che le tabelle.
strumento CLI Server
Figura 1.1 Lo stack Meteor esegue le applicazioni alimentate da pacchetti intelligenti in cima Node.js e MongoDB.
runtime per JavaScript sul server. Esso serve allo stesso scopo come un server web Apache nel LAMP (Linux,
Apache, MySQL, PHP) stack.
Tutti i dati sono in genere memorizzati all'interno di un MongoDB, un database NoSQL document-oriented. Ci sono
piani per Meteor per supportare altri sistemi di database (SQL-based), ma attualmente l'unico database suggerito è
Mongo. Esso fornisce un'API JavaScript che permette di accedere a tutti i contenuti memorizzati sotto forma di
documenti o oggetti. Lo stesso linguaggio usato all'interno del browser può essere utilizzato per accedere ai dati, che
Meteor prende vantaggio di implementare vero sviluppo full-stack.
Tutti i software e le librerie necessarie per creare applicazioni web da zero sono in bundle nella forma di
pacchetti intelligenti, per cui gli sviluppatori possono iniziare subito. Questi pacchetti includono una biblioteca reattiva
UI (Blaze), gestione degli account utente (account), e una biblioteca di programmazione reattiva trasparente
(Tracker).
Lo strumento Meteor CLI consente agli sviluppatori di configurare rapidamente un intero ambiente di sviluppo. Non
c'è bisogno di sapere come installare o configurare alcun software server; Meteor si prende cura dell'aspetto
infrastrutture del tutto. E 'anche sia un tool di creazione, paragonabile a rendere o grugnito, e un gestore di pacchetti,
come adatto o NPM. Ad esempio, si può compilare lingue preprocessore come less o CoffeeScript al volo, senza prima
configurare il flusso di lavoro, o di aggiungere l'autenticazione via Facebook OAuth con un singolo comando. Infine, lo
strumento CLI bundle di un'applicazione per l'esecuzione su piattaforme client diversi, all'interno di un browser web o
come applicazioni mobili native.

www.it-ebooks.info
Tutte le parti della pila si integrano perfettamente; tutti i pacchetti fondamentali sono progettati e testati per
lavorare bene insieme. D'altra parte, è del tutto possibile passare fuori parti dello stack per gli altri, in caso di
necessità. Invece di usare Meteor in pieno, si potrebbe decidere di utilizzare solo i componenti server e l'uso, per
esempio, Angular.js sul lato client, o utilizzare un back-end Java che utilizza Meteor sul front-end per fornire
aggiornamenti in tempo reale a tutti i clienti.
1.1.3 quadri isomorfi: full-stack JavaScript
Meteor gira sopra Node.js e sposta la logica dell'applicazione al browser, che è spesso definito come le applicazioni
una sola pagina. La stessa lingua viene utilizzato attraverso l'intero stack, che rende Meteor una piattaforma isomorfa.
Di conseguenza, lo stesso codice JavaScript può essere utilizzato sul server, il client, e anche nel database.
Anche se molti framework utilizzano lo stesso linguaggio sia su client e server, il più delle volte non possono
condividere il codice tra le due istanze perché i quadri non sono strettamente integrati, per esempio, usano angolare
sul front-end e Express.js sul back-end. Meteor è veramente full-stack perché utilizza un API semplice e unificata che
espone tutte le funzionalità di base e può essere utilizzato sul server, nel browser, e anche per accedere al database.
Per iniziare non c'è bisogno di imparare di più quadri, e il risultato e 'molto meglio riusabilità del codice che solo
utilizzando lo stesso linguaggio.
Per consentire di accedere alla banca dati dal browser, Meteor comprende mini-database. Essi simulano la
stessa API di un database. All'interno del browser, Minimongo consente agli sviluppatori di utilizzare gli stessi comandi
come farebbero in una console MongoDB.
Tutte le applicazioni Meteor eseguire su di Node.js, un server che interpreta codice applicativo scritto in
JavaScript. A differenza di molti altri server applicativi, utilizza solo un singolo filo. In ambienti multithread, un unico
filo che scrive su disco può bloccare tutti gli altri thread e mettere tutte le ulteriori richieste dei client in attesa fino a
quando un'operazione di scrittura termina. Node.js, d'altra parte, è in grado di coda tutte le richieste di scrittura e
continuare prelievo e il trattamento richieste, evitando efficacemente condizioni di corsa (cioè, due operazioni
cercano di aggiornare gli stessi dati simultaneamente). Il codice di applicazione viene eseguita in sequenza dall'alto
verso il basso, o in modo sincrono.
operazioni di lunga durata come I / O di disco o il database potrebbe essere scissi dalla sequenza sincrona.
Saranno trattati in modo asincrono. Node.js non aspetta che questi finitura, ma che attribuisce un callback e rivisita i
risultati di un'operazione volta finisce, nel frattempo lavorando sulle prossime richieste in linea. Per meglio
comprendere gli eventi sincroni e asincroni, prendiamo in considerazione uno scenario di programmazione familiare:
scaldando una pizza surgelata.
Figura 1.2 dettagli tutti i passaggi necessari per preparare cibi dal congelatore. Ogni passo è un evento, anche se un
grazioso piccolo nella nostra vita. Ogni evento che richiede la nostra attenzione si svolge in un flusso sincrono di eventi:
prendiamo la pizza dal congelatore, scartarlo, preriscaldare il forno, mettere la pizza in, e impostare una sveglia. Questo è il
punto in cui abbiamo effettivamente ramifichiamo fuori un sottoprocesso. Al suo centro, la cottura della pizza nel forno è un
processo di lunga durata di I / O. Abbiamo impostato l'allarme per essere avvisati quando è fatto in modo che possiamo

www.it-ebooks.info
Sincrono fl usso
Prendere la Pizza Preriscaldare Mettete la pizza Imposta Callback

Imparare Meteor
pizza da frigo unwrap il forno in forno sveglia su
pizza take
pizzaiolo
sottoprocesso asincrono
Figura 1.2 eventi sincroni e asincroni quando si riscalda una pizza
occuparsi di questioni più importanti, come imparare Meteor. Quando suona la sveglia, si richiama la nostra attenzione e
pone il risultato del sottoprocesso nel nostro flusso sincrono. Siamo in grado di prendere la pizza fuori e andare avanti.
Come si può vedere da questo esempio, cucinare la pizza non blocca il flusso. Ma se il vostro collega vuole
anche una pizza e v'è spazio per un solo all'interno del forno, avrà bisogno di fare la coda la sua richiesta-questo
blocca efficacemente tutti gli altri in ufficio da riscaldamento loro pizza.
Nel Node.js il flusso sincrono avviene fino a quando il server esegue. Si chiama ciclo di eventi. Figura 1.3 mostra
come le offerte ciclo evento di elaborazione richieste degli utenti. Prende un evento alla volta da una coda. Il codice
associato viene eseguito, e quando finisce, l'evento successivo viene tirato nel circuito. Ma alcuni eventi possono
essere scaricate ad un esempio piscina per filo, le operazioni di scrittura su disco o in un database. Una volta che
l'operazione di scrittura è terminata, una funzione di richiamata verrà eseguita che restituisce il risultato
dell'operazione di nuovo nel ciclo di eventi.
coda di eventi Singolo-filettato Discussione

in lavorazione
Evento
ciclo di eventi Disco

Split fuori ad un
Evento Node.js
processo figlio
Rete
Evento
Processi
Evento
... piscina
...
Richiama
Figura 1.3 Il ciclo degli eventi Node.js

www.it-ebooks.info
In genere, gli sviluppatori hanno bisogno di sapere come scrivere codice che sfrutta al meglio il ciclo degli eventi e
quali funzioni eseguito in modo sincrono e che in modo asincrono. La funzionalità più asincrona viene utilizzata, più
callback sono coinvolti e le cose possono diventare piuttosto confusa.
Fortunatamente, Meteor sfrutta tutta la potenza del ciclo di eventi, ma rende più facile perché non c'è bisogno di
preoccuparsi tanto di scrittura di codice asincrono. Esso utilizza un concetto chiamato fibre dietro le quinte. Fibre
forniscono un livello di astrazione per il ciclo degli eventi che esegue funzioni asincrone (task) in sequenza. Si elimina
la necessità di callback espliciti in modo che uno stile sincrona familiare può essere utilizzato.
1.1.4 lavorazione nel browser: in esecuzione su piattaforme distribuite
Quando si utilizza un back-end che esegue un'applicazione Java, PHP o Rails, l'elaborazione avviene lontano
dall'utente. I clienti richiedono dati chiamando un URI. In risposta, l'applicazione recupera i dati da un database,
esegue alcune di elaborazione per creare HTML, e invia i risultati a un client. I più clienti richiedono le stesse
informazioni, tanto più la cache può essere fatto dal server. siti di notizie funzionano particolarmente bene con questo
paradigma.
In uno scenario in cui ogni utente ha i mezzi per creare visualizzazioni altamente individualizzati, una singola istanza di
trasformazione può rapidamente diventare un collo di bottiglia. Considerare Facebook come un esempio: non ci sono due
persone potrà mai vedere la stessa parete deve essere calcolato per ogni utente individualmente. Che mette un sacco di stress
sui server, mentre client inattivi maggior parte del tempo, in attesa di una risposta.
Quando la potenza di elaborazione dei clienti è stato relativamente limitato questo ha reso perfettamente senso,
ma in questi giorni un singolo iPhone ha già più potenza di calcolo rispetto alla maggior parte dei supercomputer nei
primi giorni del web. Meteor sfrutta il potere e delega la maggior parte del trattamento ai clienti. Intelligente front-end
dei dati richiesta dal server e assemblare il Document Object Model (DOM) solo nel browser o dispositivo mobile
(vedi figura 1.4).
applicazioni web Server Presentazione

in lavorazione DOM
tradizionali DB
<Html> <ul> <li> Camicie </
li> <li> Scarpe </ li> <li>
Data Maglioni </ li> </ ul> </ html> Browser Utente
Moderne Dati
in lavorazione DOM
applicazioni web ricche DB
[{Name: "Camicie"}, {name:
"scarpe"}, {name: "Felpe"}]
server Browser Utente
Figura 1.4 La differenza tra le applicazioni web ricche tradizionali e moderni

www.it-ebooks.info
Questo approccio cliente-centrico porta due vantaggi significativi:
■ Meno dati devono essere trasferiti tra server e client, che si traduce in sostanza in tempi di risposta rapidi.
■ L'elaborazione è meno probabilità di essere bloccati da altri utenti a causa di richieste di lunga durata, perché la
maggior parte del lavoro è fatto su ogni singolo cliente. architetture client-server tradizionali si basano su connessioni
senza stato. I clienti richiedono dati una volta, il server risponde, e la connessione viene chiusa di nuovo.
Aggiornamenti da altri client possono accadere, ma a meno che gli utenti fanno in modo esplicito una richiesta al server
di nuovo, non vedranno gli aggiornamenti ma un'istantanea storica del sito. Non c'è nessun canale di ritorno dal server
al client per spingere fuori contenuti aggiornati.
Immaginate di aprire il sito del vostro cinema locale e vedere solo due posti a sedere sono a sinistra per il nuovo film
in anteprima Joss Whedon. Mentre si discute se si dovrebbe andare, qualcun altro compra questi biglietti. Il tuo browser
mantiene dicendo che due posti sono disponibili fino a quando si decide di fare clic di nuovo, solo per scoprire che i
biglietti sono andati. Bummer.
Lo spostamento del processo da un singolo server a più client prevede lo spostamento nella direzione delle
piattaforme di calcolo distribuito. In questi ambienti distribuiti, i dati devono essere inviati in entrambe le direzioni. In
Meteor, il browser è una smart client. I collegamenti non sono più apolidi; il server può inviare i dati al client quando
sono disponibili aggiornamenti del contenuto di sottoscritto. Figura 1.5 mostra le varie architetture. Per consentire la
comunicazione bidirezionale tra server e client, Meteor utilizza WebSockets. Un protocollo standardizzato di nome Distributed
Protocol Data ( DDP) viene utilizzato per lo scambio di messaggi. DDP è semplice da usare e può essere usato con
molti altri linguaggi di programmazione come PHP o Java pure.
Come conseguenza di spostare le applicazioni per il browser, tutti i clienti diventano essenzialmente i nodi di un
cluster Application. Questo introduce già nuove sfide
smart
Cliente client
Banca dati
Banca dati Banca dati

smart
Cliente
server server client
Banca dati
architettura client-server tradizionale piattaforma di applicazioni distribuite
• Gli aggiornamenti per il browser avvenire solo quando i • Il server può spingere contenuti aggiornati a tutti i
clienti richiedono nuovi contenuti. client connessi.
• Le modifiche apportate da altri clienti sono visibili solo • Le modifiche apportate da un client attivano il server per
quando le richieste si svolgono. aggiornare attivamente tutti i clienti.
Figura 1.5 architetture client-server tradizionali rispetto alle piattaforme applicative distribuite

www.it-ebooks.info
familiare dal server farm distribuite, soprattutto sincronizzazione dei dati tra tutti i nodi. Meteor prende cura di questo
per mezzo di sua natura reattiva.
1.1.5 programmazione reattiva
Le applicazioni create da paradigmi di programmazione tradizionali sono molto simile a un golem 1

hai mandato via con un piano. Non importa cosa succede, il golem si continua a camminare e seguendo le indicazioni.
Come il suo creatore, è necessario essere diligenti ogni passo vi comando. Ad esempio, in un'applicazione è
necessario definire che si desidera ascoltare le modifiche a un elemento di discesa e quali azioni da intraprendere
quando viene selezionato un nuovo valore. Inoltre, è necessario definire ciò che l'applicazione dovrebbe fare se un
altro utente ha nel frattempo cancellato la voce associata mentre il primo vuole per visualizzarne il contenuto. In altre
parole, la programmazione tradizionale difficilmente reagisce al mondo, ma segue ordini dati ad esso nel codice.
Il mondo reale sembra essere leggermente diversa. Soprattutto sul web, un sacco di eventi accadere e gli scenari
di utilizzo più complessi ottenere, più difficile è quello di prevedere in cui si verificheranno gli eventi di sequenza.
In un ambiente desktop reattività è la norma. Quando si utilizza un foglio di calcolo di Microsoft Excel e modifica
il valore in una cella, tutti gli altri valori a seconda che ricalcola automaticamente. Anche le classifiche saranno
adeguati, senza la necessità di fare clic ricaricare.
Un evento, come la modifica di una cella, scatena reazioni in parti correlate del foglio. Tutte le cellule sono reattivi.
Per illustrare come reattività differenzia dalla programmazione procedurale, diamo un'occhiata a un semplice esempio.
Abbiamo due variabili: un e b. Ci memorizzare il risultato della somma un e
B in una variabile denominata c utilizzando la via procedurale di fare le cose. Con valori attuali, sembra che questo:
a = 2; b = 5; c = a +
b;
Il valore di c è ora 7. Cosa succede se cambiamo il valore di un a 5? c non cambierà a meno che non esplicitamente
chiamare di nuovo il codice aggiunta. Uno sviluppatore deve pertanto includere un metodo di controllo per osservare
se un o B è cambiato. In un approccio reattivo, il valore di c sarà automaticamente impostato a 10 perché il motore
sottostante si prende cura di osservare il cambiamento. Non c'è alcun bisogno di controllare periodicamente che né
un né B è cambiato o addirittura avviare esplicitamente ricalcoli. L'attenzione si concentra su ciò che il sistema dovrebbe
fare e non come farlo.
In un ambiente web, ottenendo l'effetto di Excel può essere ottenuto in vari modi. Utilizzando sondaggio e diff, si
potrebbe verificare le modifiche ogni due secondi. In scenari in cui un sacco di utenti sono coinvolti e poco
cambiamento avviene, questo mette un sacco di stress su
1 Un golem è una creatura mitica. Di norma costituito da argilla, è magicamente portato alla vita e svolge la propria
desideri del Maestro alla lettera. Terry Pratchett di Piedi d'argilla è una buona prima introduzione, se sei un fan del fantastico.

www.it-ebooks.info
tutti i componenti coinvolti ed è estremamente inefficace. Aumentare l'intervallo di polling rende l'interfaccia utente
appare lento e pigro. In alternativa, è possibile monitorare tutti i possibili eventi e definire le azioni che scrivono un sacco
di codice di imitare il comportamento del desktop. Questa opzione diventa un incubo di manutenzione quando è
necessario aggiornare i vari elementi nel DOM, anche se ogni evento viene solo una manciata di operazioni di
aggiornamento. Un ambiente reattivo offre una terza opzione che consente UI a bassa latenza con concisa, codice
mantenibile.
sistemi reattivi devono reagire agli eventi, carico, il fallimento, e gli utenti. 1 Per farlo, devono essere non
bloccante e asincrona. Ricordate quando abbiamo parlato di full-stack JavaScript? Poi si noterà che la reattività e
JavaScript sono una scelta naturale. Inoltre abbiamo discusso che le applicazioni Meteor corrono distribuite e che il
server non è l'unico caso responsabile della creazione di vista dell'utente. Carico può ancora essere scalata su più
server, ma anche scale su ogni cliente. Se uno di questi clienti mai fallire, non far cadere l'intera applicazione.
Anche se è ancora possibile costruire un sistema tutt'altro che ottimale non tenendo conto dei principi di sistemi
reattivi, la reattività è costruito nel nucleo del Meteor. Non devi preoccuparti di imparare un nuovo stile di
programmazione; è possibile continuare a utilizzare lo stesso stile sincrono a cui siete abituati. In molti casi Meteor
aggancia automaticamente reattività senza nemmeno accorgersene.
Tutti i componenti, dal database per l'interfaccia utente del client, sono reattive. Ciò significa che tutte le modifiche ai dati
vengono sincronizzati tra i clienti in tempo reale. Non c'è bisogno di scrivere qualsiasi routine Ajax o il codice per spingere gli
aggiornamenti per gli utenti perché questa funzionalità è direttamente integrato in Meteor. Inoltre, rimuove efficacemente il
bisogno di scrivere la maggior parte del codice di collante per l'integrazione di diversi componenti, riducendo in tal modo i tempi
di sviluppo in modo significativo.
programmazione reattiva certamente non è l'approccio migliore per ogni scenario, ma si inserisce perfettamente nel modo in cui le
applicazioni web funzionano perché nella maggior parte dei casi abbiamo bisogno di acquisire gli eventi ed eseguire azioni su di esso.
Al di là l'esperienza dell'utente, può contribuire a migliorare la qualità e la trasparenza, ridurre i tempi di programmazione, e diminuire la
manutenzione.
1.2 Come funziona Meteor

Una volta distribuito su un server, applicazioni Meteor difficilmente può essere detto a parte i progetti basati-Node.js
altri. vero punto di forza della piattaforma viene alla luce quando si guarda da vicino a come Meteor integra il
processo di sviluppo. Uno strumento CLI e una collezione di pacchetti consentono agli sviluppatori per ottenere
rapidamente risultati e concentrarsi sull'aggiunta di funzionalità a un'applicazione. preoccupazioni infrastrutture come
lo scambio di dati tra il database e browser o l'autenticazione degli utenti integrando attraverso fornitori esterni OAuth
sono curati con l'aggiunta di pacchetti.
1 Il manifesto reattiva definisce come sistemi reattivi deve essere progettato e si comportano nella produzione PROPRIO AMBIENTE
menti; vedi www.reactivemanifesto.org.

www.it-ebooks.info
Come funziona Meteor 13
Una singola base di codice per tutte le destinazioni di distribuzione
Applicazione
Logica di business
Codice Modelli
Risorse
Browser
Isopacks pacchetti Cordova
Fiammata Cordova-plugin-fotocamera
Tracker Cordova-plugin-batteria
DDP
del server
livequery
driver DB stack completo pacchetti NPM
... Stili Fibre
Isobuild I dispositivi mobili
Figura 1.6 Applicazioni consistono logica aziendale e vari pacchetti, che sono compilati per la piattaforma di destinazione utilizzando Isobuild.
Figura 1.6 mostra l'anatomia di applicazioni Meteor. Gli sviluppatori definiscono la logica di business che consiste di
codice, modelli e stili, e le attività ad esempio i file di immagine. Meteoriti può sfruttare la potenza di pacchetti esterni
dal Node.js ecosistema tramite npm e Cordova per i dispositivi mobili. Inoltre, definisce il suo formato proprio
pacchetto chiamato Isopacks.
Isopacks sono progettati per funzionare in entrambi gli ambienti server e client e possono anche contenere modelli e
immagini. Essi possono anche estendersi Isobuild, il processo di compilazione che genera il codice distribuibile per tutte le
piattaforme di destinazione. Isobuild e Isopacks sono gli ingredienti principali di Meteor.
applicazioni meteorici comunicano tramite HTTP e WebSockets (vedi figura 1.7). La richiesta iniziale della
pagina e tutti i file statici, come immagini, font, stili e file JavaScript vengono trasferiti su HTTP. Le applicazioni in
esecuzione sul client e server si basano sul protocollo DDP per lo scambio di dati. SockJS fornisce l'infrastruttura
necessaria. Il client chiama metodi sul server utilizzando chiamate di procedura remota. Il cliente sta chiamando una
funzione tramite la rete. Il server invia indietro le sue risposte come JavaScript Object Notation (JSON) oggetti.
Inoltre, ogni cliente può abbonarsi a certe pubblicazioni di dati. Il componente livequery prende cura di spingere
eventuali modifiche a un set di dati sottoscritto oltre DDP pure. La biblioteca Tracker reattivo orologi per quei
cambiamenti e fa scattare gli aggiornamenti DOM nel livello di interfaccia utente tramite Blaze.

www.it-ebooks.info
La richiesta iniziale e tutte le risorse statiche

vengono trasferiti via HTTP.
richiesta di una pagina iniziale
Statico dopo asset HTML, JS, CSS, JPG,

PNG, ecc Blaze
App App
chiamate di procedura remota
abbonamenti dati Tracker
livequery
Banca dati MiniDB
server Cliente
I clienti chiamano funzioni del server

Livequery orologi di cambio e tramite DDP sopra WebSockets, e il Tracker innesca aggiornamenti
spinge i dati a tutti i clienti server restituisce i dati come oggetti reattivi, ad esempio, nell'interfaccia
abbonati. JSON. utente alimentato da Blaze.
Figura 1.7 La comunicazione tra il server e il client
1.2.1 progetti core

navi di meteoriti con un numero di pacchetti che forniscono funzionalità comunemente utilizzato per applicazioni web-based. Uno
strumento CLI consente di creare un nuovo progetto e aggiungere o rimuovere pacchetti con un singolo comando. Nuovi progetti
contengono tutti i pacchetti fondamentali già.
B OZIARE
Blaze è una libreria di interfaccia utente reattiva, e una delle sue parti è lo Spacebars linguaggio di templating. Perché gli
sviluppatori di solito (solo) interagiscono con il lib front-end tramite il linguaggio di template e Spacebars è relativamente
facile da usare (in confronto ad altri linguaggi di template), Blaze è più semplice da usare rispetto Reagire, angolare o
Ember.
La documentazione ufficiale descrive Blaze come “reattivo jQuery,” una potente libreria per aggiornare il DOM. Ma
non segue lo stesso stile imperativo jQuery utilizza ( “trovare elemento # lista degli utenti e aggiungere una nuova Li nodo!”),
ma un approccio dichiarativo (“rendere tutti i nomi utente dal DB in questo elenco utilizzando i modelli gli utenti! “).
Quando i cambiamenti di contenuto, Blaze ri-rende solo piccoli frammenti all'interno di un modello e non l'intera pagina.
Si gioca anche bene con altre librerie UI come jQuery UI-o addirittura angolare.
T RACKER
Il pacchetto Tracker fornisce i fondamenti della programmazione reattivo funzionale (FRP). Al suo Tracker nucleo è
un semplice convenzione che permette origini dati reattivi, quali

www.it-ebooks.info
come dati dal database, da collegare ai consumatori di dati. Ricordate questo codice dalla sezione 1.1.5:
c=a+b
un e B sono fonti di dati reattivi, e c è il consumatore. Un cambiamento a uno un o B innesca un ricalcolo di c. Tracker
realizza reattività impostando un contesto reattivo con dipendenze tra dati e funzioni, invalidare il contesto dato
ogniqualvolta modifiche dei dati e funzioni rieseguire.
DDP
Accesso alle applicazioni web di solito è fatto su HTTP, che per definizione è un protocollo per lo scambio di
documenti. Anche se ha vantaggi per il trasferimento di documenti, HTTP ha diversi inconvenienti quando passa solo
i dati, così Meteor utilizza un protocollo dedicato basato su JSON chiamato DDP. DDP è un modo standard per
passare i dati oltre WebSockets modo bidirezionale, senza il sovraccarico di incapsulare documenti. Questo
protocollo è il fondamento per tutte le funzionalità reattiva ed è uno degli elementi fondamentali della Meteor.
DDP è un approccio standard per risolvere il più grande problema di fronte sul lato client sviluppatori JavaScript:
l'interrogazione di un database sul lato server, inviando i risultati al client, e quindi spingere le modifiche al cliente ogni
volta che qualcosa cambia nel database. implementazioni DDP sono disponibili nella maggior parte delle lingue principali
come Java, Python, o Objective-C. Ciò significa che è possibile utilizzare Meteor solo come componente di front-end per
un'applicazione e utilizzare un Java back-end per comunicare con esso tramite DDP.
L IVEQUERY
ambienti distribuiti come Meteor hanno bisogno di un modo per spingere i cambiamenti avviati da un cliente a tutti gli altri
senza bisogno di un pulsante di aggiornamento. Livequery rileva le modifiche nel database e spinge tutte le modifiche fuori ai
clienti attualmente la visualizzazione di dati interessati. A
1.0 Meteor è strettamente integrato con MongoDB, ma il supporto database aggiuntivi è già sulla tabella di marcia.
F ULL-STACK driver di database

Molti dei compiti svolti su un client si basano su funzionalità di database, come il filtraggio e l'ordinamento. Meteor sfrutta un senza
soluzione di continuità base di dati in tutto il mondo principio. Questo significa che come sviluppatore è possibile riutilizzare la maggior parte
del codice in qualsiasi punto della pila.
Meteor è dotato di mini-database che simulano un database effettivo all'interno del browser. Il database in
miniatura per MongoDB è chiamato Minimongo, un in-memory, non persistente realizzazione di MongoDB in puro
JavaScript. Non si basa su HTML5 Local Storage perché esiste solo nella memoria del browser.
Il database nel browser rispecchia un sottoinsieme dei dati del server reale e viene utilizzato per simulare azioni
come inserti. E 'anche usato come una cache per le query, per cui un client può accedere direttamente ai dati
disponibili, senza alcuna attività di rete. Perché la connessione tra Minimongo e MongoDB è anche reattivo, i dati
vengono conservati automaticamente in sincronia.

www.it-ebooks.info
La latenza è un fattore chiave di differenziazione tra le applicazioni desktop e web. A nessuno piace aspettare, in
modo da Meteor utilizza prefetching e simulazione del modello sul client per far sembrare che la vostra applicazione
dispone di una connessione a latenza zero al database. L'istanza Minimongo locale sarà utilizzato per simulare eventuali
operazioni di database prima di inviare richieste al server.
Il cliente non deve attendere che il database remoto per finire di scrivere, ma l'applicazione si assume che sarà
alla fine abbia successo, il che rende più o meno la stragrande maggioranza di tutti i casi di utilizzo sembra molto più
veloce. Nei casi in cui si sono verificati i problemi quando si passa l'azione di scrittura al server, il client deve
ripristinare con garbo e visualizzare un messaggio di errore.
Un tipico flusso di eventi è mostrato in figura 1.8. Una volta che un utente pubblica un commento, sarà
convalidato e poi subito memorizzato nel database Minimongo nel browser. A meno che la convalida non riesce,
questa operazione avrà successo e vista dell'utente verrà aggiornato immediatamente. Perché fino a questo punto
senza il traffico di rete è coinvolto e tutte le azioni si svolgono in memoria, l'utente sperimenterà senza latenza. Sullo
sfondo, però, l'azione è ancora in corso.
Il commento viene inviato al server, dove le convalide di nuovo avvenire, e poi il commento viene memorizzato
nel database. Una notifica viene inviata al browser che indica se l'operazione ha avuto successo la memorizzazione.
A questo punto, almeno un server completo di andata e ritorno insieme ad alcuni disco I / O ha avuto luogo, ma quelli
non hanno alcun impatto sulla esperienza utente. Dal punto di vista dell'utente non c'è alcun ritardo
nell'aggiornamento vista perché compensazione di latenza già prese cura di eventuali aggiornamenti nella quarta
fase. Alla fine il commento viene pubblicato a tutti gli altri clienti pure.
contenuti potenzialmente non sicuri
viene inviato al server.
6. Dati Convalida 2. I dati Convalida

1. Invia un
Metodo 5. Chiama per commento
negozio commento
Blaze
App App vista 4.
Aggiornare
Tracker
successo 8. Conferma
livequery
Banca dati MiniDB

3. simulare
immagazzinare a DB
server Cliente
7. Store per DB
Figura 1.8 Flusso di dati utilizzando la compensazione della latenza

www.it-ebooks.info
UN SUPPLEMENTARI PACCHETTI
Oltre ai pacchetti fondamentali molti più pacchetti sono disponibili come parte di Meteor e sono fornite dalla comunità
di sviluppo. Essi comprendono funzionalità per integrare facilmente gli utenti e l'autenticazione OAuth via Twitter,
GitHub, e altri.
1.2.2 Isobuild e lo strumento CLI

Su un computer con un'installazione Meteor, entrando meteora sulla riga di comando, si apre lo strumento CLI.
Questo strumento è sia un tool di creazione paragonabile a rendere o grugnito e un gestore di pacchetti come adatto o NPM.
Esso consente di gestire tutte le attività relativa alla domanda:
■ Creare nuove applicazioni

■ Aggiungere e rimuovere la funzionalità in forma di pacchetti
■ Compilare e minify script e gli stili
■ Esegui, resettare, e monitorare le applicazioni
■ Accesso MongoDB shell

■ Preparare un'applicazione per la distribuzione
■ Distribuire le applicazioni all'infrastruttura meteor.com
La creazione di un nuovo progetto è un singolo comando su cui lo strumento CLI crea tutti i file essenziali e strutture di
cartelle per una semplice applicazione. Un secondo comando avvia una pila sviluppo completo, tra cui un server Node.js e
un'istanza MongoDB per permettere uno sviluppo completamente funzionante. Qualsiasi file modifiche vengono monitorati e
inviati direttamente ai clienti sotto forma di codice a caldo spinge in modo che è possibile concentrarsi completamente sulla
scrittura del codice, invece di avviare e riavviare i server.
Quando si avvia un esempio di sviluppo o di ottenere pronto per la produzione, Meteor raccoglie tutti i file di
origine, compila e il codice minifies e stili, crea mappe di origine, e si prende cura di tutte le dipendenze dei pacchetti.
Come tale, esso combina la potenza di grugnito
con NPM.
Non c'è bisogno di definire catene di elaborazione se si usano meno invece del semplice CSS; Basta
aggiungere il corrispondente Isopack. Tutti i file * .less verranno automaticamente elaborati da Meteor:
$ Meteora aggiungere meno
Aggiungi il CoffeeScript pacchetto per consentire la compilazione da CoffeeScript a JavaScript.
1.2.3 Codice cliente vs. codice del server
Quando si inizia a lavorare con Meteor, troverete che sapere quale codice deve essere eseguito in quale ambiente è
essenziale per applicazioni di scrittura. Teoricamente tutto il codice può essere eseguito in qualsiasi punto dello stack, ma
esistono alcune limitazioni. chiavi API non dovrebbero mai essere inviati alle mappe client di eventi che gestiscono clic del
mouse non sono utili sul server. Per far Meteor sapere dove per eseguire codice specifico, è possibile organizzare i file in
cartelle dedicate o utilizzare un controllo per verificare in quale contesto sono in esecuzione.

www.it-ebooks.info
Inviato al browser
Elaborato sul server
Figura 1.9 La struttura di file per una semplice applicazione
A titolo di esempio, tutto il codice che gestisce gli eventi del mouse potrebbe essere inserito all'interno di una cartella denominata
cliente. Inoltre, non saranno necessari tutti i file HTML e CSS sul lato server, che è il motivo per cui faranno anche essere trovati
all'interno della cartella del client. credenziali di accesso a un server di posta o chiavi segrete API non devono mai essere inviati al
client: verranno essere tenuti esclusivamente sul server (vedi figura 1.9).
Tutti i contenuti dalla cartella del server non verrà mai inviata al cliente. Per evitare ridondanze, codice condiviso
può essere salvata in un file all'interno delle cartelle condivise, come lib, e sarà disponibile in entrambi i contesti. Si può
facilmente utilizzare le librerie di front-end come jQuery sul server pure.
La condivisione di codice tra i due casi è particolarmente utile quando si tratta di convalida dell'input. Lo stesso
metodo per convalidare che un utente ha inserito un numero di carta di credito corretta può essere utilizzato per
visualizzare un messaggio di errore nel browser e di nuovo sul lato server per evitare l'inserimento di dati errati al
database sul server. Senza Meteor che avrebbe dovuto definire un metodo in JavaScript per la convalida nel browser
e un altro metodo nel contesto del server perché tutto proveniente dal browser deve essere convalidato prima di
lavorare con lui per stabilire un certo livello di sicurezza. Se il back-end è scritto in un linguaggio come Ruby, PHP o
Java, non è solo lì codice ridondante, ma anche lo stesso compito deve essere fatto due volte. Anche se si utilizza
JavaScript sul lato server in altri ambiti avresti bisogno di copiare e incollare la sezione di convalida a un file sul
server e un secondo file sul client. Meteor elimina questa necessità elaborando lo stesso file su entrambe le
estremità.
Durante il caricamento della pagina iniziale di tutti i JavaScript, gli stili e le attività statiche come immagini o font vengono trasferite
al cliente. 1 Come figura 1.10 mostra, tutti i file sono disponibili sul server, ma non vengono eseguiti come parte dell'applicazione. Allo
stesso modo, non tutti i file vengono inviati al cliente, per cui gli sviluppatori possono avere migliore controllo su cui codice viene
eseguito in quale ambiente. Trasferimento di file avviene tramite HTTP, che è anche usato come ripiego per i browser che non
supportano WebSockets. Dopo il caricamento della pagina iniziale, solo i dati vengono scambiati tramite DDP.
1 Tecnicamente, tutti i file JavaScript sono combinati in un unico file app.js, ma per una migliore tracciabilità dei file individuali
illustrare il flusso di informazioni.

www.it-ebooks.info
Punti di forza e di debolezza 19
Tutti i file dell'applicazione vengono Solo file del client vengono

memorizzati sul server, ma non tutti Trasferimento fi trasferiti ed eseguiti nel contesto
sono eseguiti come parte della app. le tramite HTTP. app.
App client
Banca dati MiniDB
server App
Figura 1.10 Lo scambio di dati tra server e client tramite HTTP e DDP
1.3 Punti di forza e di debolezza

Come con qualsiasi strumento ci sono situazioni in cui Meteor sarà una misura perfetta, ma ci sarà sempre scenari in
cui ad usarlo potrebbe essere una scelta sbagliata. In generale, qualsiasi applicazione basata su principi di
piattaforme applicative distribuite sarà di grande beneficio dall'utilizzo di esso, mentre il sito più statico è, meno si
guadagna da utilizzare Meteor.
1.3.1 Dove Meteor brilla

La piattaforma Meteor offre tutti gli strumenti necessari per creare applicazioni per diverse piattaforme, il web o
mobile. Si tratta di un one-stop shop per gli sviluppatori e lo rende molto più semplice per iniziare con maggior parte
degli altri quadri. I principali vantaggi di Meteor sono un linguaggio unico in tutta l'intera pila, incorporato reattività, e
un ecosistema fiorente di pacchetti per estendere le funzionalità esistenti. In sintesi, questo si traduce in velocità di
sviluppo.
Avere una lingua attraverso l'intero stack applicativo, un protocollo che è stato progettato per lo scambio di dati, e
le API unificate semplici elimina la necessità di ulteriori framework JavaScript, come AngularJS o Backbone che
parlano di sofisticati estremità schienale. Che rende Meteor estremamente adatto per progetti che richiedono risultati
rapidi pur continuando a soddisfare le aspettative degli utenti elevati.
E ASY IMPARARE
raggiungere rapidamente risultati visibili è uno dei migliori motivatori per gli studenti. Meteor sfrutta la potenza della
pila media, che può essere molto potente, ma anche piuttosto

www.it-ebooks.info
complesso da imparare. Per aumentare la produttività degli sviluppatori, Meteor espone questo potere dietro una
comune API JavaScript. Nuovi sviluppatori non devono fare un tuffo in profondità nello specifico delle biblioteche
front-end debolmente accoppiati e back-end quadri prima che possano raggiungere i risultati. Conoscere i
fondamenti di JavaScript è sufficiente per iniziare.
API comune di meteoriti rende anche più facile lavorare con il ciclo degli eventi Node.js consentendo agli sviluppatori
di scrivere codice sincrono invece di preoccuparsi di strutture callback nidificate. conoscenze esistenti possono essere
riutilizzati, perché le biblioteche familiari come jQuery o di sottolineatura sono parte dello stack.
C UIDA DI RIFERIMENTO-SIDE APPLICAZIONI
Con i clienti sempre più potenti, gran parte della domanda può essere eseguito sul client invece che il server. Questo
ci dà due vantaggi principali che sono validi anche per Meteor:
■ Meno carico sul server come clienti eseguire alcuni dei lavorazione
■ Una migliore risposta di azioni nell'interfaccia utente
Per promuovere in modo efficace ai browser di smart client, è importante fornire un'infrastruttura di comunicazione a due vie in
modo tale che il server potrebbe spingere le modifiche al client. Con DDP, Meteor non solo fornisce un livello di trasporto ma
una soluzione completa per la comunicazione in entrambe le direzioni. Queste connessioni apolidi sono una caratteristica
fondamentale della piattaforma, e gli sviluppatori possono approfittare di loro senza preoccuparsi di formati di messaggio.
io nStant AGGIORNAMENTI CON REATTIVA PROGRAMMAZIONE
Gran parte del codice di un'applicazione è sulla gestione degli eventi. Gli utenti cliccando alcuni elementi possono
innescare una funzione che aggiorna i documenti all'interno del database e aggiorna la vista corrente. Quando si
utilizza la programmazione reattiva, il codice è necessario scrivere per la gestione di eventi è ridotta. collaborazione di
massa che si compone di centinaia di eventi diventa molto più gestibile. Per questo motivo, Meteor è particolarmente
adatto per le chat in tempo reale e giochi online o anche per alimentare l'Internet delle cose.
H IGH riutilizzo del codice
Meteor mantiene la vecchia promessa Java: write once, run anywhere. A causa della natura isomorfica di Meteor, lo
stesso codice può essere eseguito all'interno del browser, sul server, o anche su un dispositivo mobile.
Ad esempio, in architetture REST il back-end deve parlare con il database in SQL, mentre i clienti si aspettano
JSON. Sfruttando in browser mini-database, il server può pubblicare una manciata di record da un cliente, che a sua
volta accede a questi dati come se fosse in una banca dati vera e propria. Ciò consente potente compensazione di
latenza con i requisiti di codifica minimi.
P OWERFUL strumenti di costruzione
Fuori dalla scatola, Meteor offre uno strumento CLI che agisce come un pacchetto e costruire manager. Esso copre l'intero
processo di generazione, dalla raccolta e compilazione dei file sorgente di minimizzazione, la mappatura fonte, e la risoluzione
delle dipendenze. Questo strumento consente di ottimizzare Isobuild un'applicazione per il web o pacchetti come un cellulare
Android o iOS.

www.it-ebooks.info
1.3.2 Le sfide quando si usa Meteor
Anche se è possibile utilizzare Meteor per costruire qualsiasi tipo di sito, in alcune situazioni è meglio usare alternative.
Data la sua età relativamente giovane e il posizionamento, è possibile riscontrare alcuni problemi quando si lavora con
Meteor.
P rocessing INTENSE APPLICAZIONI

Soprattutto quando l'applicazione si basa sul trattamento pesante come estrarre dati-scricchiolio, trasformare, e
l'occupazione caricamento (ETL), Meteor non sarà in grado di gestire bene il carico. Per natura, qualsiasi processo Node.js
è single-threaded, quindi è molto più difficile da sfruttare le funzionalità multiprocessore veloci. In un'architettura multilivello,
Meteor potrebbe essere utilizzato per servire l'interfaccia utente, ma non offre un sacco di potenza di calcolo.
Il modo per integrare più potenza di elaborazione in un'applicazione Meteor è simile a qualsiasi altra
applicazione Node.js: si delega attività della CPU-intensa ai processi figli. Ma questo è anche un'architettura di
best-practice per qualsiasi lingua, in cui vengono utilizzati più livelli per separare il numero macinare dall'interfaccia
utente.
M ATURITY
Meteor è relativamente giovane e ha ancora da dimostrare se stessa in ambienti di produzione per quanto riguarda il
ridimensionamento o posizionamento nei motori di ricerca. Scaling applicazioni, in particolare, richiede un sacco di conoscenze
sui componenti coinvolte e possibili colli di bottiglia.
Anche se Node.js ha dimostrato che è in grado di scalare a grandi, Meteor deve ancora dimostrare in grado di
gestire grandi distribuzioni e un alto numero di richieste. utenti conservatori potrebbero sostenere che è più sicuro
fare affidamento su una base consolidata. Basta tenere a mente che ogni pila di server e il quadro è probabile che
sia lento se l'applicazione non è scritto con la scalabilità e le prestazioni in mente.
Anche se la comunità Meteor è cordiale e disponibile, non è in alcun modo paragonabile con le ingenti risorse
disponibili per PHP o Java. Lo stesso vale per le opzioni di hosting; Non ci sono ancora tante soluzioni dedicate
Node.JS o Meteor disponibili come per PHP o anche Python. Se hai intenzione di ospitare l'applicazione sul proprio
infrastrutture, diverse soluzioni sono disponibili.
Come per tutti i giovani i progetti, il numero di strumenti disponibili in tutto il framework stesso è piuttosto limitato
con Meteora a partire da ora. Velocity è uno sforzo della comunità-driven per creare un ambiente di test, che ha
sviluppatori attivi, ma non è parte dei progetti Meteor nucleo. Inoltre, strumenti di debug non sono così conveniente
come quelle disponibili per Java o PHP.
F EW CONVENZIONI SULLA STRUTTURA
Ci sono solo alcuni suggerimenti per strutturare le applicazioni e il codice di Meteor. Questa libertà è grande per singoli
sviluppatori che possono hackerare rapidamente sul codice, ma richiede una buona coordinazione tra i membri del
team quando le applicazioni crescere in dimensioni. Sta a preferenza degli sviluppatori sia che utilizzino un singolo file
o centinaia di cartelle e file. Alcuni possono abbracciare questa libertà; altri troveranno necessario definire strutture
chiare prima di poter iniziare a scrivere codice.

www.it-ebooks.info
U CANTARE SQL E DATABASE ALTERNATIVI

La tabella di marcia indica che un giorno Meteor sosterrà database SQL, ma per ora il database solo ufficialmente
supportato è MongoDB. Per utilizzare i sistemi aggiuntivi come MySQL o PostgreSQL, pacchetti di comunità devono
essere utilizzati. Anche se molti membri della comunità hanno lanciato con successo le applicazioni supportate da
database SQL, non esiste alcun supporto fullstack per la compensazione di latenza e trasparenti aggiornamenti
client-to-server. Se avete bisogno di uno stack solida e pienamente supportato con i dati relazionali in cima alla vostra
lista di priorità, allora Meteor non è ancora per te.
S Erving Contenuto statico

Alcuni siti come giornali e riviste si basano molto sul contenuto statico. Questi sono i siti che beneficeranno
maggiormente di HTML server di rendering e possono utilizzare meccanismi di caching avanzati che accelerano il sito
per tutti gli utenti. Inoltre, i tempi di caricamento iniziali sono molto più veloci.
Se i tempi di caricamento iniziali sono importanti per la vostra applicazione, o serve per lo più lo stesso contenuto per
un gran numero di utenti, non sarà in grado di sfruttare tutti i vantaggi di Meteor. In realtà, è necessario trovare il modo per
aggirare il suo comportamento standard per ottimizzare per il vostro caso d'uso e di conseguenza potrebbe desiderare di
utilizzare un quadro più tradizionale per costruire il tuo sito.
Chi è con Meteor? (Dalla bocca del cavallo)

Nonostante la sua giovane storia, Meteor sta già alimentando numerosi progetti di successo e persino intere
aziende.
Share911.com di Adrian Lanning è stato uno dei primi ad adottare per formare il Meteor piatta-. In caso di
emergenza, l'applicazione consente di avvisare contemporaneamente le persone che lavorano con così come il
personale di pubblica sicurezza. Il criterio principale per la raccolta di una tecnologia era la velocità, sia nel
comportamento in tempo reale, così come i tempi di sviluppo. Adrian ricercato le tecnologie event-driven Netty
(Java), Tornado (Python), e Node.js. Dopo un'ulteriore valutazione della Torre e Derby.js, ha deciso di sviluppare
un prototipo utilizzando Meteor, che ha avuto meno di 10 giorni.
Fortunatamente, Meteor è stato solido e non abbiamo bisogno di fare un cambiamento. Abbiamo incluso
altre tecnologie, ma sono fiducioso Meteor sarà il livello Web di base per noi per lungo tempo.
- Adrian Lanning
Workpop.com fornisce una piattaforma di lavoro per l'assunzione di lavoratori oraria salario. Con un team di soli due
sviluppatori e appena il tempo di cinque mesi, CTO Ben Berman è riuscito a creare una versione moderna che lavoro
tavole su internet dovrebbe essere simile. Più di $ 7 milioni di finanziamenti dimostrare che la loro decisione di andare con
Meteor ha pagato. La filosofia di Workpop è quello di mantenere la tecnologia fuori strada e concentrarsi sul loro obiettivo
di ottenere persone assunte. Anche se molto performante, sono stati trovati sia primavera (Java) e ASP.net

www.it-ebooks.info
di essere troppo intensa, e anche Rails è stato respinto perché incoraggia la creazione di applicazioni RESTful.
Da attaccare al familiare Javascript e spedizione con il miglior kit di interfaccia utente reattiva sul web, Meteor mantiene
la promessa di una rapida iterazione per le piccole squadre.
- Ben Berman
Con lookback.io, è possibile registrare le esperienze degli utenti di telefonia mobile e ottenere comprensione in come le
persone utilizzano l'applicazione con la semplice pressione di un tasto. La versione iniziale è stato costruito utilizzando
Django, ma sviluppatore Carl Littke commutato Meteor subito dopo. Raggiungere gli stessi risultati utilizzando Django,
angolare, e le API REST associati si è rivelato essere un compito molto più complesso che fare affidamento su vità di
Meteor built-in Rea-, API di dati, ed effettuare il login. Velocità di sviluppo è stato l'aspetto più importante nella scelta
Meteor. Questo fatto anche per le aree in cui la giovane età di Meteor ancora sta mostrando.
Il Gruppo di Sviluppo Meteor ha fatto un lavoro eccezionale di sviluppare un quadro che risolve alcuni dei
principali punti deboli di sviluppo di applicazioni web di oggi. Non ci penserei due volte prima di utilizzare
Meteor per il mio prossimo progetto.
- Carl Littke
Sara Hicks e Aaron Judd ha creato la piattaforma di shopping open source ReactionCom- merce.com. Essi
ritengono di Meteor event-driven natura una misura perfetta per migliorare le vendite utilizzando merchandising
dinamico e le promozioni in tempo reale e dei prezzi. Avere un unico codice di base per i dispositivi web e mobile
era un grande vantaggio. Meteor non è l'unica tecnologia utilizzata per la piattaforma Reaction, ma costituisce il
fondamento. librerie aggiuntive vengono aggiunti nel progetto, grazie al supporto per tutti i pacchetti Node.JS via NPM.
bassa velocità può costare rivenditori tanto quanto il 13 per cento delle vendite. Grazie alla compensazione di
latenza di Meteor lo schermo si ridisegna subito. Questo si traduce in clienti più felici e migliori cifre di vendita.
- Sara Hicks
Sacha Greif ha creato il famoso Hacker News clone Telescope. Quando si cerca il pila destra, ha ristretto le
sue scelte verso il basso per Rails e Node.js. Con Rails che era preoccupato per la gestione di un gran numero
di parti in movimento, con centinaia di file e gemme, e come designer, era già familiarità con JavaScript. Ha
fatto la decisione per Meteor nel 2012, nonostante la sua caratteristica ancora limitata impostato in quel
momento. Oggi Tele ambito sta alimentando siti come crater.io (notizie su Meteor) e bootstrappers.io (una
comunità per gli imprenditori bootstrap).
Ciò che veramente mi ha affascinato è stato l'aspetto all-in-one: tutte queste cose che ha richiesto
mettere insieme molteplici soluzioni con altri framework sono stati forniti dalla scatola con Meteor.
- Sacha Greif

www.it-ebooks.info
1.4 La creazione di nuove applicazioni

Abbiamo discusso un sacco di teoria; ora è il momento di guardare il codice. Prima di procedere, assicurarsi di aver installato
Meteor sulla vostra macchina. Consultare l'appendice A per guidare l'utente attraverso il processo.
Perché Meteor è anche uno strumento CLI, avremo bisogno di eseguire la configurazione iniziale della nostra
applicazione in un ambiente di shell. Questo ci permette di installare il quadro e creare nuove applicazioni. Tutte le fasi di
questa sezione verranno eseguiti in un terminale.
1.4.1 La creazione di un nuovo progetto
Quando viene installato Meteor, lo strumento CLI viene utilizzato per creare un nuovo progetto. Passare alla cartella che
si desidera contenere l'applicazione e digitare quanto segue nel terminale (vedi figura 1.11):
$ Meteora creare helloWorld
Meteor crea automaticamente una nuova cartella di progetto e tre file:
■ helloWorld.css contiene tutte le informazioni styling.

■ HelloWorld.html contiene tutti i modelli.
■ helloWorld.js contiene la logica effettiva.
NOTA Ogni progetto contiene una cartella invisibile, .meteor (vedi figura 1.11), in cui i file di runtime, come
il database di sviluppo, i file compilati, per quanto riguarda metainformation utilizzati pacchetti, e altri
contenuti generati automaticamente va. Per scopi di sviluppo, possiamo ignorare questa cartella.
Figura 1.11 Un'applicazione Meteor

base creata con lo strumento Meteor
CLI

www.it-ebooks.info
Sezionare il progetto predefinito 25
A questo punto è possibile iniziare a creare la propria applicazione, cambiando il contenuto dei file esistenti. Per questo
progetto i tre file saranno sufficienti, ma per qualsiasi altro progetto che è ancora un po 'più complesso, è meglio creare
cartelle e dividere il codice in file separati per mantenere una migliore visione d'insieme. Daremo uno sguardo da vicino
a come strutturare i vostri progetti nel prossimo capitolo.
1.4.2 Avvio dell'applicazione

Lo strumento CLI di Meteor inizia anche l'applicazione con il seguente comando:
$ Run meteora
È inoltre possibile avviare un server Meteor chiamando il meteora comando senza argomenti; correre è il
comportamento predefinito. Dietro le quinte, si avvia sia un'istanza del server Node.js sulla porta 3000, nonché un
MongoDB in ascolto sulla porta 3001.
È possibile accedere all'applicazione con il vostro browser web all'indirizzo http: // localhost: 3000 (vedi figura 1.12).
Se avete bisogno di modificare la porta Meteor è in ascolto, è possibile farlo passando l'argomento - porta al meteora
comando. Il comando seguente inizia Meteor sulla porta 8080:
$ Corsa meteora --port 8080
Come si può vedere, l'applicazione è installato e funzionante ed ha un pulsante. Se si fa clic sul pulsante Click Me, il
testo qui sotto si aggiorna automaticamente, mostrando esattamente quante volte avete cliccato da quando è stata
caricata la pagina web. Questo perché l'applicazione ha già un evento rilegatura incluso. Diamo uno sguardo più da
vicino il contenuto del file e scoprire come funziona vincolanti.
1.5 dissezione il progetto predefinito

L'applicazione helloWorld in questo stato è molto semplice. Poiché tutti i file sono nella cartella principale del
progetto, sono tutti eseguiti sul server e inviati al cliente. Vediamo cosa fa ogni file.
Figura 1.12 Ogni nuovo progetto

Meteor è una semplice applicazione
con un solo pulsante.

www.it-ebooks.info
1.5.1 helloWorld.css
Per impostazione predefinita, questo file è vuoto. Perché è un file CSS, è possibile utilizzarlo per memorizzare le informazioni
stile personalizzato. Se metti qualcosa in questo file, gli stili verranno immediatamente applicate alla domanda. Meteor analizza
automaticamente attraverso tutti i file che terminano con
.css
css e invierà quelli al cliente per voi. Provate, ad esempio, l'aggiunta di body {background: red; }. Salvare il file e
vedrete lo sfondo della vostra applicazione in un bel colore rosso.
1.5.2 HelloWorld.html
Il file indicato in 1.1 contiene i modelli utilizzati nel nostro progetto. Modelli di controllo l'aspetto generale e il layout di
un'applicazione. Anche se l'estensione del file è
. html, il codice interno non è completamente HTML valido come ci si aspetterebbe.
1.1 Ciao mondo modello
<Head>
La testa di HTML
<Title> helloWorld </ title> </ head>
Il corpo della pagina, che stampa un

<Body> titolo e importa un modello denominato
<H1> Benvenuti a Meteor! </ H1> {{> ciao}} </ “ciao”
body>
Il modello attuale il nome

di “ciao” contatore, un aiutante
<Nome di modello = "ciao">
che è riempito in modo
<Button> Clicca Me </ button>
dinamico
<P> Hai premuto il pulsante {{contatore}} volte. </ P> </ template>
In primo luogo, tre diversi elementi appaiono qui: una testa di HTML, un corpo HTML, e un modello denominato Ciao. Come
si può vedere, l'apertura < html> tag di un documento HTML valido è mancante. Meteor aggiunge automaticamente,
quindi non c'è bisogno di preoccuparsi.
Il corpo consiste solo h1 voce e un segnaposto utilizzando la sintassi manubrio. Le parentesi graffe farvi sapere
che hai a che fare con una sorta di contenuti dinamici. Il simbolo di maggiore indica che un altro modello verrà
iniettato nel documento in questa posizione. E 'seguito dal nome del modello. Pertanto, il segnaposto inserisce un
modello denominato Ciao dentro corpo elemento:
{{>}} Ciao
Quando si avvia il server, Meteor analizza tutti i file con estensione .html per raccogliere tutti i modelli. Riconosce e
gestisce tutti i riferimenti e le inclusioni. Per farlo funzionare correttamente, ogni template deve avere un'apertura < template>
e chiusura </ template> etichetta. Il nome attributo è necessario fare riferimento a un modello al fine di includerlo. Il nome
di un modello è maiuscole e minuscole e deve essere sempre univoco.

www.it-ebooks.info
Sezionare il progetto predefinito 27
È inoltre necessario essere in grado di fare riferimento al modello in qualche modo nel vostro Javascript per estenderlo
con alcune funzionalità, come si vedrà nel file helloWorld.js nella sezione successiva. Anche in questo caso, il nome del
modello è usato per fare quel collegamento.
Infine, è necessario un modo per iniettare i dati dal codice JavaScript nel modello. Questo è lo scopo di {{ contatore}},
un cosiddetto aiutante. Helpers sono metodi JavaScript con un valore di ritorno che è disponibile per il modello. Se si
guarda al vostro browser, troverete che invece di {{ contatore}} si può vedere il numero di clic. Diamo un'occhiata al
codice corrispondente.
1.5.3 helloWorld.js
Il file JavaScript di un progetto di base contiene diversi concetti fondamentali di Meteor. Il primo frammento che
vogliamo mostrarvi è questo:
if (Meteor.isClient) {
// ...}
if (Meteor.isServer) {
// ...}
Ci sono due Se dichiarazioni, sia relativa ad una variabile booleana del globale Meteora
oggetto stesso. Ricordate che tutto il codice che si scrive è disponibile sia per il client e il server a meno che non si
applica alcuna restrizione. Essere a disposizione significa anche il codice viene eseguito in entrambi gli ambienti. A
volte, però, è necessario specificare se il codice deve essere eseguito solo sul server o solo sul client. Controllando
per questi due attributi del mondiale Meteora oggetto, si può sempre scoprire dove ti trovi.
In qualsiasi progetto, il blocco di codice nella prima Se dichiarazione sarà eseguito solo se il contesto è il client e il
blocco di codice nella seconda Se dichiarazione sarà eseguito solo se il contesto è il server.
È necessario essere consapevoli che l'intero codice da questo file è disponibile sul server e il client. Ciò significa che
è necessario mai inserire il codice di sicurezza legati (come le chiavi API private) in un Se (Meteor.isServer) bloccare perché
così facendo può inviarlo direttamente al cliente pure. aprendo la vista di origine all'interno di un browser Chiunque
potrebbe semplicemente leggere le righe di codice e con quelli eventuali informazioni relative alla sicurezza, e
sicuramente non si vuole che questo accada.
NOTA Quando si crea un nuovo progetto, Meteor mette prima la produttività degli sviluppatori. Ciò significa
che inizialmente i progetti non saranno abbastanza sicuro per essere distribuito in produzione. In tutto il libro
vedremo come sviluppare applicazioni pronti per la produzione e sicuri.
Naturalmente, ci sono modi semplici e degli standard per gestire il codice sensibili, e noi provvederemo a coprire questo
argomento nei prossimi capitoli quando discuteremo come strutturare un progetto.

www.it-ebooks.info
Per il momento, useremo solo questo singolo file JavaScript. Per applicazioni semplici, controllando il contesto attuale è
abbastanza buono.
Il prossimo frammento di simile a questa:
// contatore inizia 0
Session.setDefault ( "contatore", 0);
Template.hello.helpers ({
contatore: function () {
ritorno Session.get ( "contatore"); }}); // ...} // ...
Qui sotto potete vedere due oggetti globali in uso: Sessione e Modello. Sessione consente di memorizzare coppie
chiave-valore in memoria. Il Modello oggetto vi permette di accedere a tutti i modelli, che si è definito nel file HTML, dai
file JavaScript. Poiché entrambi gli oggetti sono disponibili solo sul client, non possono essere chiamati sul server.
Che porterebbero ad errori di riferimento, che è il motivo per cui questo codice è avvolto all'interno IsClient contesto.
Fintanto che Sessione le variabili non sono dichiarate, rimangono non definito. Il Sessione
. imposta default() comando avvia una coppia chiave-valore all'interno Sessione oggetto con il tasto contatore e un
valore di 0.
In questo frammento si accede alla Ciao modello definito all'interno del file HelloWorld.html ed estendere con un
cosiddetto aiutante modello. Questo aiutante modello prende il nome contatore
ed è una funzione che restituisce il contenuto del Sessione valore per la chiave contatore come stringa. Ora si vede il
motivo per cui la Ciao modello è diverso da quello che in realtà si vede nel browser. L'helper modello nella Ciao modello
{{ contatore}} è infatti una funzione che restituisce la stringa che si vede nel browser.
Da un lato, si deve modelli per definire il codice HTML che deve essere reso, e d'altra parte, si deve aiutanti
template che si estendono modelli e rendono possibile l'utilizzo di funzioni e segnaposto sostitutivi con contenuti
dinamici.
Ricordate cosa succede quando si fa clic sul pulsante? Questo è dove vincolante evento entra. Se si fa clic sul
pulsante, un clic evento viene generato. Ciò a sua volta aumenta il contatore sulla pagina 1. Il codice seguente
incrementa il contatore, che è memorizzato all'interno Sessione oggetto:
Manipolazione clic del mouse è

utile solo sul client. Definire una funzione da
richiamare quando il
Template.hello.events ({
pulsante di ingresso viene cliccato.
'Fare clic sul pulsante': function () {
// incrementare il contatore quando viene cliccato il pulsante Session.set ( "contatore", Session.get (
"contatore") + 1); }});}
Aumenta la variabile
Session 1

www.it-ebooks.info
Sommario 29
Ogni modello ha la funzione eventi () e con questo è possibile definire la gestione per un modello specifico evento. L'oggetto
da passare al eventi () funzione viene chiamata una mappa degli eventi, che è fondamentalmente un oggetto JavaScript
chiave-valore normale, in cui la chiave definisce sempre l'evento di ascoltare e il valore è una funzione che si chiama se
l'evento viene generato.
Per specificare l'evento, utilizzare sempre una stringa nella forma ' target dell'evento', in cui l'obiettivo è definito da selettori
CSS standard. Si può facilmente modificare l'esempio precedente per utilizzare una classe CSS o ID per specificare
ulteriormente il pulsante. Si noti inoltre che questi eventi vengono generati solo nel contesto di questo modello. Questo
significa qualsiasi input in un modello diverso come cliccare su un elemento di input non sarebbe chiamare la funzione qui
specificata.
Si può andare avanti e fare clic sul pulsante un paio di volte, e ti notare come il browser rende la vostra nuova
stringa. Solo il segnaposto viene aggiornato e non l'intera pagina.
Si noti che non c'è alcun codice coinvolti che aggiorna il modello direttamente; si basano sulla natura reattiva Sessione.
L'aiutante modello contatore è rieseguire ogni volta che il valore all'interno Sessione modifiche di oggetto. L'evento
cambia semplicemente l'origine dei dati, e Meteor si prende cura che tutti i posti che utilizzano questo valore vengono
ricalcolate all'istante.
L'ultimo frammento di guarderemo è questo:
Meteor.startup (function () {
// l'esecuzione di codice sul server all'avvio}); }
Come il commento indica, è possibile definire una funzione che dovrebbe essere eseguito all'avvio dell'applicazione.
Si potrebbe anche chiamare il Meteor.startup operato più volte e passare diverse funzioni per eseguire diverse
funzioni all'avvio dell'applicazione. Meteor.startup può essere utilizzato anche sul lato client per eseguire funzioni di
inizio dell'applicazione client-side. Questa applicazione di esempio non utilizza alcun codice lato server, quindi questo
blocco e la funzione di avvio rimane vuoto.
Ora che hai guardato il Ciao mondo esempio di codice e si dispone di una solida conoscenza dei concetti di
base, potrai estendere questi file per sviluppare la propria prima applicazione Meteor.
1.6 Sommario
In questo capitolo, si è appreso che
■ Meteor è un full-stack o piattaforma JavaScript isomorfo, simile allo stack significare.
■ Gli sviluppatori possono eseguire lo stesso codice solo sul server, il cliente, o in tutti i contesti.
■ I clienti sono parti attive del logica applicativa, il che significa che le applicazioni Meteor sfruttare la potenza
degli ambienti di calcolo distribuito.
■ Utilizzando un protocollo standard chiamato DDP, server e client comunicano attraverso WebSockets al posto di
HTTP, che permettono lo scambio di messaggi bidirezionale.

www.it-ebooks.info
■ Meteor utilizza il principio della programmazione reattiva per ridurre al minimo la necessità di codice di infrastruttura.
■ la produttività di sviluppo viene applicata dai pacchetti riutilizzabili chiamati Isopacks, che sono utilizzati per
fornire funzionalità comune o specializzato.
■ Una base di codice viene utilizzato per applicazioni disposizione del HTML per le applicazioni del tuo browser o ibridi per i
dispositivi mobili su iOS, Android, o Firefox OS.

www.it-ebooks.info
Il mio frigo! Un gioco reattivo

■ Costruire un'applicazione reattivo con Meteor
■ Capire l'architettura di base per i progetti Meteor
■ Compreso jQuery-UI per abilitare le interfacce drag-and-drop
■ Utilizzando il Meteor CLI per la distribuzione su meteor.com
In questo capitolo, si sta andando a costruire la vostra prima applicazione Meteor. Si potrebbe creare un nuovo
progetto da una delle applicazioni di esempio inclusi, ma la creazione di un piccolo gioco reattivo da zero ti dà
una migliore comprensione di come funzionano le cose insieme. Alla fine di questo capitolo, avrete scritto meno
di 60 righe di JavaScript e ancora meno HTML per creare un gioco che memorizza i dati in un database e gli
aggiornamenti tutti i client connessi in tempo reale.
Vedrai come modelli e di lavoro insieme codice e includere jQuery UI-nel progetto. Per condividere
l'applicazione con il mondo, avrete anche distribuirlo alle infrastrutture meteor.com con un singolo comando.
31

www.it-ebooks.info
32 CAPITOLO 2 Il mio frigo! Un gioco reattivo
Applicazione
Browser
Logica di business
Codice Modelli
Server
stili Risorse
MongoDB
Isobuild
Figura 2.1 logica di business solo è necessario per il mio frigo! applicazione.
Panoramica 2.1 Application

Il mio frigo! è una piccola applicazione in tempo reale che mostra il contenuto di un frigorifero e consente di
trascinare i prodotti dentro e fuori. A differenza di un frigorifero fisico, questo si può accedere da qualsiasi parte del
mondo e tutte le modifiche saranno visibili a ogni client connesso al server.
Anche se la nostra applicazione è solo un simulatore, è possibile utilizzare il mio frigo! come un blocco note per ricordare
ciò che è nel vostro frigo attuale a casa. Oppure, se sei un hacker hardware, è possibile collegare il frigorifero reale a Internet
e utilizzare Meteor per visualizzarne il contenuto in tempo reale. In questo modo, se i tuoi amici prendono l'ultima bottiglia di
succo di frutta, è possibile controllare questo dal tuo ufficio e afferrare alcune GU sulla via del ritorno a casa.
Come costruire questa applicazione, potrai mantenere le cose semplici e si basano sulla funzionalità attivata in ogni
nuovo progetto Meteor. Hai intenzione di aggiungere il codice, stili, modelli, e le attività (vedi figura 2.1). Non potrai
utilizzare tutti i pacchetti aggiuntivi in questo capitolo.
Per prima cosa creare le viste utilizzando Spacebars, linguaggio di template di Meteor. Tutti i prodotti saranno
memorizzati in un database MongoDB, quindi è necessario definire una connessione al database. Potrai utilizzare immagini
statiche per rappresentare ciascun prodotto in frigorifero. Infine, imparerete come includere una libreria JavaScript esterno e
utilizzare jQuery UI per consentire trascinando le voci dentro e fuori.
proprio la reattività del Meteor si prenderà cura di mantenere sincronizzati tutti i clienti e l'aggiornamento della vista.
Tutto quello che dovete fare attenzione è l'attuale funzionalità, cioè, il drag and drop per aggiornare l'attributo di posizione
per un prodotto all'interno del database. In questa applicazione non sarà consentire agli utenti di aggiungere ulteriori prodotti
facilmente, e non sarà l'applicazione di rigorose misure di sicurezza. Questi argomenti saranno trattati nei capitoli successivi.
Alla fine di questo capitolo vostro frigorifero sarà simile a quella mostrata in figura 2.2.
2.2 Configurazione iniziale
Prima di continuare, assicurarsi di aver installato Meteor sulla vostra macchina. Consultare l'appendice A per guidare
l'utente attraverso il processo. Ricorda che Meteor viene fornito con uno strumento CLI? Potrai utilizzare per eseguire la
configurazione iniziale dell'applicazione in un guscio

www.it-ebooks.info
Configurazione iniziale 33
Figura 2.2 Lo stato finale del mio frigorifero!

applicazione
ambiente. Questo consente di creare nuove applicazioni. Potrai eseguire tutte le fasi di questa sottosezione all'interno
di un terminale.
2.2.1 La creazione di un nuovo progetto
Con installato Meteor, il suo strumento CLI diventa disponibile. Creazione di un progetto Meteor coinvolge digitando una sola riga
in un terminale:
$ Meteora creare MyFridge
Quella linea crea la cartella del progetto che contiene tre file: uno per modelli HTML, uno per il codice JavaScript, e
uno per le informazioni CSS styling.
Passare alla cartella di progetto e utilizzare lo strumento CLI per avviare l'applicazione con i seguenti comandi:
$ Cd MyFridge $ run
meteora
Spostare la console terminale al fondo; potrai ora iniziare a scrivere codice nel vostro editor di scelta. Sarà utile per
verificare se si vede alcun messaggio di errore, ma non sarà necessario riavviare il server per il resto di questo
capitolo. Ogni modifica a un file e anche l'aggiunta di nuovi file verranno gestite automaticamente dal Meteor. Se si
presta attenzione, si noterà che con ogni file modificare la console sarà o dimostrare che il server è stato riavviato o
che il codice del client è stato modificato ed è stata aggiornata. Figura 2.3 mostra l'output.

www.it-ebooks.info
Figura 2.3 L' meteora

comando riavvia automaticamente il
server quando codice
dell'applicazione cambia.
2.3 Creazione di un layout

Il primo passo di costruire il nostro gioco ci impone di pensare al layout. Per il mio frigo! abbiamo bisogno di un layout
semplice con un frigorifero sul lato sinistro e una mensola prodotto con un elenco di elementi sul lato destro. Gli articoli
dovrebbero poi essere trascinato da un lato all'altro.
Quindi, per creare il layout, si creerà alcuni modelli, aggiungere immagini, e aggiungere un modo per scorrere un
elenco di prodotti.
NOTA Perché questo libro è di circa Meteor e non CSS, noi non discuteremo lo stile in profondità. È
possibile vedere l'esempio di codice associato per sfogliare tutti gli stili.
2.3.1 Impostazione gli stili

Per una struttura di base, vogliamo avere un frigorifero e un lato lista dei prodotti a fianco, come mostrato in figura 2.4.
Il primo passo è quello di impostare gli stili per il layout generale all'interno myFridge.css in base alla quotazione
2.1 in modo che si può quindi concentrarsi sui modelli HTML. Definire il contenitore del larghezza l'impostazione e fare in
modo che il frigorifero è visualizzata a sinistra e che l'elenco dei prodotti (a destra) è un po 'più piccola.
2.1 stili di layout generali
. Contenitore {width: 95%; position:

relative; }
Questi sono solo gli elementi di

. sinistra {float: left; width: 60%; posizionamento; controllare gli
margin-right: 2%; } esempi di codice per il codice
completo.
. a destra {float: right; width:

37%; }

www.it-ebooks.info
Creazione di un layout 35
<Div id = "frigo">
<Div class = "contenitore" />
<Div id = "supermercato">
Figura 2.4 Le tre principali contenitori DIV per il mio frigo! disposizione
2.1 definisce tre classi di posizionare i contenitori DIV. Perché si vuole la nostra applicazione per lavorare su un
telefono cellulare, così, si utilizza percentuali di fare il layout reattivo.
2.3.2 Aggiunta i modelli
Per ciascuno dei div che verrà utilizzato un modello di individuo, anche per il contenitore. Quando hai finito avrete
una sezione di testa, un corpo, e quattro modelli:
■ contenitore -per il layout generale

■ frigo -per visualizzare il frigo a sinistra
■ Lista prodotti -per visualizzare il supermercato sulla destra
■ productListItem mostra elementi -per su entrambi i lati

www.it-ebooks.info
Cominciamo con i primi tre modelli. Aggiornare il contenuto del myFridge.html come illustrato nel seguente elenco.
2.2 scheletro struttura modello
<Head>
<Title> MyFridge </ title> </ head>
<Body>
{{> Contenitore}} </ body>
<Nome di modello = "contenitore"> Include

<Div class = "contenitore"> contenuti da un
<Div class = "left"> subtemplate.
{{> Frigo}} </ div>
<Div class = "right">

{{>}} Lista prodotti </ div> </ div> </
template>
Subtemplates viene
fatto riferimento per
<Nome di modello = "frigo">
nome.
<Div id = "frigo">
. . .
</ Div> </
template>
<Nome di modello = "Lista prodotti">

<Div id = "supermercato" class = "box">
. . .
</ Div> </
template>
Il contenitore template si occupa del layout di base dell'applicazione. Si mette il frigo a sinistra e l'elenco dei prodotti a
destra. Tecnicamente si potrebbe utilizzare un unico modello per tutto il codice HTML, ma la divisione cose su
fornisce una panoramica migliore e il controllo su ciò che accade dove.
Ora che hai creato il layout scheletro, facciamo l'aspetto lato sinistro come un frigorifero vero e proprio. Il frigorifero deve essere
rappresentato da un'immagine di un frigorifero aperto. A questo punto abbiamo bisogno di estendere il nostro progetto per essere in
grado di aggiungere i file di immagine. Perché nell'applicazione di esempio sono stati utilizzati senza immagini, creare una nuova cartella
denominata pubblico nella radice dell'applicazione. Questo è dove si mettono tutte le immagini.
NOTA La cartella pubblica è trattato in modo speciale per convenzione. Ogni file si inserisce nella cartella
sia accessibile al percorso principale del tuo URL. Se si mette un file chiamato image.jpg nella cartella
pubblica, è possibile accedervi tramite http: // localhost: 3000 / image.jpg.

www.it-ebooks.info
Creazione di un layout 37
Per includere un'immagine del frigo vuoto nel browser, viene utilizzato un file chiamato MyFridge / public /
vuoto-fridge.jpg dal codice sorgente di questo capitolo. Per fare riferimento a esso da un modello, non è necessario
includere / pubblico nel percorso-basta usare la seguente:
<Img class = "image-responsive" src = "/ vuoto-fridge.jpg" />
Il nostro frigorifero dovrebbe contenere un elenco non ordinato di voci a destra, rappresentata anche da immagini. Non
possiamo dire quanti elementi saranno in frigo in un dato momento, quindi abbiamo bisogno di una soluzione flessibile che
possiamo iterare. Pertanto, stiamo andando a utilizzare un modello dedicato per l'elenco di elementi.
Iterazione attraverso un array di oggetti all'interno di un modello può essere fatto con un aiutante di nome {{# ogni}}.
Il # davanti indica che non sostituisce il segnaposto per una stringa, ma fornisce una sorta di logica. Potrai creare
una lista non ordinata e iterazioni su un array chiamato prodotti. L'elenco che segue mostra come appare in azione.
2.3 Looping attraverso prodotti della productsList modello con il

ogni aiutante
<Nome di modello = "Lista prodotti">

<Div id = "supermercato" class = "box">
<Ul id = "prodotti"> {{}} prodotti
#each
<Li> {{> productListItem}} </ li> {{/ ogni}} </ ul> </ div> </
template>
Per ogni oggetto nella matrice si passa a questo helper, i contenuti tra il ogni tag è resa una volta. In questo caso si
vuole rendere un elemento di lista per ogni prodotto si passa alla aiutante. L'elemento di lista si esegue il rendering
contiene un modello che si desidera inserire qui {{> productListItem}}. Il vantaggio di utilizzare un modello all'interno
del ciclo è che si può riutilizzare lo stesso modello, productListItem, ancora una volta per la vostra lista dei prodotti sul
lato destro della nostra applicazione, il che significa che è possibile scrivere meno codice.
Aggiungere un nuovo modello per la parte inferiore del file HTML come mostrato nel seguente elenco.
2.4 Modello per ogni productListItem
<Nome di modello = "productListItem">

<Img src = "{{IMG}}"
Dati-id = "{{_ id}}"
class = "prodotto-immagine-reattivo trascinabile" /> </ template>
Successivo cerchiamo di regolare il modello di frigo nel file myFridge.html in modo che sembra che il codice del Listato 2.5.

www.it-ebooks.info
Listato 2.5 annodare attraverso ciascun prodotto all'interno frigo modello

<Div id = "frigo">
<Img class = "image-responsive" src = "/ vuoto-fridge.jpg" /> <ul>
{{}} prodotti #each

<Li> {{> productListItem}} </ li> {{/ ogni}} </ ul> </ div> </
template>
Come si può vedere, si sta riutilizzando il {{> productListItem}} modello sia per il frigo e il supermercato. Ora vogliamo
essere in grado di rendere alcuni prodotti l'elenco dei prodotti, così come il frigo è vuoto.
2.4 Aggiunta di contenuto al database in tempo reale

Ora che il layout è a posto, possiamo concentrarci sul back-end. Tutti gli oggetti, indipendentemente dal fatto che
siano in frigo o no, dovrebbero essere disponibili dal nostro database. Una volta che sono nel database, devono
essere inviate al cliente, quindi abbiamo bisogno di aggiungere una connessione tra il database e modelli.
2.4.1 Memorizzazione di voci nel database

Meteor viene fornito con un database MongoDB bundle che viene utilizzato per impostazione predefinita. A causa della stretta
integrazione, non abbiamo bisogno di specificare una stringa di connessione o le credenziali da utilizzare MongoDB. Per
comunicare con il database, abbiamo bisogno di dichiarare una nuova collezione. MongoDB utilizza collezioni invece di tabelle del
database perché è un NoSQL o un database di documenti-oriented. Collezioni contengono dati in forma di uno o più documenti.
Capitolo 4 copre i dettagli di lavorare con i database; per ora ci concentreremo su come ottenere il frigo in uno stato
completamente funzionale.
Userete Mongo.Collection per definire una nuova collezione di database per inserire, rimuovere, aggiornare e
trovare i documenti. Perché la collezione sta per immagazzinare i prodotti, si il nome di conseguenza e posizionarlo
all'interno del file JavaScript, come mostrato nel seguente elenco.
2.6 Dichiarazione di una prodotti raccolta sul client e server
Prodotti = new Mongo.Collection ( 'prodotti'); if (Meteor.isClient) {
// ...}
// ...}
Si dovrebbe mettere questa linea in cima al file, al di fuori di qualsiasi Meteor.isServer o Meteora
. IsClient blocco, perché dovrebbe essere disponibile sia sul client che sul server.

www.it-ebooks.info
Aggiunta di contenuto al database in tempo reale 39
Tutti i nostri prodotti avranno tre attributi:
■ Un nome, ad esempio, Pane

■ Un file di immagine associato nella cartella pubblica /, come ad esempio bread.png
■ Una posizione che-corrente è, sia frigo o supermercato
Utilizzando la console JavaScript all'interno del browser

Poiché le applicazioni Meteor eseguite almeno in parte all'interno del browser, è necessario passare alla console
JavaScript volte per vedere di debug o per essere in grado di impartire comandi. Tutti i browser principali hanno
strumenti di sviluppo che consentono di accedere alla console utilizzando un semplice tasto di scelta rapida.
Cromo:
■ Sul Mac, premere i tasti Opzione-Comando-J.

■ In Windows, premere i tasti Ctrl-Shift-J.
Firefox:
■ Sul Mac, premere i tasti Opzione-Comando-K.

■ In Windows, premere i tasti Ctrl-Shift-K.
Internet Explorer:
■ In Windows, premere F12 e fare clic sulla scheda Script.
Musica lirica:
■ Sul Mac, premere i tasti Opzione-Comando-I.

■ In Windows, premere i tasti Ctrl-Shift-I.
Safari:
■ Sul Mac, premere i tasti Opzione-Comando-C.
Per aggiungere alcuni dati è possibile aprire gli strumenti della riga di comando JavaScript in un browser e aggiungere un prodotto
utilizzando il seguente:
Products.insert ({IMG: '/bread.png', il nome: 'pane', luogo: 'frigorifero'});
In risposta a questa chiamata di funzione, si ottiene l'ID del documento del prodotto appena inserito. Con questo ID è
anche possibile ottenere il documento dal database in questo modo:
Products.findOne ({_ id: 'X6Qw8v3ChcsZKaKan'});
Perché si sa solo un singolo oggetto può avere questo ID, userete il trova uno() funzione. La risposta è un oggetto
unico prodotto dal database (vedi figura 2.5).

www.it-ebooks.info
Figura 2.5 Utilizzo console JavaScript del browser per inserire e cercare dati nel database
la produttività degli sviluppatori vs. sicurezza

Anche se è conveniente utilizzare la Console per gli sviluppatori di aggiungere e rimuovere elementi dalla banca dati,
è anche un rischio per la sicurezza. Se si può fare, allora chiunque altro utilizzando la propria applicazione sarà anche
in grado di farlo. I nuovi progetti contengono sempre un pacchetto chiamato insicuro, che disattiva i controlli zione
authentica- e permette a chiunque di leggere e scrivere a qualsiasi raccolta. Insieme con il suo fratello autopublish -che
rende automaticamente tutte le collezioni dal lato server e il loro contenuto a disposizione del cliente, rende la vita
degli sviluppatori molto più facile perché permette loro di concentrarsi sulla costruzione di funzionalità prima, senza
dover lottare con problemi di autenticazione durante le prime fasi di sviluppo. Durante lo sviluppo sarà più probabile
introdurre un sistema di autorizzazioni e il limite pub- dati istituisce a ciò che l'utente autenticato ha accesso. Quando
arriverà quel momento, si può sbarazzarsi di entrambi i pacchetti utilizzando la seguente riga di comando:
$ Meteora rimuovere insicuro $ meteora rimuovere

autopublish
Interrogazione dei dati per la sua posizione è anche abbastanza semplice. Invece di utilizzare il _ id campo, si può
guardare singoli attributi pure. Ci si aspetta più di un singolo risultato, quindi userete trova() e potete trovare tutte le voci di
database che hanno frigo come il loro posto attributo:
Products.find ({posto: 'frigorifero'});
Ora che hai aggiunto alcuni dati nel database, è possibile accedere e visualizzare i dati nel browser.
2.4.2 Dati di collegamento ai modelli
Nel frigo template, ti consigliamo di iterare su tutti i prodotti in cui l'attributo

posto è frigo. Per fare ciò, avrete estendere il modello con un aiutante chiamato prodotti che restituisce tutti i prodotti che si
desidera mostrare in frigo. Diamo un'occhiata al modello di nuovo:

. . .
</ Template>

www.it-ebooks.info
È possibile accedere a ogni modello con il suo nome con il globale Modello oggetto che viene da Meteor. Ogni Modello
oggetto ha una funzione chiamata aiutanti che prende un array associativo in cui i valori sono accessibili nel modello
attraverso i suoi tasti:
Template.fridge.helpers ({
La ogni tag all'interno del
prodotti: function () {
template si aspetta un array.
ritorno []; }});
Per il frigo, ti consigliamo di scorrere una serie di prodotti che si ottiene dal database. Il lavoro del soccorritore è
quello di cercare i dati dal database e passarlo al modello. Ricordate che per visualizzare i dati che si è creato un
loop all'interno dei modelli utilizzando {{# ogni prodotti}} ... {{/ cad}}:

<Div id = "frigo">
<Img class = "image-responsive" src = "/ vuoto-fridge.jpg" /> <ul>
{{}} prodotti #each

Loop attraverso tutti gli
. . .
oggetti restituiti dai prodotti
{{/ Ogni}} </ ul> </
aiutante.
div> </ template>
Per estendere il modello frigo con il prodotti aiutante, si passa alla aiutanti
funzione della Modello oggetto. Per fare ciò, sostituire tutto il codice all'interno del Meteor.isClient
blocco nei myFridge.js file con il codice dal seguente elenco.
2.7 La creazione di un prodotti aiuto per la frigo modello
Template.fridge.helpers ({
tornare Products.find ({
posto: 'frigorifero'}); }});
Il prodotti helper è una funzione che restituisce tutti i prodotti in cui l'attributo
posto è frigo, proprio come lo vuoi. Perché hai aggiunto un prodotto al frigo già, dovrebbe direttamente essere
aggiunto al vostro punto di vista. Assicurati anche posto l'immagine associata nella cartella pubblica. Se hai aggiunto
il documento pane alla tua collezione e l'immagine corrispondente alla cartella pubblica, l'applicazione sarà simile
figura 2.6 ora.
Per il Lista prodotti modello sul lato destro, è ora possibile fare la stessa cosa, ma con una query che cerca un
diverso valore della posto attributo. Se non si desidera

www.it-ebooks.info
Figura 2.6 Il frigorifero mostra un'immagine

di una pagnotta.
per mostrare tutti i prodotti dal database, ma solo quelli che sono attualmente al supermercato. Per fare ciò è
necessario interrogare il database, come nel seguente elenco.
2.8 La creazione di un prodotti aiuto per la Lista prodotti modello
Template.productList.helpers ({
tornare Products.find ({
posto: 'supermarket'}); }});
Se si inserisce alcuni più prodotti al frigorifero o al supermercato utilizzando la console JavaScript, vedrete come essi
vengono aggiunti automaticamente alla schermata. Inoltre, l'inserimento dei prodotti avviene in tempo reale già.
Aprire un altro browser e vedrete i prodotti vengono aggiunti immediatamente (vedi figura 2.7).
Finora hai creato l'interfaccia utente e impostare le strutture di dati necessari per l'applicazione frigo. L'ultima
cosa che dovete aggiungere è l'interazione con l'utente che permette ai visitatori di mettere i prodotti in frigo e
rimuoverli da esso, anche.

www.it-ebooks.info
Figura 2.7 Le modifiche al database si riflettono in altri browser in tempo reale.
2.4.3 Aggiunta di un insieme definito di prodotti
Anche se a volte è utile essere in grado di aggiungere i prodotti manualmente, è possibile utilizzare il server per aggiungere un
insieme definito di prodotti all'avvio. In questo modo, si avrà uno stato conosciuto con cui lavorare, indipendentemente dalla
quantità di test è stato fatto in una precedente esecuzione.
All'interno del file javascript il codice da 2.9 rimuoverà tutti i prodotti dal database ogni volta che il server viene
avviato. In seguito, sarà messo il latte in frigo e il pane in un supermercato.
2.9 Aggiunta di un set di dati definito alla base di dati su di avvio del server
Questo viene eseguito ogni volta che il

server viene riavviato.
Products.remove ({});
Rimuove tutti i prodotti
dal database
// riempire il database con alcuni prodotti Products.insert ({
Nome: 'Milk', IMG: '/milk.png',

luogo: 'frigorifero'}); Inserisce alcuni
prodotti nel
database
Products.insert ({
Nome: 'pane', IMG: '/bread.png', luogo:
'supermarket'}); }); }

www.it-ebooks.info
Arrestare il server Meteor premendo Ctrl-C e riavviarlo. Se sono stati copiati sulle immagini per il latte e il pane dal
codice di esempio nella cartella pubblica, è possibile ora vedere una bottiglia in frigo e pane sulla destra. Come tocco
finale, aggiungiamo l'interattività tramite drag and drop.
2.5 Spostamento di elementi in frigo

Il nostro obiettivo è quello di rendere i prodotti trascinabili dalla lista dei prodotti nel frigorifero, e viceversa. Questo
non è specifico per Meteor, ma un compito front-end standard. Useremo la libreria jQuery-UI per il drag & drop ed
effettuare i collegamenti necessari per i modelli. Perché vogliamo anche aggiornare il database a seguito di drag and
drop, avremo bisogno di integrare le azioni di front-end con un back-end che è in grado di memorizzare contenuti nel
database.
Inizieremo aggiungendo la libreria jQuery-UI al progetto esistente. Sarà fornire funzionalità dragand-drop che funziona
su tutti i principali browser. Una volta che la libreria è disponibile, faremo definire sia il frigorifero e l'elenco dei prodotti
come possibili bersagli a caduta in cui possono essere collocati oggetti. Infine, ciascun comparatore articolo sarà
contrassegnato come trascinabile in modo che possa essere spostato a uno dei contenitori goccia.
2.5.1 Aggiunta di jQuery UI-al progetto
Non è necessario aggiungere la libreria jQuery-interfaccia utente per i file di progetto, ma è possibile includere la versione
on-line, invece. Questo funziona allo stesso modo in Meteor come in qualsiasi altro file HTML: aggiungendo al < head> zona
del file myFridge.html (vedi elenco seguente).
2.10 Caricamento jQuery-UI da una CDN
<Head>
<Title> MyFridge </ title>
<Script src = "// code.jquery.com/ui/1.11.4/jquery-ui.js"> </ script> </ head>
La biblioteca è ora caricato dal jquery.com. Ovviamente è necessario disporre di una connessione a Internet, al fine
di utilizzare la rete di distribuzione di contenuti (CDN) per fornire il file JavaScript. In alternativa è possibile scaricare
la libreria da http://jqueryui.com e mettere il file jquery-ui.min.js in una cartella chiamata cliente. Meteor servirà
automaticamente e caricare questo file sul client. Se si aggiunge il file in locale, assicurarsi di non includere il copione tag
nel capo sezione del file di modello.
2.5.2 Definizione delle destinazioni di rilascio per gli articoli
Potrai utilizzare l'API jQuery per il drag and drop per definire sia frigo e Lista prodotti come possibili bersagli a caduta.
Perché il frigo e il Lista prodotti devono essere rese nel DOM prima di poter utilizzare jQuery-UI per eseguire eventuali
modifiche su di loro,

www.it-ebooks.info
Spostamento di elementi in frigo 45
bisogna aspettare fino a quando ogni modello è reso. Una funzione di callback disponibile per ogni modello rende questo
molto facile 1:
Template.fridge.onRendered (function () {
var TemplateInstance = questo; Invece di analizzare l'intera DOM,
limitiamo la portata di jQuery a questa
TemplateInstance. $ ( '# frigo'). droppable ({ istanza modello.
cadere: la funzione (EVT, ui) {
// fare qualcosa } }); });
Scoped DOM parsing con jQuery

Ogni volta che vedi $ () nel codice, si può essere certi che jQuery è coinvolto. Di solito significa anche che
l'intero albero DOM viene analizzato, che è piuttosto lento e spesso non è ciò che si desidera. Quando si tenta
di impostare il colore di sfondo corpo è perfettamente accettabile utilizzare $ (' corpo'). Ma la maggior parte del
tempo si vuole evitare un modello di avere effetti collaterali che cambiano altri modelli. Oltre al parsing DOM
completo, che influisce sulle prestazioni, debugging diventerà un incubo.
Meteor offre una soluzione semplice per limitare l'attività di jQuery per l'ambito modello corrente:
Template.instance () contiene un oggetto che rappresenta il modello corrente. Dentro il creato, reso, e distrutto callback
lo stesso oggetto è disponibile come
Questo. È possibile limitare la portata di jQuery per questo oggetto e utilizzare in modo sicuro, per esempio, la
. dateinput di classe in più modelli senza avere la Modellomaschera la creazione di un tratto datepickers tutto il luogo.
perché l'utilizzo Questo direttamente può essere fonte di confusione, è necessario utilizzare un identificatore più
significativo, come TemplateInstance nel codice di esempio precedente.
Quando il frigo modello è reso, si definisce < div id = "frigo"> come bersaglio droppable. Ciò significa elementi DOM
possono essere aggiunti in modo dinamico semplicemente trascinandoli nella div la zona. In sostanza si sta ascoltando
per un evento (vale a dire, un utente lo spostamento di un oggetto al contenitore), quindi è necessario definire un
gestore di eventi per determinare se qualcosa è stata abbandonata nel contenitore. Il gestore di eventi sarà inoltre
necessario eseguire un aggiornamento per l'elemento associato nel database e aggiornare la sua posizione.
Il gestore di eventi si chiamerà far cadere, e cambierà la posto attribuire una volta che un prodotto è stato fatto
cadere. Per identificare la voce del database che corrisponde al prodotto che è stato abbandonato, è necessario
passare un ID di dati su di esso. Nel gestore di eventi JavaScript, si utilizza una funzione con due argomenti: il evento e
ui oggetto. Potrai utilizzare il
ui Scopo della far cadere callback per identificare l'ID del prodotto caduto. Si può dire quale elemento HTML è stato
trascinato, cercando al ui.draggable discussione. Il
ui.draggable oggetto sarà sempre uno dei productListItem elementi. E 'facile
1 Utilizzando jQuery nel campo di applicazione del modello corrente è coperto in modo più dettagliato nel capitolo 3.

www.it-ebooks.info
identificare quale elemento HTML è stato trascinato, ma è necessario anche un link alla banca dati, che è dove il Dati-id
attributo è disponibile in:
<Nome di modello = "productListItem">

<Img src = "{{IMG}}" data-id = "{{_ id}}" class = "prodotto-immagine-reattiva
trascinabili"/> </
template>
È stato aggiunto un attributo di dati al < img> di nome Dati-id. Il valore della Dati-id
attributo è impostato su _ id, che rappresenta l'ID del database di un prodotto. Quando si trascina un'immagine, si dispone di un
modo semplice per identificare quale prodotto nel database è interessato, ed è possibile cambiare la sua posto attributo di
conseguenza. Utilizzando una sintassi simile come avete fatto per l'inserimento di nuovi prodotti, è possibile aggiornare quelli
esistenti chiamando il aggiornare() Funzione per il nostro prodotti collezione. Tutto ciò che serve è quello di passare l'ID del database
e impostare il
posto attribuire alla posizione in cui è stata abbandonata in, come mostrato nel Listato 2.11.
Ricordatelo Dati-id, e con ciò la _ id del prodotto correlato dell'immagine trascinato, è disponibile tramite il ui.draggable
oggetto.
Utilizzando jQuery per accedere attributi degli elementi

Per ridurre al minimo la quantità di codice da scrivere, userete una notazione abbreviata per ottenere l'ID di qualsiasi
prodotto. Potrai utilizzare jQuery per accedere a un elemento dal set di dati API HTML5.
A differenza di jQuery UI, le funzionalità di base jQuery è fornito in bundle con il Meteor, quindi non è
necessario includerlo per qualsiasi progetto. Il set di dati API HTML5 specifica che ogni elemento DOM può
tenere attributi aggiuntivi con dati- prefisso. E 'utile per collegare le meta-informazioni a qualsiasi elemento in
una pagina. In combinazione con le nuove jQuery sioni ver- (a partire da 1.4.3) non c'è bisogno di accedere
all'attributo via attr ( 'dataID') ma con dati ( 'id').
Accesso al Dati-id attributo di un prodotto è quindi svolto in questo modo:
$ (Ui.draggable) .data ( 'id')
È possibile ridurre ulteriormente il codice facendo cadere i $ circostanti () in modo che solo la ui oggetto
rimane:
ui.draggable.data ( 'id')
È possibile utilizzare uno di questi due varianti.
2.11 Dichiarare frigo come bersaglio droppable e l'aggiornamento della posizione del prodotto
Template.fridge.onRendered (function () {
Ottenere l'ID del
var TemplateInstance = questo;
database dall'attributo
HTML data-id.
TemplateInstance. $ ( '# frigo'). droppable ({
Impostare l'istruzione di
var query = {_id: ui.draggable.data ( 'id')}; var modifiche = {$ set: {posto: 'frigorifero'}};
aggiornamento per impostare posto al frigorifero.

www.it-ebooks.info
Spostamento di elementi in frigo 47
Products.update (interrogazione, modifiche); }}); });

Eseguire
l'aggiornamento del database.
Si crea una query che affronta il documento prodotto corretto nel nostro Prodotti collezione. Il primo argomento
passato a Products.update () funziona esattamente come prima: restituisce un documento basato sul suo ID. Il
secondo argomento utilizza il $ impostato funzionalità per specificare che si desidera aggiornare un campo in questo
documento. I dati che si desidera impostare è il posto attributo e perché è l'evento di rilascio che si chiama se un
oggetto è caduto sopra il frigo, si desidera modificare il posto attribuire a frigo.
L'elenco dei prodotti è anche una destinazione di rilascio e ha quindi bisogno di quasi lo stesso codice, ma con due
piccoli, ma importanti differenze. Ancora una volta il reso funzione della
Lista prodotti modello deve essere utilizzato per aspettare il DOM. Inoltre, se un oggetto è caduto sopra il Lista prodotti modello,
il posto attributo del documento prodotto deve essere cambiato. Questa volta è necessario impostarlo su supermercato
invece di frigo. L'elenco che segue mostra il codice richiesto.
2.12 Dichiarare Lista prodotti come bersaglio droppable
Template.productList.onRendered (function () {
Lista prodotti è il nome del modello
usato da Meteor.
TemplateInstance. $ ( '# supermercato'). droppable ({

supermercato è
l'ID div.
var query = {_id: ui.draggable.data ( 'id')}; var modifiche = {$ set: {posto: 'supermarket'}};
Products.update (interrogazione, modifiche); }}); });
Impostare l'attributo posto
supermercato quando i prodotti
vengono eliminati.
2.5.3 permettendo elementi per essere trascinabili
Hai impostato gli obiettivi droppable, ma si hanno anche per definire gli elementi che può essere omessa: gli elementi
trascinabili. In questa applicazione, ciascuna productListItem elemento dovrebbe essere trascinato. Anche in questo
caso, si basano su jQuery UI-per contrassegnare le voci di elenco come trascinabili, in modo da utilizzare la reso funzione
della productListItem. Per ogni productListItem che è resa, questo reso callback verrà eseguita una volta, efficacemente
rendendo ogni mobile cibo (vedi il seguente elenco).
2.13 Dichiarare productListItem come un elemento trascinabile
Template.productListItem.onRendered (function () {
TemplateInstance. $ ( 'trascinabile'). trascinabili ({

cursore: 'movimento',
aiutante: 'clone'}); });

www.it-ebooks.info
Si noti che i 2.13 usi TemplateInstance. $ ( 'trascinabili') al fine di accedere l'elemento HTML che viene trascinato. Nel
nostro caso questo è il < img>. Utilizzando jQuery nel contesto di questo modello permette Meteor per la ricerca di un
elemento solo all'interno del productListItem modello piuttosto che l'intero albero DOM, che lo rende più efficiente.
2.6 Distribuzione per meteor.com e l'utilizzo del frigo

Si dispone ora di un'applicazione in cui è possibile trascinare un'immagine da un elenco di prodotti a destra al
frigorifero a sinistra, e viceversa. Quando l'immagine è caduto, il documento prodotto sottostante verrà aggiornato di
conseguenza. I cambiamenti cambiano reattivamente l'interfaccia utente e il prodotto è reso nella posizione corretta
automaticamente.
Per condividere il vostro frigorifero con il mondo, è possibile distribuire su uno dei server di test di meteoriti con la schierare
comando. Basta scegliere un nome che non è ancora preso da utilizzare come il sottodominio in cui la vostra applicazione
sarà disponibile. Se il sottodominio è preso già, verrà visualizzato un messaggio di errore.
Facciamo distribuire il nostro progetto a mia-CH02-MyFridge utilizzando il seguente:
$ Meteora distribuire mia-CH02-MyFridge
Per assicurarsi che solo tu puoi accedere, aggiornare o eliminare l'applicazione dal server di test, sarà associato al
tuo account sviluppatore Meteor personale che si basa sul vostro indirizzo di posta elettronica. Pertanto, è necessario
fornire la tua email quando si distribuisce per la prima volta. Meteor memorizzerà il tuo indirizzo sul computer di
lavoro. Inoltre, si otterrà una risposta e-mail che spiega come proteggere il tuo account con una password. Quando la
distribuzione è terminata, è possibile accedere l'applicazione su un sottodominio meteor.com con il nome scelto, nel
nostro caso, http://ch02-mia-myfridge.meteor.com.
Ora è possibile condividere questo URL con un amico (o semplicemente aprire due browser sullo stesso computer) e
iniziare a trascinare e rilasciare i prodotti avanti e indietro. Vedrai che tutte le modifiche saranno disponibili su tutti i client
quasi istantaneamente. Meteor si prende cura di mantenere tutti i client connessi in sincronia, anche se non hai mai definito
un codice specifico per questo. È inoltre mai dovuto scrivere alcun codice per interrogare il server per eventuali
aggiornamenti del database. Questo è full-stack reattività in azione.
Nei capitoli seguenti, vedremo come tutte le parti che sembrano funzionare adattano magicamente insieme, e
vedrai che non c'è nessuna magia dietro tutto questo a tutti, ma solo buon vecchio JavaScript.
2.7 Sommario
■ Ai fini dello sviluppo, la meteora strumento CLI gestisce l'intero stack Meteor in background.
■ Spacebars è il linguaggio di template usato da Meteor.

■ Le collezioni sono utilizzati per interagire con il database.
■ file statici come le immagini vengono serviti dalla cartella pubblica.
■ dati modificati vengono reattivo spinto a tutti i clienti.

www.it-ebooks.info
Parte 2
3, 2, 1-impatto!
N ow che si ha familiarità con i concetti di base della piattaforma Meteor, imparerete a conoscere le
basi per applicazioni reattive in dettaglio. Cominciando con l'interfaccia utente e modelli (capitolo 3),
lavoreremo lentamente il nostro modo attraverso la pila. Spiegheremo come lavorare con i dati e utilizzare la
modifica reattiva (capitoli 4 e 5) gli utenti, aggiungere (capitolo 6), gestire le pubblicazioni di dati (capitolo 7),
l'uso di routing (capitolo 8), codice di struttura in confezioni (capitolo 9) , e scrivere il codice sincrona e
asincrona sul server (capitolo 10).

www.it-ebooks.info
www.it-ebooks.info
Lavorare con i modelli

■ Creazione di modelli
■ Utilizzando la sintassi di template di default di Meteor
■ Organizzatore Javascript e HTML

■ Utilizzo delle mappe di eventi per rendere i modelli
interattivi
■ La comprensione del ciclo di vita del modello
Tutto ciò che il browser web rendering HTML è alla fine. Se si apre un sito web in vista origine vi accorgerete che
ogni pagina ha centinaia di righe di codice HTML. Non solo sta scrivendo tutto a mano noioso, soggetto a errori,
e altamente inefficiente, è anche impossibile quando si lavora con le applicazioni web in quanto gran parte del
contenuto è dinamico e non si può sapere in anticipo quali codice esatto deve essere reso .
I modelli consentono di definire blocchi di codice HTML che possono essere riutilizzati come le volte che vuoi. Di
conseguenza, si deve scrivere meno codice, e il codice è più facile da leggere e molto più semplice da mantenere.
In questo capitolo, imparerete come scrivere i modelli e che cosa si può fare con loro. Ci prima dare un'occhiata a
Blaze, biblioteca interfaccia utente reattiva di Meteor, e Spacebars, la sua lingua predefinita di template.
51

www.it-ebooks.info
52 CAPITOLO 3 Lavorare con i modelli
3.1 Introduzione ai modelli

I modelli sono i mattoni per la nostra interfaccia utente. I modelli sono frammenti di codice HTML che contengono segnaposto, che
possono essere soddisfatte da contenuti restituito dalla logica dell'applicazione. Essi possono essere riutilizzati per assicurare lo stesso
aspetto grafico su tutti i siti e tutti gli elementi.
Un altro aspetto importante di modelli è separazione degli interessi. Ciò significa che un modello è destinato solo
per la rappresentazione dei dati ed è in ultima analisi, reso come HTML al DOM. Un modello dovrebbe avere logica di
programmazione come poco al suo interno il più possibile. Tutto ciò che ha bisogno di computazione e crea una
potenza specifica non dovrebbe essere all'interno di un modello, ma separato in un file JavaScript. Questo approccio
aiuta ad aumentare la leggibilità, ed è fondamentalmente lo stesso concetto di separare lo stile di HTML nelle proprie
Cascading Style Sheets (CSS) file invece di ingombrare il codice HTML con le definizioni di stile.
Pensate a un semplice elenco di utenti, come mostrato in figura

3.1. Per ogni persona che si vuole visualizzare il nome insieme a un
numero di telefono. Perché non si sa quante persone hanno bisogno di
essere mostrato in questo elenco, si utilizza un modello dinamico per
generare il codice HTML necessario.
In questo esempio, si utilizza un < h5> elemento che avvolge il

nome e si mette il numero di telefono all'interno di un < p> elemento. A
dire il processore modello in cui si desidera che il contenuto di andare, è
possibile utilizzare i segnaposto che includono doppie parentesi graffe.
Utilizzando pseudocodice, il modello richiesto sarebbe simile a questa:
Figura 3.1 Un elenco delle persone e delle loro

numeri di telefono
<H5> {{nome}} </ h5> <p> Telefono:
{{TELEFONO}} </ p>
Perché i segnaposto possono contenere più elementi, è necessario il modello per essere in grado di creare un
numero qualsiasi di voci di elenco. Proprio come nel codice JavaScript, è possibile utilizzare un ciclo che prende un
array come input e itera su ciascuno dei contenuti di matrice, avendo cura di riempire i segnaposto per nome e Telefono
con informazioni sulla persona. In questo esempio, si creerà una lista di persone che riutilizza il profilo modello. Per
ogni persona, dovrebbe contenere la seguente:
<Ul>
<! - per ogni utente rendono questo: ->
<Li> {{LOOP_THROUGH_PERSON_LIST_USING_TEMPLATE}} </ li> </ ul>
Agganciando i modelli con la logica di back-end tornerà il codice HTML mostrato nel seguente elenco.

www.it-ebooks.info
Lavorare con i modelli 53
3.1 Resi HTML da modello
<Ul>
<Li>
<H5> Christina </ h5> <p> Telefono:
1234-567 </ p> </ li> <li>
<H5> Stephan </ h5> <p> Telefono:

666-999-321 </ p> </ li> <li>
<H5> Manuel </ h5> <p> Telefono: 987-654-321

</ p> </ li> </ ul>
Il vantaggio di utilizzare i modelli è in cui vengono scritte una sola volta e li usa per una quantità infinita di dati (nel
nostro caso, le persone) che si desidera rendere. Avere un unico luogo per gestire l'aspetto di un elemento è anche
conveniente. Pensate a quello che devi fare se non si desidera che il < h5> elemento ma solo una normale < p> elemento
per il nome di una persona. Dovete solo cambiare in un unico modello, e aggiorna istantaneamente per qualsiasi
persona che si esegue il rendering con l'aiuto del profilo modello.
3.2 Lavorare con i modelli

A meno che non si sta scrivendo un'applicazione server-only, ogni applicazione web scritta in Meteor dovrebbe avere
almeno un modello. La visualizzazione di contenuti in un browser senza utilizzare un modello non è possibile. Questa
sezione discute le fondamenta di lavorare con i modelli.
3.2.1 Il motore di Blaze

Dietro le quinte, Meteor utilizza una libreria di interfaccia utente reattiva chiamato Fiammata. E 'responsabile per i modelli di
elaborazione ed è una parte importante di ciò che è spesso definito come la magia di Meteor. Come si può vedere nella figura
3.2, Blaze è costituito da due componenti principali:
■ Un API runtime
■ Un compilatore accumulo di tempo
runtime
Rende elementi / DOM, osserva modifiche e
API
aggiornamenti elementi
compilatore
Compila HTML per HTMLJS

Build-tempo
Figura 3.2 I componenti Blaze

Blaze

www.it-ebooks.info
Il API runtime rende elementi, tiene traccia delle loro dipendenze, e li aggiorna attraverso il loro ciclo di vita completo,
come quelle dipendenze cambiano. Ciò significa che se il numero di telefono di una persona è cambiato nel
database e attualmente un utente visualizza una pagina che le informazioni di questa persona, il numero viene
aggiornato automaticamente sullo schermo. Questo perché il segnaposto dipende dal valore effettivo memorizzato
nel database, che è una fonte di dati reattiva.
L'API runtime funziona con JavaScript per applicare reattività; non si può trattare con HTML direttamente, che è il
motivo per cui la seconda componente di Blaze è un costruire-tempo compilatore.
navi di meteoriti con un compilatore che traduce HTML in JavaScript (HTMLJS per essere precisi). Per impostazione
predefinita, elabora modelli usando Spacebars. Opzionalmente, è possibile utilizzare i pacchetti per passare al compilatore
di un linguaggio di templating diverso, come Jade.
Entrambi i componenti lavorano separatamente, quindi è del tutto possibile per bypassare il compilatore accumulo di tempo
e non utilizzare alcun modello, ma invece scrivere il codice che si rivolge direttamente l'API runtime. Perché questo non è molto
pratico per la maggior parte degli utenti, non ci preoccupiamo l'API runtime in sé, ma concentriamo sull'utilizzo Spacebars.
NOTA linguaggio di template di Meteor è chiamato Spacebars. E 'un diretto discendente del manubrio, con cui condivide la
maggior parte della sua sintassi e funzionalità. Blaze utilizza l'aggiornamento pagina dal vivo, così ogni volta che un file di
modello correlata viene modificato sul server (HTML, CSS o JavaScript), esso viene aggiornato istantaneamente nel browser.
Come fa Blaze trovare i modelli all'interno di un progetto?
3.2.2 file di modello Organizzazione
Quando si lavora con i modelli, di solito si hanno quattro tipi di file da affrontare, anche se solo uno è tecnicamente
necessaria per un modello:
■ Il modello effettivo memorizzato in un file HTML

■ Codice opzionale JavaScript in un file JS che viene eseguito all'interno del contesto del cliente e fornisce
funzionalità ai modelli
■ stili facoltativa in uno o più file CSS 1
■ risorse statiche opzionali come le immagini oi font all'interno della cartella pubblica senza una controparte JavaScript, i
modelli possono essere solo statico e non può essere riempito con contenuti dinamici, che è il motivo per cui nella maggior
parte dei casi avrete bisogno di almeno due file per lavorare con i modelli . Per tenere tutto organizzato, è meglio tenere ogni
modello in un file HTML dedicato. Meteor li trovare ovunque nelle cartelle di progetto. 2 Tutto il codice front-end possono essere
memorizzate in un unico file JS, oppure è possibile utilizzare HTML / JS coppie in modo che ogni modello è costituito da due
file, che si consiglia, se i vostri progetti si sviluppano più complesse:
<Nome del modello> js <nome

modello> .html
1 Inoltre, Meno, Sass, e altre lingue styling possono essere utilizzati; CSS è solo un esempio.
2 Ci sono eccezioni a questa regola, che esploreremo in profondità nel capitolo 10.

www.it-ebooks.info
Creazione di modelli HTML dinamico 55
In questo capitolo non ci preoccupare di elementi stilistici perché questo funziona proprio come in qualsiasi altra
applicazione web. Abbiamo coperto la cartella pubblica nel capitolo precedente, quindi concentriamoci esclusivamente sui
primi due elementi: HTML e JavaScript file.
3.3 Creazione di modelli HTML dinamico

Meteor è dotato di un proprio linguaggio di template chiamato Spacebars. Se si ha familiarità con il manubrio o baffi, si
conosce già abbastanza per iniziare a utilizzare immediatamente. Anche se non avete usato una di queste lingue, ci si
accorge che la sintassi generale è abbastanza semplice con cui lavorare.
Modelli scritte utilizzando Spacebars sembrano quasi normale HTML. tag template sono facilmente individuabili
perché sono sempre racchiusi tra parentesi graffe multiple. I quattro principali tipi di tag template sono
■ tag a doppia staffa {{...}}

■ tag Triple-rinforzato {{{...}}}
■ tag di inclusione {{>} ...}
■ Etichette block {{# direttiva}} ... {{/direttiva}}
3.3.1 tag doppi e tripli-rinforzato (espressioni)

Tag modello che possono migliorare il codice HTML statico per essere sostituiti con contenuti generati dinamicamente sono
chiamati anche espressioni. Dipendono da una sorgente di dati o un qualche tipo di logica di applicazione che restituisce un
valore.
tag modello può essere utilizzato solo all'interno di un contesto di modello. Un tag modello di base è mostrato nel
seguente elenco.
3.2 tag a doppia staffa template
<Nome del modello = "espressioni">

{{Nome}} </
template>
Come si può vedere, ogni modello ha un'apertura e di chiusura < template> tag ed una obbligatoria nome attributo. Il nome
attributo deve essere un identificatore univoco per un modello all'interno dell'applicazione. Utilizzando il nome di un
modello, siete in grado di accedervi da un file JavaScript, che faremo in seguito.
D TAGS DOPPIO-rinforzato
Doppia staffa tag modello vengono utilizzati per inserire stringhe nel codice HTML. Non importa quale sia il valore di
ritorno hanno a che fare con-una matrice, un oggetto, o una stringa, è sempre resa come una stringa. Supponiamo di
avere un modello denominato espressioni da 3.2 e si desidera sostituire il tag template {{ nome }} con < strong>
Michael </ strong>.
Il codice JavaScript che accompagna deve restituire la stringa sostituto come mostrato nel Listato 3.3. Ricorda che
il codice deve essere avvolto in un Meteor.isClient ambiente-it non può essere eseguito sul lato server perché i modelli
non sono disponibili all'interno del campo di applicazione server.

www.it-ebooks.info
3.3 codice JavaScript per un nome di supporto chiamata
Il modello può essere utilizzato
Template.expressions.helpers ({
solo sul client; è undefined sul
Nome: function () {
server.
ritorno "<strong> Michael </ strong>"; }}); }
Insieme, il codice HTML e JavaScript renderanno come mostrato in figura

3.3.
Come si può vedere, doppie parentesi elaborare la stringa e la fuga tutti i
caratteri che richiedono attenzione. Questo è utile se si vuole evitare di valori
di ritorno accidentale interpretati come HTML o addirittura JavaScript. A volte,
però, si consiglia di evitare qualsiasi trattamento di stringa. In tal caso, è
necessario utilizzare le parentesi triple. Figura 3.3 Etichette nei doppie parentesi
graffe sempre rendere le stringhe e la fuga
HTML e script tag.
T TAGS Riple-rinforzato
Se il tag modello inizia e finisce con tre parentesi graffe {{{...}}}, i suoi
contenuti saranno resi esattamente
come li avete passato al tag modello. Estendendo l'esempio da 3.3, diamo ora usare {{{ nome }}} invece di {{ nome }}. Meteor
non sfuggirà alcun carattere o tag e passerà l'output al browser inalterato (vedi figura 3.4).
Come si può vedere, i tag HTML sono resi come HTML nel DOM e le stringhe non come semplici.
Figura 3.4 stringhe in triple graffe

controventata tag vengono resi come HTML.

www.it-ebooks.info
AVVERTIMENTO Se si utilizzano le parentesi graffe triple per visualizzare i dati inseriti da un utente, è necessario
assicurarsi che è stata sterilizzata prima (cioè, verificare la presenza di potenziali contenuti di script maligni). Se non lo
fate, il vostro sito web è vulnerabile ad attacchi di cross-site scripting. Il modo più semplice per trattare con i dati
generati dagli utenti è quello di lasciare Meteor igienizzare per voi prima che venga visualizzato e bastone con doppie
parentesi graffe, quando possibile.
Sbirciare all'interno compilatore accumulo tempo di Blaze: trasformare HTML in HTMLJS

Blaze utilizza le sue API runtime di trasformare il codice HTML da un modello Spacebars in JavaScript. Ogni file
modello compilato può essere trovato nella directory .meteor / local / build / programmi / web.browser / app.
Il modello a 3.2 produce il seguente codice:
Template [ "espressioni"] = new Template ( "Template.expressions",

(funzione() {
Le espressioni
guarda var = questo; ritornare
modello di nome
[HTML.Raw ( Blaze.View costruisce una
viene convertito in
regione reattiva nel DOM.
Blaze.View ( "lookup: nome", function () { una funzione.
tornare Spacebars.mustache (view.lookup ( "nome")); }
) Spacebars restituisce il valore

]; })); })); effettivo per il nome.
Questo codice permette HTMLJS Meteor per aggiornare in modo reattivo modelli e anche solo parti di esse.
Ogni modello è accessibile attraverso il globale Modello oggetto dal suo nome attributo.
Anche se è possibile chiamare Blaze.View direttamente dall'interno di un aiutante modello, raramente c'è la
necessità di farlo. Solo quando si decide di costruire il proprio API di runtime per Blaze, sostituendo Spacebars
con qualcos'altro, come Jade o Markdown, avrete bisogno di familiarizzare con le strutture di trasformazione
interna. Fino a quando una documentazione API per questo diventa disponibile, è possibile saperne di più
guardando i contenuti del fiammata e spacebars pacchetti, che fanno parte del nucleo di Meteor.
3.3.2 tag di inclusione (parziali)

Oltre alle stringhe di inserire o HTML, è possibile inserire un modello in un altro modello. Perché rappresentano solo
una parte del tutto template, queste subtemplates sono noti anche come parziali. Inserimento di un modello in un altro
si ottiene utilizzando il segno> racchiuso entro due parentesi graffe come questo:
{{>}} AnotherTemplate

www.it-ebooks.info
tag di inclusione sono uno strumento importante per mantenere i modelli piccoli e far loro rappresentano solo una cosa. Se si
vuole rendere un complesso di interfaccia utente, vi consigliamo di dividere tutto ciò che l'utente può vedere in più piccole,
modelli e subtemplates logicamente incapsulati.
M ONOLITHIC MODELLI
Ad esempio, diciamo che serve una pagina di profilo che visualizza non solo un'immagine avatar e il nome di una
persona, ma anche un flusso di notizie. Si potrebbe mettere tutto in un modello, come mostrato nel seguente elenco.
3.4 Modello completo profilo
<Nome del modello = "partial">

Il modello che rappresenta la
<Div class = "left">
Posto questo div sul pagina parziali
<Img src = "{{immagine}}"> <p>
lato sinistro.
{{nome}} </ p> </ div>
Posto questo div sul

lato destro.
<Ul class = "news-stream">
<Li class = "news-item"> Ieri sono andato pesca, ragazzo questa era una favola </ li> <li class = "news-item"> Guarda, biscotti! <Img src =
"cookies.jpg"> </ li> </ ul> </ div> </ template>
Se la vostra interfaccia utente diventa più complesso, si può immaginare che il modello profilo potrebbe diventare
grande. Questo è un male per la leggibilità e la manutenibilità del codice. E 'meglio separare tutto con la propria
funzione logica in un modello dedicato e combinarli in un modello principale. In questo modo, i modelli rimanere
piccoli e sono più facili da leggere e gestire. Due sviluppatori potrebbero dividere il profilo e le notizie flusso di lavoro
e di apportare modifiche indipendenti molto più facilmente.
M Modular MODELLI
Listato 3.5 mostra il nostro primo modello, partialsSplit. Questo è il modello principale che rappresenta il sito e
contiene due modelli più piccoli. Due piccoli modelli rappresentano il profilo utente effettivo ( partialsUserProfile) e il
flusso di notizie ( partialsNewsStream). Si noti inoltre che la disposizione è contenuta nel principale partialsSplit template-
in questo caso, la semplice < div class = "left"> </ div> e < div class = "right"> </ div>.
Listato 3.5 Dividere il modello di pagina del profilo
Il modello che rappresenta la pagina

<Nome di modello = "partialsSplit">
<Div class = "left"> del profilo Il profilo utente è incluso nel
{{> PartialsUserProfile}} </ div> modello genitore come subtemplate.

{{>}} PartialsNewsStream </ div> </ template>
Il flusso di notizie è anche incluso
nel modello genitore come
subtemplate.

www.it-ebooks.info
<Nome di modello = "partialsUserProfile">

<Img src = "{{immagine}}"> <p> {{nome}}
</ p> </ template>
<Nome di modello = "partialsNewsStream">

<Ul class = "news-stream">
<Li class = "news-item"> Ieri sono andato pesca, ragazzo questa era una favola </ li> <li class = "news-item"> Guarda, biscotti! <Img src =
"cookies.jpg"> </ li> </ ul> </ template>
MANCIA Evitare di mettere informazioni sul layout in subtemplates. Lasciate che il template padre definire
l'aspetto grafico, nonché le dimensioni degli elementi che includono.
Non avendo definizioni di layout sepolti all'interno subtemplates migliora notevolmente riutilizzabilità. Perché non ci
sono definizioni di layout nel partialsUserProfile modello, è possibile riutilizzare facilmente su un altro modello di
pagina e metterlo sul lato destro in una < div class = "right"> {{> partialsUserProfile}} </ div>.
D YNAMICALLY INCLUSO MODELLI

Oltre a utilizzare testi statici per includere subtemplates, è possibile includere dinamicamente un modello in base al
valore di ritorno da un assistente (vedi 3.6). In questo modo, è possibile passare in modo reattivo modelli senza
dover mantenere il complesso se / strutture else all'interno modelli. In combinazione con fonti di dati reattivi come
una variabile di sessione, possono essere molto potenti.
3.6 subtemplates Inserimento dinamicamente aiutanti
// meteorTemplates.html <nome del modello = "">

dynamicPartials
<Div class = "left">
{{> Template Template.dynamic = templateNameLeft}} </ div>
Il nome del subtemplate
proviene da un aiutante.
{{> Template Template.dynamic = templateNameRight}} </ div> </ template>
// meteorTemplates.js
Template.dynamicPartials.helpers ({
templateNameLeft: function () {
tornare "partialsUserProfile"; },
Aiutanti restituiscono una
stringa che può essere sia
templateNameRight: function () {
dinamico o statico.
tornare "partialsNewsStream"; }});

www.it-ebooks.info
3.3.3 Etichette block

In contrasto con espressioni o parziali, che sono essenzialmente segnaposti, tag di blocco modificare il comportamento del
blocco chiuso di HTML. Iniziano con parentesi graffe matrimoniali e un #. Un tag modello di blocco campione può apparire
come segue:
L'apertura di un tag modello di blocco ha un

<Nome di modello = "MyTemplate">
nome e argomenti opzionali.
{{argomenti #NOME}}
<P> Alcuni contenuti </ p> {{/ nome}}
Il contenuto del tag
</ template>
La chiusura di un tag modello di blocco modello di blocco
deve sempre avere lo stesso nome nel
tag di apertura.
Etichette block sono utilizzati non solo per visualizzare il contenuto ma anche di avere il controllo su l'elaborazione di un
modello. È possibile definire i propri tag di blocco o di uso Spacebars:
■ # Se -Executes un blocco di contenuto se la condizione è vera o altro blocco non se

■ # salvo che -Executes un blocco se la condizione è falsa o altro blocco non se
■ # con -Imposta il contesto dati di un blocco
■ # ogni -Loops attraverso molteplici elementi
T HE IF / A MENO TAG
Uno dei tag incorporati è il # Se tag blocco. Funziona come una normale Se bloccare in JavaScript. Esso controlla una
condizione, e se si restituisce vero, il contenuto del blocco vengono elaborati, cioè, vengono sottoposti a rendering. Qualsiasi
valore che è considerato per essere vero in un contesto regolare JavaScript è anche considerato per essere vero dal # Se etichetta.
Se un comune Falsey 3 valore di JavaScript come nullo, non definito, 0, "" ( stringa vuota), oppure falso è passato a
# Se, il blocco successivo verrà reso (vedi tabella 3.1). 3.7 mostra un tag di immagine solo se c'è un aiuto di immagini
e restituisce vero.
3.7 L'utilizzo di un Se bloccare
<div class = "cookies">

<P> Guarda, più cookie! </ P> {{immagine}} # if Il tag <img> è resa se il
valore per un'immagine
<Img src = "{{immagine}}" /> {{/ if}} </ div> restituisce true.
Tabella 3.1 Valori di ingresso e la loro interpretazione da parte # Se
valore di ingresso restituisce
falso, 0 ( zero), "" (stringa vuota), nullo, indefinito, NaN, [] (array vuoto) falso
Stringhe (compresi "0"), array, oggetti (incluse vuoti) vero
3 Tutto ciò che restituisce falso è considerato Falsey, anche se il valore reale non è falso. Valori che valutano
a vero sono considerati truthy.

www.it-ebooks.info
La contropartita di un # Se tag blocco è il # salvo che tag blocco. Elabora i contenuti dei blocchi solo se la condizione
restituisce false ( consultare il seguente elenco).
3.8 L'utilizzo di un salvo che bloccare
<Nome di modello = "unlessBlock">

{{Image #unless}}
Il tag <p> è resa se
<P> Siamo spiacenti, nessuna immagine disponibile. </ P> {{/
l'immagine è falsa.
meno}} </ template>
Entrambi # Se e # salvo che può essere combinato con un altro tag al fine di rendere una cosa se la condizione è vera e
un altro se è falsa. 3.9 utilizza # Se ma funziona lo stesso con # salvo che.
3.9 Utilizzando altro in un Se bloccare
{{Immagine}} # if
Sia se o meno viene utilizzato
<Img src = "{{immagine}}" /> {{else}}
definisce se il caso vero o falso è
<P> Siamo spiacenti, nessuna immagine disponibile. </ P> {{/ if}} gestita prima. Il tag <p> è resa se
{{immagine}} restituisce un valore
Falsey.
NOTA Non c'è nessun tag {{ elseif}}. Per far fronte a più casi di vero e falso, potrete sia necessario utilizzare
strutture nidificate if-else all'interno del vostro modello o, preferibilmente, regolare il codice JavaScript in
modo che possa fare l'elaborazione al posto del modello.
Etichette block e tag di template devono sempre includere HTML valido; altrimenti Meteor verrà eseguito in un errore.
Ciò significa che si deve prendere cura che i tag che vengono aperti sono chiusi pure. Inoltre, ogni elemento che si
apre all'interno di un blocco deve essere chiuso all'interno di tale blocco. Non si può, ad esempio, includere
un'apertura < div> tag in un # Se tag blocco e vicino dopo il {{ altro}} perché questo si tradurrebbe in HTML non valido
per la tua pagina su di rendering. Se si dispone di errori nei modelli, l'applicazione va in crash e un messaggio di
errore. Figura 3.5 mostra il messaggio di errore risultante per il blocco di codice seguente:
{{#if HighlightBox}}
<Div class = "box-evidenziata"> {{else}}
Ciò non è consentito perché non è una
coppia di tag HTML valido.
<Div class = "box"> {{/ if}}
A <div> tag di chiusura senza apertura non è

<P> Benvenuto! </ P> </ div>
consentito all'interno di un modello.

www.it-ebooks.info
Figura 3.5 Uscita per HTML non valido nei modelli
E 'perfettamente a posto, però, di utilizzare un tag di blocco all'interno di un valore di attributo HTML:
<Div class = "box {{#if HighlightBox}} box-evidenziata {{/ if}}">

<P> Benvenuto! </ P> </ div>
Se Showbox è un valore truthy, la stringa scatola
è incluso nel attributo di classe.
T HE OGNI / CON LA MODIFICA
Se si desidera passare più valori a un modello, il modo più comune è quello di utilizzare un array. Quando un array
viene passato a un modello, è possibile iterare il suo contenuto utilizzando un # ogni etichetta. # ogni accetta un array
come argomento e rende il suo contenuto di blocchi per ogni elemento all'interno della matrice. In 3.10 abilità è
passato come argomento. Questo definisce la cosiddetta contesto dati del blocco. Senza un contesto dati, # ogni non
rende nulla.
3.10 Utilizzando il # ogni etichetta
// file HTML
<Nome di modello = "eachBlock">
Il tag blocco #each prende un
<Ul>
array come parametro.
{{competenze #each}}
<Li> {{questo}} </ li> {{/ ogni}} </ ul> </
template>
È possibile accedere
all'oggetto corrente della
matrice con Questo.
file di // JavaScript
Template.eachBlock.helpers ({
competenze: function () {
ritornare [ 'Meteor', 'Vela', 'Cucinare']; }});

www.it-ebooks.info
Mentre # ogni richiede il modello di avere un contesto dati, # con consente di definire un contesto dati. Il contesto dei
dati è l'associazione reale tra un modello e tutti i dati.
Impostazione del contesto dati utilizzando il # con tag richiede un singolo attributo che diventerà il contesto dati
per il seguente blocco. 3.11 mostra un esempio in cui il contesto dati per il modello withBlock è esplicitamente
impostato su profileJim.
3.11 Utilizzando il # con etichetta
// meteorTemplates.html <template name =

"withBlock">
<Ul>
{{#Con profileJim}}
L'oggetto profileJim è
<P> {{nome}} </ p>
definito come il contesto
{{competenze #each}} dati.
<Li> {{questo}} </ li> {{/ ogni}} {{/
con}} </ ul> </ template>
// meteorTemplates.js Template.withBlock.helpers ({
profileJim: function () {
var jim = {
Nome: 'Jim "Sailor Ripley" Johnson', competenze: [ 'Meteor', 'Vela',
'Cucinare'],};
tornare jim; }});
Non c'è alcun bisogno di specificare esplicitamente un contesto dati; utilizzando un aiutante fornisce
automaticamente un contesto. Alcuni casi di utilizzo più avanzati richiedono di farlo. Vedremo quando si parla di fonti
di dati reattivi nel prossimo capitolo.
Tecnicamente, tutti i tag di blocco incorporati sono aiutanti. Diamo uno sguardo a come è possibile creare i propri
aiutanti modello.
3.3.4 Helpers
Quando si tratta di modelli, si possono spesso trovare necessario applicare di nuovo la stessa funzionalità, come ad
esempio secondi di formattazione nel HH: strutture di controllo ss o che si applicano: mm. Questo è quando sono
necessari aiutanti.
Helpers sono funzioni JavaScript in grado di eseguire qualsiasi tipo di lavorazione. Essi possono essere limitate
ad un singolo modello o essere messi a disposizione a livello globale. aiutanti modello globale possono essere
riutilizzati in tutti i modelli disponibili, ed è buona pratica di definire in un file JavaScript dedicato anziché i file JS
singolo modello.
L OCAL AIUTANTI MODELLO

Un aiutante modello locale viene utilizzato per estendere un solo modello specifico. Non può essere condiviso tra altri
modelli ed esiste solo nello spazio dei nomi di un modello. Nella loro forma più semplice, aiutanti di modelli locali
sono simili a espressioni.

www.it-ebooks.info
Ogni Modello oggetto ha una aiutanti

funzione, che prende un oggetto che può contenere più
oggetti valore-chiave. In genere la chiave rappresenta il
nome segnaposto che può essere utilizzato all'interno di un
modello, mentre il valore è una funzione che restituisce
qualcosa. valore di ritorno della funzione non deve essere
una stringa, ma può essere qualsiasi valore statico come un
numero, una matrice, un oggetto, o anche una funzione che Figura 3.6 Codice ottenuto da aiutanti locali
restituisce un altro valore.
Per semplificare le cose, abbiamo dimostrato sia il contenuto del file HTML e il file JavaScript in 3.12. Alcuni
degli aiutanti restituire solo un valore statico ( nome);
altri restituiscono un array ( abilità), un oggetto ( Immagine), e anche una funzione ( hasMoreSkills). Il codice HTML
rendering si può vedere in figura 3.6.
3.12 Un modello di profilo utilizzando diversi aiutanti locali
Accede il nome di supporto locale che è la

stringa semplice 'Jim'
localHelpers
<P> {{nome}} </ p> {{immagine}} # if
È possibile accedere ai valori degli oggetti
L'immagine
<Img src = "{{}} image.thumb"> {{/ if}} come si farebbe in normale JavaScript
di un oggetto
usando la notazione punto.
e quindi una
{{#if competenze}}
valore
truthy; il <P> Abilità Primaria: {. {Competenze [0]}} </ p> {{#if competenze
Se l'array è vuoto, non renderebbe il
blocco di hasMoreSkills}}
contenuto del blocco.
contenuto <a href="/skills"> vedere di più ... </a> {{/ if}} {{/ if}} </ template>
viene reso.
Competenze è un array ed è possibile accedere ad

un indice speciale con via array. [Index].
// meteorTemplates.js Template.localHelpers.helpers ({
Il contenuto del blocco #if è resa se il valore restituito
Nome: 'Jim', immagine: dei hasMoreSkills funzione di supporto restituisce
{ true. In questo caso hasMoreSkills ha l'aiutante

competenze come parametro.
grande: '/jim-profile-large.jpg', pollice: '/jim-profile-thumb.jpg'},
competenze: [ 'Meteor', 'Vela', 'Cucinare'], hasMoreSkills: function ()

{competenze Restituisce vero se viene passato il
restituire competenze && skills.length> 1; }}); parametro competenze e ha più di una
sola abilità
Per passare parametri a una funzione di supporto, è sufficiente scrivere i parametri che si desidera passare, dopo la
funzione di supporto (separati da uno spazio bianco). L'ordine in cui si passa i parametri sarà la stessa come definito
nella funzione stessa.

www.it-ebooks.info
Dai un'occhiata alle 3.12 di nuovo. L'helper built-in # Se valuta la seguente espressione per determinare se sia
vero o falso:
{{competenze hasMoreSkills #if}}
In questo caso si verifica hasMoreSkills, che è una funzione che si richiede un valore di ingresso. Pertanto, invece di
comportamento normale utilizzo Se seguita da una sola espressione, viene fatto passare un secondo segnaposto: abilità.
Il contenuto del abilità oggetto viene passato alla funzione rappresentata da hasMoreSkills. Se una persona ha più
abilità che sarà tornare vero, così il Se condizione passa.
sol GLOBALE AIUTANTI
Spesso si ha un po 'di aiuto di cui avete bisogno in più di un solo modello, ma si vuole scrivere una sola volta.
Diciamo che si desidera creare un aiutante che restituisce vero Se un array ha più di n elementi. Chiamiamo questo
helper gt ( come in superiore). Questo aiuto deve essere utilizzato in più modelli, in modo da creare un file
globalHelpers.js e mettere il codice di supporto in là. Ricordarsi di avvolgerlo in un if (Meteor.isClient) {...}
bloccare perché aiutanti, proprio come i modelli-sono disponibili solo in ambito client.
Si desidera che il nuovo aiutante di essere disponibile in tutti i modelli, quindi non è possibile utilizzare Modello
. <TemplateName> definirlo. Invece, utilizzare Template.registerHelper; il seguente elenco mostra come aiutanti locali
e globali sono combinati.
3.13 Utilizzo di aiutanti globali per determinare la lunghezza dell'array

competenze contiene tre elementi così che
globalHelpers
l'assistente gt globale restituisce true.
{{competenze gt #if 1}}
<a href="/skills"> vedere di più ... </a> {{/ if}}
Immagini contiene solo due elementi; l'helper

{{#if immagini gt 4}}
gt globale restituisce false.
<a href="/images"> vedere di più ... </a> {{/ if}} </ template>
aiutanti locali per il modello
globalHelpers
Template.globalHelpers.helpers ({
competenze: function () {
ritornare [ 'Meteor', 'Vela', 'Cucinare']; },
immagini: function () {
ritornare [ '/jim-profile-large.jpg', '/jim-profile-thumb.jpg']; }});
Utilizzando la funzione
// globalHelpers.js se (Meteor.isClient) { registerHelper è possibile creare

aiutanti che sono disponibili per
tutti i modelli.
Template.registerHelper ( 'gt', funzione (array, n) {
ritorno matrice && array.length> n; }); }

www.it-ebooks.info
C Ustom BLOCK AIUTANTI

Anche globalmente disponibile e molto utili sono aiutanti blocco personalizzato. Essi consentono di creare componenti dell'interfaccia
utente riutilizzabili o widget. Si noti che le aiutanti effettivi potrebbero essere utilizzate anche senza JavaScript.
Supponiamo che si definisce un nuovo blocco aiutante di nome # sidebarWidget; è inoltre necessario definire un
modello con lo stesso nome. Il modello verrà iniettato in cui l'assistente blocco viene richiamato. All'interno del
modello che si utilizza la sintassi parziali di includere l'output di Template.contentBlock. È inoltre possibile accedere a
tutti gli altri elementi del contesto dati che può essere passato al aiutante blocco. Questo esempio produrrà un widget
barra laterale con un titolo e alcuni contenuti.
Quando # sidebarWidget viene chiamato dall'interno di un modello, che pone i propri contenuti tra il {{# sidebarWidget}}
e {{/ sidebarWidget}} tag di compreso Template.contentBlock. 3.14 mostra come sidebarWidget può essere utilizzato
per avvolgere il contenuto del blocco in qualsiasi modello. Il fatto che è riutilizzabile lo rende ideale per la costruzione
di componenti dell'interfaccia utente o widget.
L'aggiunta di {{> coderOfTheMonth}} al corpo di una domanda crea l'output mostrato in figura 3.7.
3.14 personalizzati aiutanti di blocco con Template.contentBlock
<Nome di modello = "coderOfTheMonth">

{{# Title sidebarWidget = "Coder del mese"}}
Manuel {{/ sidebarWidget}} </
contesto dei dati può
template>
essere impostato per
Questo è il aiutanti blocco
contenuto personalizzato pure.
<Nome di modello = "sidebarWidget">
che viene
<Div class = "sidebar-widget di box">
visualizzato.
<Div class = "title"> {{this.title}} </ div> <div class = "content">
{{>}} Template.contentBlock </ div> </ div> </ template>
Figura 3.7 componenti dell'interfaccia utente
riutilizzabili o widget possono avvolgere qualsiasi
contenuto utilizzando aiutanti blocco personalizzato.

www.it-ebooks.info
oltre al Template.contentBlock c'è un Template.elseBlock ( vedi 3.15), che si riferisce al blocco di contenuto dopo un {{ altro}}
tag modello. In questo modo, è possibile migliorare aiutanti blocco con semplici strutture di controllo.
3.15 Utilizzando Template.elseBlock
// meteorTemplates.html
<Nome di modello = "templateElseBlock"> blocco personalizzato di supporto chiamata isFemale,
a cui passiamo la variabile di genere che deriva dal
{{#isFemale genere}}
modello helper
La signora
{{else}}
Sig.
Il blocco aiutante isFemale ha anche una funzione di
{{/ IsFemale}} </
supporto, eq, che prende due argomenti e controlla se sono
template>
entrambi uguali. Questo riferisce al parametro genere in
<Nome di modello = "isFemale"> questo caso.
{{#if eq questo 'w'}}

{{> Template.contentBlock}} {{else}}
Se il sesso è 'w' allora l'istruzione #if è
truthy e la contentBlock dovrebbe
{{> Template.elseBlock}} {{/ if}} </ template>
essere reso.
In caso contrario, l'elseBlock dovrebbe

// meteorTemplates.js essere reso. Perché il sesso è 'm' l'elseBlock
Template.templateElseBlock.helpers ({ sarebbe resa.
genere: function () {
ritorno 'm'; }});
Il blocco aiutante isFemale ha anche una funzione di

supporto, eq, che prende due argomenti e controlla se sono
entrambi uguali. Questo riferisce al parametro genere in
Template.isFemale.helpers ({
questo caso.
eq: function (a, b) {
restituire un === b; }});
M Oving LOGIC IN AIUTANTI

Utilizzando aiutanti per restituire un valore che deve essere resa è generalmente il modo migliore per visualizzare
dinamicamente i contenuti. Esiste il meno logica all'interno di un modello, più è facile per risolvere e estendere
un'applicazione.
Se non si richiede il codice HTML diverso per diversi casi, è meglio definire un aiutante che calcola il contenuto
corretto da visualizzare. In questo modo, si può evitare di utilizzare # Se e # salvo che nei modelli. 3.16 utilizza un
modello, logicByHelper, che visualizza il saluto corretta sulla base di un valore di genere singolo carattere che
possono essere memorizzati in un database. Tutta l'elaborazione avviene la funzione di supporto, non al modello
stesso.
3.16 logica modello Spostamento in un aiutante JavaScript
// meteorTemplates.html <nome di modello =

"logicByHelper"> Nel tag a doppia staffa, chiamiamo la funzione
{{GenderLabel genere}} </ template>

genderLabel aiuto e passare il parametro di
genere.

www.it-ebooks.info
Template.logicByHelper.helpers ({
genere: 'm',
genderLabel: function (genere) {
La funzione di supporto
if (genere === 'm') {
genderLabel restituisce “Mr.” in
tornare 'signor'; } altro {
questo caso, a causa di genere ha il
valore 'm'.
tornare 'signora'; }}});
Come si può vedere, è possibile definire un sacco di diversi aiutanti per un modello che può essere valori statici o anche
funzioni che restituiscono un valore calcolato.
Hai imparato come utilizzare Spacebars per creare ed estendere i modelli in modo che sia facile da generare un
certo HTML alla fine. Ora che sapete come creare il codice HTML di un'applicazione, cerchiamo di permettere
all'utente di interagire con il codice HTML rendering utilizzando gli eventi.
3.4 Gestione degli eventi

Una delle principali differenze tra un sito statico e un'applicazione è che le applicazioni consentono l'interazione dell'utente.
Hanno bisogno di gestire gli eventi come i clic del pulsante e reagire ad essi. La risposta la maggior parte del tempo è
fondamentalmente la modifica del DOM, al fine di mostrare agli utenti qualcosa che è utile per loro. Per raggiungere questo
obiettivo, ci deve essere un modo per fare due cose:
■ Definire gli eventi l'applicazione ascolta

■ Definire le azioni che vengono attivati da un evento
Meteor utilizza mappe di eventi per definire gli eventi e le loro azioni. eventi DOM vengono utilizzati in combinazione con
selettori CSS per specificare quali elementi e quali eventi dovrebbero essere guardati. Anche se è possibile utilizzare ogni
caso DOM per una mappa degli eventi, il loro comportamento potrebbe differire tra i vari browser, ma gli eventi nella tabella
3.2 dovrebbe comportarsi la stessa in tutti i principali browser.
tipi di evento Tabella 3.2 che funzionano allo stesso modo in tutti i principali browser
Tipo di evento Uso
clic Clic del mouse su qualsiasi elemento, compresi i collegamenti, pulsanti, o div S.
DblClick Fa doppio clic con il mouse.
messa a fuoco, sfocatura immissione di testo o di altri campi di controllo forma che guadagnare o perdere la concentrazione. Qualsiasi
elemento con un tabindex proprietà è considerata attivabile.
modificare Le caselle di controllo o pulsanti di opzione che cambiano stato.
MouseEnter, mouseLeave Entrata o in uscita un elemento con il puntatore del mouse.

www.it-ebooks.info
Gestione degli eventi 69
tipi di evento Tabella 3.2 che funzionano allo stesso modo in tutti i principali browser ( continua)
Tipo di evento Uso
Premendo e rilasciando il pulsante del mouse.
keydown, pressione di un tasto, keyup Premendo e rilasciando tasti sulla tastiera; keydown e keyup
sono per lo più utilizzati per i tasti di modifica come ad esempio Shift.
3.4.1 mappe eventi Template

Ogni modello ha la sua carta evento. E 'definita all'interno di un file JavaScript simile al seguente elenco.
3.17 map Event per disposizione modello
Ogni modello ha una funzione di eventi

che prende la mappa oggetto evento Il valore dell'oggetto è una
if (Meteor.isClient) { come parametro. funzione che è chiamato nel
Template.layout.events ({ caso in cui il pulsante viene

La chiave premuto. Questo gestore di
'Fare clic sul pulsante': la funzione (evento, template) {
dell'oggetto eventi prende l'oggetto evento
$ ( 'Body') css ( 'background-color', 'rosso').; },
definisce quale stesso come primo parametro e
evento deve l'istanza di modello come
'MouseEnter #redButton': la funzione (evento, template) {
essere attivato secondo parametro.
// avviare l'animazione di fantasia}}); }
sulla quale
elemento. Spostando il cursore del mouse sopra
l'elemento con ID RedButton
MouseDown, MouseUp potrebbe iniziare un'animazione.
Meteor utilizza jQuery per chiamare l'attuale funzioni di gestione degli eventi. In questo esempio, se l'utente clicca un pulsante
all'interno disposizione modello, il gestore di eventi corrispondente è chiamato e il colore del corpo di fondo è impostato su rosso.
Facendo clic su un pulsante al di fuori della disposizione modello non sarebbe innescare un'azione perché la mappa evento
associato è rilevante solo per qualsiasi cosa all'interno della disposizione modello. Ma cosa succede se si usa un modello di
bambino e inviare un evento ad esso? Modificare il codice in base alla quotazione 3.18 e fare clic su uno dei pulsanti per
vedere.
Listing 3.18 ascolto per gli eventi in un subtemplate
// meteorEvents.html <body>
{{Layout>}} </ body>
<Nome di modello = "layout">

Facendo clic sul pulsante renderebbe colore
<Button> Ruotare il pulsante </> rosso {{>
di sfondo dell'elemento corpo rosso perché
green}} </ template>
l'evento sarebbe anche chiamare il gestore del
modello di layout dopo il gestore verde è stato
<Nome di modello = "green"> eseguito.
<Button id = "green"> diventa verde </ button> </ template>

www.it-ebooks.info
// meteorEvents.js Template.layout.events ({

$ ( 'Body') css ( 'background-color', 'rosso').; }});
Template.green.events ({
$ ( 'Body') css ( 'background-color', 'verde').; }});
Anche se abbiamo due mappe di eventi distinti e due pulsanti, ogni clic su un pulsante nel codice aggiornato si
accende lo sfondo rosso, anche cliccando sul tasto verde turno. Perché?
3.4.2 propagazione degli eventi
Il fenomeno si può vedere al lavoro qui si chiama propagazione degli eventi, o spumeggiante evento.
Ciò significa che ogni evento viene dapprima trasformata in cui si verifica e quindi fatta passare verso l'alto nella struttura
DOM. Ci può innescare un'altra azione.
In uno scenario migliore dei casi, si sarebbe abilmente usare questo come concatenamento; nel peggiore dei casi, che questo
esempio mostra e avrete modo finiscono per sovrascrivere l'azione si voleva prendere posto con un altro.
NOTA propagazione degli eventi può avere effetti collaterali imprevisti quando si lavora con le mappe di eventi.
Ricordarsi di fermarlo; altrimenti, sarà bolla l'albero DOM.
Come si può vedere nella figura 3.8, ci sono tre istanze di modello: la corpo, un disposizione
modello e un verde modello. Se l'utente fa clic < Pulsante> verde </ pulsante Girare> il listener di eventi del verde modello
si chiama, perché ascolta i click sui pulsanti all'interno del suo ambito di applicazione del modello. La prima azione
che avviene imposta la colore di sfondo
attributo corpo a verde. Ma la propagazione degli eventi non è ancora finito.
corpo
Evento: nessun ascoltatore de fi nita
Azione: nessuna azione de fi nito
nome del modello = "layout"

Propagare evento up
Evento: clic Azione 2.: sfondo

Azione: set background-color = red rosso
nome del modello = "verde"

Propagare evento up
Evento: clic 1. Azione: sfondo verde

Azione: set background-color = verde
Figura sequenza 3.8 Azione per un clic nella verde modello

www.it-ebooks.info
Gestione degli eventi 71
L'evento è trasmesso verso l'alto per la disposizione modello, che agisce anche su eventi click. Si chiama proprio
gestore di eventi. Ora una seconda azione si svolge, che imposta il colore di sfondo attribuire al rosso.
Tecnicamente il colore di sfondo era verde per un breve momento nel tempo, ma solo fino a quando ha preso
l'evento per propagare in su. Pertanto, il gestore di eventi del verde
modello non ha alcun effetto visibile.
Infine, l'evento viene passato al corpo elemento, e se fosse una mappa degli eventi definita, potrebbe anche scatenare
una terza azione.
Se non si desidera un evento per essere gestito da più modelli che è possibile e necessario, sempre fermare la
propagazione degli eventi. Inserisci stopImmediatePropagation () alla mappa evento del modello per prevenire eventi
dal ribolle DOM. Fissare la mappa evento per il verde template aggiornando il codice per il seguente elenco.
Listing 3.19 Arresto propagazione degli eventi all'interno di una mappa degli eventi
Template.green.events ({
Event.stopImmediatePropagation (); $ ( 'Body') css ( 'background-color', 'verde').;
Questo interrompe l'evento dalla
}});
zampillante DOM.
Ora fare clic sul pulsante diventa il colore di sfondo verde, indipendentemente dal fatto che disposizione modello
ascolta anche per i clic sui pulsanti. Se si vuole avere ancora più controllo sulla gestione degli eventi, è anche
possibile chiamare evt.stopPropagation (). In questo modo non impedisce altri gestori di eventi venga eseguito, ma se
preferite potete chiamare
evt.isPropagationStopped () per verificare se stopPropagation () è stato chiamato da qualche parte nella catena di
eventi. Utilizzando questa tecnica, è possibile aggiungere un gestore di eventi per il corpo e reagire all'evento click
nella verde template così come nel corpo, ma non innescare la disposizione gestore di eventi.
3.4.3 Prevenire il comportamento di default del browser
Qualcosa che si desidera anche per prevenire in molte circostanze è la gestione degli eventi di default del browser. Ad
esempio, se si fa clic su un collegamento normale (< a href = "URL"> Vai a </a>),
il browser dovrebbe aprire l'URL specificato nel < a> elementi href attribuire e ricaricare la pagina. Naturalmente, in
un'applicazione si costruisce con Meteor non si desidera che il browser per ricaricare la pagina in qualsiasi momento.
Per evitare questo, è possibile chiamare event.preventDefault () ( vedi elenco 3.20) e il comportamento di default del
browser viene impedito.
Listing 3.20 Prevenire comportamento predefinito del browser
Template.layout.events ({
'Fare clic su un': funzione (evento, template) { Impedisce al browser di eseguire il
event.preventDefault (); console.log ( 'Si prega di non lasciare ancora'); }}); predefinito azione-vale a dire,
seguendo il link

www.it-ebooks.info
Prima di passare a vedere come integrare i dati in un modello, l'ultimo argomento che dobbiamo coprire è il ciclo di vita
del modello.
3.5 Il ciclo di vita del modello

Mettere un modello all'interno del DOM e rendendolo visibile per l'utente è solo una parte del suo ciclo di vita. Ogni
modello passa attraverso tre fasi (figura 3.9) al fine di ottenere rese nel browser. Ogni fase ha un callback associata,
che è utile per aggiungere comportamento personalizzato.
onCreated richiama onRendered richiama onDestroyed richiama
Creato Resi Distrutto
• esempio Template • esempio Template • Non istanza modello più

accessibile
accessibile accessibile
• Template non visibile • Template visibile all'interno del • Template non visibile più
browser
Figura 3.9 Il ciclo di vita template
Il primo passo quando si inserisce un modello nel DOM è chiamato creato. Anche se il modello attuale non è ancora
visibile, l'istanza di modello è già accessibile. Il callback associato onCreated è particolarmente utile se si desidera
creare inizialmente alcune proprietà per l'istanza modello prima che sia reso e visibile per l'utente. Tutte le proprietà
impostate nel onCreated callback sono disponibili nelle altre callback del ciclo di vita pure. Si può anche utilizzare per
le aiutanti e gestori di eventi. Per accedere a un esempio modello da un gestore aiuto o di un evento, utilizzare Modello
. esempio().
NOTA Come si è visto nel capitolo 2, l'ambito di jQuery può essere limitata all'istanza modello corrente e le
sue subtemplates utilizzando modello. $ () o template.find ().
Il secondo stato per un modello si chiama reso. l'associato onRendered callback viene utilizzato per avviare gli oggetti
che si trovano all'interno del DOM già. Esempi tipici sono jQuery plug-in come datepickers, calendari o datetables.
Essi richiedono un elemento DOM reso, quindi sono iniziati nel onRendered callback come mostrato nel Listato 3.21.
Qui estendiamo tutti gli elementi all'interno del Modellomaschera che hanno una. dateinput classe con un datepicker. 4
4 Per utilizzare in realtà un datepicker, è inoltre necessario aggiungere le librerie DatePicker necessari al progetto.

www.it-ebooks.info
Il ciclo di vita del modello 73
Listato 3.21 Inizializzazione un jQuery plug-in per creare un datepicker su un elemento di input
Template.formTemplate.onRendered (function () {
TemplateInstance. $ ( 'dateinput'). datepicker ({

// opzioni aggiuntive }); });
Il terzo callback, onDestroyed, viene utilizzato per ripulire tutto ciò che si imposta durante la vita di un modello. Dopo
esegue, l'istanza modello è più né visibile né accessibile.
Tutti e tre i callback sono solo eseguiti una sola volta e non si ripeteranno, anche se i dati nella pagina web cambia.
Consideriamo un semplice scenario con una sola espressione segnaposto:
<Body>
{{> Profilo}} </ body>
È possibile utilizzare i commenti

<Nome di modello = "profilo">
modelli all'interno di questo tipo.
{{- a dimostrazione del ciclo di vita -}} <p> {{segnaposto}} </ p> <tasto> Tasto </
button> </ template>
Listato 3.22 aggiunge un richiamo esplicito ad ogni fase del ciclo di vita di un modello. Quando il
profilo si crea modello, si allega una proprietà lastCallback all'oggetto modello, impostato su creato, e stampare
l'oggetto nella console JavaScript. Questo è anche il posto dove si poteva già letto il contesto dati di un modello.
Dentro il
onRendered richiamata, si cambia il valore per lastCallback a reso. utilizzando
Template.instance (), l'assistente può leggere il valore per lastCallback e il pulsante di scatto è in grado di aggiornare il suo
valore. Il onDestroyed richiamata non può essere osservato all'interno della console del browser. Tutti i messaggi della console
sono mostrate nella figura 3.10.
Listing 3.22 Il modello callback del ciclo di vita
Template.profile.onCreated (function () {
this.lastCallback = 'creato'; console.log ( 'profile.created', this); });
Stampa l'istanza del modello di profilo. È

Template.profile.onRendered (function () { possibile impostare le variabili per l'istanza
this.lastCallback = 'reso'; console.log ( 'profile.rendered', this); }); di modello come this.foo = 'bar' che si
potrebbe utilizzare in seguito. È inoltre
possibile leggere il contesto dati, ma non è
Template.profile.onDestroyed (function () { possibile impostare qui.
this.lastCallback = 'distrutto'; console.log ( 'profile.destroyed', this); });

www.it-ebooks.info
Template.profile.helpers ({
segnaposto: function () {
console.log ( 'profile.placeholder', this); console.log ( 'profile.tplInstance',
È comunque Template.instance () lastCallback).; Stampe fuori solo il

possibile ritorno 'Questo è il segnaposto {{}} aiutante'; }}); contesto dati. Non
accedere hai accesso
all'istanza all'istanza modello
modello in Template.profile.events ({ via Questo.
aiutanti template e 'Fare clic sul pulsante': la funzione (evento, template) {
eventi. . Template.instance () lastCallback = 'resa e cliccato'; console.log ( 'profile.clicked', this); console.log (
'profile.clicked.tplInstance', modello); }});
Nei gestori di eventi che non è necessario

Template.instance () perché l'istanza modello è
passato come secondo parametro direttamente.
Figura 3.10 messaggi Console per le richiamate template
3.6 Sommario
■ Meteor utilizza la propria libreria di interfaccia utente reattiva chiamato Blaze.
■ Spacebars è il linguaggio di template di default di Meteor ed è una variante estesa di manubrio.
■ Spacebars usa espressioni, parziali, blocchi e aiutanti per creare modelli piccoli e modulari.

www.it-ebooks.info
Sommario 75
■ Helper possono essere limitate a un singolo modello o globalmente disponibile.
■ mappe eventi vengono utilizzati per associare azioni agli eventi ed elementi.
■ Ogni modello passa attraverso tre fasi-creare, rendere, e distruggere, al fine di ottenere rese nel browser.
Ogni fase ha un callback associata, che è utile per aggiungere comportamento personalizzato.

www.it-ebooks.info
Utilizzo dei dati

■ fonti di dati di default del Meteor
■ I principi di dati reattivi e calcoli
■ Il Sessione oggetto
■ Lavorare con un database MongoDB usando
Collezione S
■ operazioni CRUD
Come si è visto nel capitolo 1, Meteor non si basa su un'architettura tradizionale, server concentrato. Si esegue il
codice ed elabora i dati su ogni client. Per fare ciò, utilizza un mini-database per simulare l'API di una vera e propria
banca dati all'interno del browser. Ciò significa che è possibile accedere ai dati nello stesso modo,
indipendentemente dal fatto che si sta facendo una ricerca nel database o accedere ai risultati di una query sul
browser.
Tutti i dati che è disponibile solo in un singolo client saranno ovviamente persi una volta che il client si disconnette e
non ha inviato i suoi aggiornamenti di nuovo ad un server centrale. Meteor si prenderà cura di persistenza automaticamente
i dati sincronizzando client e il server di stato.
Alcune informazioni sono pertinenti solo per un singolo client, come ad esempio informazioni di stato, che le schede
sono state cliccato, o che il valore è stato selezionato da un elenco a discesa.
76

www.it-ebooks.info
Utilizzo dei dati 77
Sessione viene utilizzata per memorizzare lo stato

dell'applicazione attuale solo il client.
oggetto
App client
Session
sottoscrizioni
Banca dati MiniDB
Pubblicazioni
Server App
la Le collezioni sono utilizzati per lo scambio la

di dati tra server e client.
memorizzazione dei dati Persistent memorizzazione dei dati Volatile
Figura 4.1 Database ovunque significa dati persistenti sui dati del server, ma volatili sul client.
Le informazioni che è rilevante solo per una sessione utente in corso non ha bisogno di essere memorizzati sul server
centrale e non viene sincronizzato. Figura 4.1 mostra l'architettura generale. Alla fine di questo capitolo, sarete in
grado di utilizzare Collezione s per i dati dei database all'interno e Sessione s per le informazioni solo client.
Al suo interno, ogni applicazione web cattura, negozi, ed elabora dati. La creazione, la lettura, l'aggiornamento e
la cancellazione dei dati, spesso definito come CRUD, è il fondamento su cui avanzata funzionalità può essere
costruito. CRUD di per sé è solo le funzionalità di base, però. Quando due utenti leggono lo stesso documento dal
database e uno di loro esegue un aggiornamento, vogliamo che questo aggiornamento da pubblicare per l'altro client
immediatamente. Almeno dovremmo dire il secondo utente che il documento è cambiato da quando ha prima accede
esso. Nella maggior parte delle lingue e dei quadri, è necessario impostare manualmente un processo di
sincronizzazione che assicura tutti i clienti a lavorare con i dati freschi. Meteor si occupa di gestire il flusso di dati
correttamente mediante reattività.
Questo capitolo presenta i componenti chiave di reattività e di come sfruttare per operazioni CRUD a Meteor.
Per illustrare i principi, ci rivolgiamo un problema realworld in un'applicazione: immaginiamo si parte per un viaggio e
chiedere ad un amico di prendersi cura delle vostre piante e lasciarlo con una nota per innaffiare i fiori rossi una volta
alla settimana. Stiamo costruendo un'applicazione house-sitter.
Quando hai finito questo capitolo, sarete familiarità con le più importanti fonti di dati in Meteor. Potrai anche
essere in grado di lavorare con entrambi i dati volatili e persistenti, significa che è possibile memorizzare e
recuperare i dati da un database e di eseguire piena CRUD

www.it-ebooks.info
78 CAPITOLO 4 Utilizzo dei dati
Housesitter: diventare un amico migliore usando Meteor
ri
are i fio
di innaffi
Si prega
al la
a volta
rossi un
a
settiman
Grazie,
Manuel
Quando Manuel va in vacanza, chiede al suo amico Stephan per innaffiare i fiori rossi una volta alla settimana. Ha lasciato le sue istruzioni su
una nota adesiva che richiede una semplice azione: innaffiare i fiori. Quando deve essere eseguita questa azione? Quando una settimana è
passata. Anche se questo sembra un compito semplice, dovremmo creare un'applicazione che ci aiuta a tenere traccia di quando e quali
impianti abbiamo bisogno di acqua. Per soddisfare la richiesta di Manuel, ogni buon amico dovrà fattore di due fonti di dati: i fiori e un
calendario. Quest'ultimo non è esplicitamente menzionato, ma gioca un ruolo importante nel determinare se un'azione deve essere eseguita
sui fiori. Come con la maggior parte delle situazioni nel mondo reale, queste istruzioni omettono alcuni dettagli. Per cominciare, non
definiscono quando la settimana inizia o anche quanta acqua da utilizzare. Naturalmente, un vero amico fornirà il contesto mancante. Per
determinare se per innaffiare i fiori, Stephan si basa sul suo calendario. Un calendario è solo una fonte di dati regolare in sé, ma l'aggiunta di
una dipendenza per innaffiare i fiori ogni settimana si trasforma in una fonte di dati reattiva. Mentre Manuel è andato, Stephan sta andando a
guardare il suo calendario di ogni giorno, e se si tratta di un Lunedi, andrà al di innaffiare i fiori rossi. Per reagire ai dati modificati, Stephan ha
creato una dipendenza mentale. L'evento “Lunedi” è legata ad un azione “innaffiare i fiori.” e se è un Lunedi, andrà al di innaffiare i fiori rossi.
Per reagire ai dati modificati, Stephan ha creato una dipendenza mentale. L'evento “Lunedi” è legata ad un azione “innaffiare i fiori.” e se è un
Lunedi, andrà al di innaffiare i fiori rossi. Per reagire ai dati modificati, Stephan ha creato una dipendenza mentale. L'evento “Lunedi” è legata
ad un azione “innaffiare i fiori.”
Anche se non c'è spazio per gli errori, è molto più conveniente se Stephan è in grado di fare alcune ipotesi
ragionevoli. Ciò consentirebbe Manuel usare una nota adesiva, piuttosto che dover scrivere un 1.000-saggio di
parola su cosa fare mentre lui è andato. Meteor collega anche le fonti e le azioni di dati e fornisce un
comportamento out-of-the-box che consente agli sviluppatori di lavorare con i dati reattivi.
operazioni. Discuteremo anche come implementare i dati a due vie di legame con approccio reattivo del Meteor per mezzo
di un cosiddetto oggetto di modifica.
Stiamo per implementare la funzionalità in un'applicazione facendo uso di due pacchetti standard in Meteor: autopublish
e insicuro. Come suggeriscono i nomi, questi pacchetti rendere lo sviluppo più facile prendersi cura di dati di publishing
automaticamente tra tutti i clienti e dandoci una maggiore libertà durante il processo di sviluppo rinunciando sicurezza
rigorosa. In questo modo, siamo in grado di concentrarsi completamente su come aggiungere funzionalità senza dover
continuamente refactoring le impostazioni di sicurezza. Alla fine, quando arriviamo al capitolo 7, vedremo come
rimuovere loro di preparare un programma per la distribuzione.

www.it-ebooks.info
fonti di dati di default del Meteor 79
4.1 fonti di dati di default del Meteor

Nelle applicazioni Web, in genere si tratta con due tipi di dati che sono ciascuno associato ad un tipo specifico di
origine dati:
■ dati volatili, o memoria a breve termine (ad esempio, RAM)

■ dati persistenti, o la memoria a lungo termine (ad esempio, file e database)
dati volatili o di breve durata è usato per trattare con cose come l'accesso dell'utente attualmente loggedin. Non c'è alcun motivo di
mettere questi dati in un database e condividerla attraverso tutti i clienti, quindi è in genere disponibile solo nel caso client in cui la
sessione si svolge. Una volta che una finestra del browser viene chiuso, tutti i dati volatili è in genere più, a meno che non è
memorizzato nella forma di un biscotto o di archiviazione locale del browser. Ma un utente potrebbe aver configurato il proprio
browser per eliminare quelli su uscire, quindi non è lecito ritenere i dati memorizzati all'interno è ancora disponibile la prossima
volta che un utente visita un sito.
dati permanenti è tutto ciò che è in realtà memorizzati da un'applicazione. Questo può includere articoli di blog,
commenti, profili utente, o prodotti in un negozio web. fonti di dati persistenti sono disponibili per alcuni o tutti gli utenti di
un'applicazione web. il comportamento predefinito di Meteor è di condividere tutte le fonti di dati persistenti in tutti i client
connessi. Questo è grande durante le prime fasi di sviluppo, ma non se la quantità di dati cresce in centinaia o addirittura
migliaia di set di dati. Trasferimento di tutto per i clienti indipendentemente dal fatto che tu abbia mai vedere i dati può essere
evitato utilizzando pubblicazioni personalizzate che definiscono chiaramente quali dati viene trasferito. Essi possono anche
aiutare con l'aggiunta di uno strato di sicurezza al fine di evitare l'invio di dati sensibili che dovrebbero essere disponibili solo
per alcuni utenti a tutti i client connessi. Ancora una volta, questo è un argomento che imparerete a conoscere nel capitolo 6.
Meteor è stato progettato per lavorare bene con i database NoSQL e quindi non utilizzare le tabelle (come MySQL o
Oracle fare), ma invece memorizza i dati come documenti. Le raccolte sono paragonabili a tabelle del database e
possono contenere uno o più documenti. Più avanti in questo capitolo parleremo di più su basi di dati.
NOTA Per impostazione predefinita, Meteor pubblica tutti i dati da un database a tutti i clienti a meno che il autopublish
pacchetto viene rimosso. Lo faremo nel capitolo 6, quando copriamo pubblicazioni.
Indipendentemente dal fatto che sono abituati a memorizzare i dati volatili o persistenti, tutte le fonti di dati incorporati in
Meteor sono reattivi per impostazione predefinita. Tabella 4.1 fornisce una panoramica delle fonti di dati più comuni e che
cosa sono usate per. Diamo un'occhiata più da vicino per capire che cosa li rende diversi da fonti di dati non reattivi.
Tabella 4.1 più comuni fonti di dati e il loro utilizzo tipico
Fonte di dati uso tipico genere
Le variabili di sessione che utilizzano il Sessione Selezioni o passo corrente in azioni più passaggi Volatile
oggetto
Collezioni (query di database) il contenuto del database Persistente

www.it-ebooks.info
4.1.1 Che cosa rende una fonte di dati reattiva?

Se succede qualcosa di conseguenza ad un'altra cosa che è accaduto prima, è comunemente conosciuto come un reazione.
Lo stesso vale per Meteor. Per applicare reattività, abbiamo bisogno di dati e azioni, e dobbiamo creare un
meccanismo di innesco che lega entrambi insieme.
Non c'è bisogno di valutare costantemente se i fiori in casa di un amico hanno bisogno di acqua. Invece, utilizzando un
calendario abbiamo già una fonte di dati che possono essere utilizzati per determinare se è necessaria un'azione. Abbiamo
un'azione “verificare se i fiori devono essere innaffiate”, che abbiamo definito per essere eseguito ogni Lunedi. Come tali,
abbiamo bisogno di usare un calendario come la nostra fonte di dati al fine di capire se il giorno odierno della settimana è
cambiato. Se è cambiato, dobbiamo eseguire il controllo una volta e può quindi attendere che il giorno successivo fino a
quando controlliamo di nuovo.
E non è efficace per creare un ampio elenco di tutte le azioni e ogni rapporto che alla fine può accadere; diventa noioso
per mantenere tale elenco aggiornato. Inoltre, cosa succede se ci si dimentica di controllare il calendario? Nella maggior
parte dei quadri che avremmo dovuto implementare un controllo frequente per monitorare eventuali modifiche al calendario,
che è simile a seduto ad una scrivania e costantemente guardare l'orologio al fine di non perdere il giorno successivo per
innaffiare i fiori possibilmente.
Meteor rende le cose più facili utilizzando un approccio dichiarativo per definire le relazioni tra i dati e le funzioni.
Un calendario regolare diventa reattivo a causa della dipendenza legata all'azione di controllo, e si comporta proprio
come una sveglia per i giorni feriali. In questo modo, si può sfruttare la reattività, il che significa che eseguiamo il
controllo basato sulla allarme avviato dalla nostra fonte dati (vedi figura 4.2). Non c'è bisogno di controllare in modo
esplicito se il giorno corrente è cambiato-Servizio di una notifica dal calendario quando succede.
Con l'aggiunta di una relazione nella forma di una dipendenza, ci rivolgiamo qualsiasi fonte di dati normale in una fonte di
dati reattiva. Non solo è possibile una sorgente dati reattivo essere passivamente accede, ma è anche in grado di avviare
attivamente una funzione per eseguire da invalidarla. Il
Tracker pacchetto è responsabile della creazione e il monitoraggio delle dipendenze oltre a gestire calcoli, che sono
alla base della reattività della piattaforma.
Quando le modifiche dei dati ...
giorno della azione trigger

Controllare se fi ori
settimana di oggi
bisogno di acqua
modifiche Figura 4.2 dati innescano

... si innesca un'azione correlata. azioni correlate.

www.it-ebooks.info
fonti di dati di default del Meteor 81
la gestione delle dipendenze dietro le quinte: Tracker

Il fatto che tutto built-in fonti di dati sono reattivi di default significa che Meteor automaticamente si occupa di
creazione e dipendenze di monitoraggio. Lo fa tramite un pacchetto chiamato Tracker. Questo pacchetto viene
utilizzato per dichiarare le dipendenze per un'origine dati, invalidare calcoli, e innescare recomputations. Finché si
lavora solo con i Sessione e Collezione oggetti all'interno di modelli, non potrebbe essere necessario utilizzare
direttamente Tracker. Per le tecniche avanzate, è utile comprendere i principi fondamentali alla base di questo
piccolo pacchetto che si compone di meno di 1 kilobyte di codice. Per il momento, ci affidiamo a Meteor per tenere
traccia di tutte le denze dipen- per noi senza dichiarazione esplicita. Vedremo osservando i cambiamenti di nuovo
nel capitolo 7.
4.1.2 Dati Come reattivo è collegato alle funzioni
Anche se vi abbiamo detto che la reattività è integrato in Meteor e ottenere gratuitamente, tenere a mente che la
reattività sarà usato solo se si imposta il codice per farlo. Del resto, Meteor offre contesti reattive in cui ha luogo la
reattività. Questi contesti possono essere creati utilizzando uno dei seguenti modi:
■ Modelli
■ Blaze.render e Blaze.renderWithData
■ Tracker.autorun
Abbiamo esaminato i modelli e Blaze nel capitolo 3. useremo Tracker.autorun nella sezione 4.3, quando guardiamo la
Sessione oggetto.
Una volta creato un contesto reattiva, una funzione all'interno di questo contesto diventerà un calcolo. Un calcolo
viene eseguito una volta e viene eseguito nuovamente se viene invalidata. Invalidando una funzione avviene quando
una sorgente dati reattivo viene modificata.
Quando i calcoli vengono invalidate sono replica, che li rende validi di nuovo. Che impedisce l'esecuzione
funzioni continuamente e creando uno stato caotico e non deterministico dell'applicazione. L'invalidazione è una
diretta conseguenza di una modifica dei dati e attiva un'azione. Fintanto che i dati non cambia, il calcolo non è
invalidata e quindi non viene eseguita nuovamente. Perché ci possono essere vari contesti reattivi con dipendenze
varie, Meteor tiene traccia di tutte le dipendenze in una lista (vedi figura 4.3).
La prima volta che lavora con Meteor, potrebbe non essere consapevoli del fatto che si sta utilizzando calcoli reattivi. Quando si
inviano dati a un modello, Meteor si prende cura di ri-resa se nessuna delle modifiche dei dati. Ad esempio, se si dispone di un
modello che consente di visualizzare un promemoria per innaffiare i fiori, che sarebbe stato aggiornato automaticamente se sono stati
utilizzati una fonte di dati reattivo, come mostrato nel Listato 4.1.

www.it-ebooks.info
La fonte dei dati reattiva Template crea un contesto reattiva
Sessione Calcolo
Session = { Template.friendsHouse.helpers ({
oggi: "Martedì"}; waterTheFlowers: function () {
Invalidare e Se ( Session.get ( "oggi") === " Lunedi") {
calcolo tornare "innaffia i fiori"; }}});
rieseguire
Utilizzando una fonte di dati

reattiva all'interno di un
calcolo crea una dipendenza Lista delle dipendenze
waterTheFlowers -> Session.get ( "oggi")
Figura 4.3 Modifiche a fonti di dati reattivi invalidare calcoli e innescare loro di eseguire nuovamente.
4.1 La creazione di un contesto reattiva utilizzando aiutanti template
Template.friendsHouse.helpers ({
Crea un Funzioni all'interno contesti
waterTheFlowers: function () {
contesto reattivi sono chiamati calcoli.
var = giorno Session.get ( "oggi"); if (giorno === "Lunedi") {
reattiva
tornare "innaffia i fiori"; }}});

Sessione è un'origine dati reattivo che
invalida il calcolo quando le informazioni
cambiano.
NOTA Funzioni all'interno contesti reattivi sono chiamati calcoli. fonti di dati reattivi invalidano calcoli
quando le modifiche dei dati, che provoca calcoli per rieseguire. Tutte le origini dati reattivi utilizzati
all'interno un calcolo vengono automaticamente associati con il calcolo.
Ora che abbiamo guardato le cose Meteor farà automaticamente per noi, concentriamoci sulle cose che dobbiamo fare
per lavorare con e visualizzare i dati.
4.2 Costruire un'applicazione house-sitter
Rivediamo l'esempio del nostro amico innaffiare i fiori. Non solo è prendersi cura delle piante della gente, ma è ora
una casa sitter professionale per molte persone e che tiene traccia di tutte loro in un database. Questo è anche il
luogo dove si tiene tutte le istruzioni per l'irrigazione delle piante. Ha intenzione di utilizzare una semplice
applicazione web per cercare ogni casa

www.it-ebooks.info
Costruire un'applicazione house-sitter 83
e prendere nota quando ha finito con una visita. Tale applicazione potrebbe utilizzare le seguenti fonti di dati:
■ Un database per memorizzare tutti gli amici, istruzioni e note

■ Le variabili di sessione per memorizzare la casa attualmente selezionato
Figura 4.4 mostra l'interfaccia utente insieme ad alcune annotazioni. Tutti i dati provenienti da una collezione è mostrato in scatole
più scuri, e tutti i dati temporanei all'interno di un Sessione oggetto è rappresentato in una casella accendino. Se consideriamo che da
un livello alto, l'applicazione guarda in alto tutte le voci in un database e recupera un unico documento completo in base al valore di
una variabile di sessione temporanea. Alla fine si lascia che i cambiamenti archivio utenti apportate al database.
Creare un nuovo progetto utilizzando lo strumento CLI di Meteor:
$ Meteora creare Housesitter
Organizziamo il nostro codice in cartelle diverse per rendere più facile seguire quale codice va dove. Questo elimina
la necessità di aggiungere Meteor.isServer () o Meteor.isClient ()
intorno a qualsiasi del codice.
Avremo il codice che deve essere eseguito solo sul client. Questo va in client / Client.js. Tutti i modelli saranno
messi all'interno di client / templates.html. Codice che viene eseguita solo sul server va in Server / server.js, e le
collezioni verrà memorizzato nella
Invia nome e _ id
Documenti da a discesa
collezione
Casa
Sessione Conservare selezionato

variabile _ID Session
in
Trova documento con _ id
documento con
_ID ===
sessione var documento di visualizzazione
contenuto
Figura interfaccia e fonti di dati 4.4 utente per l'applicazione house-sitter

www.it-ebooks.info
Inviato al browser
Eseguito sul
server Definisce i dati
provenienti da un
database
Figura 4.5 Organizzazione delle app house-sitter
collezioni / houses.js perché dovrebbero essere disponibili sul client e sul server. Vedere figura 4.5 per riferimento.
4.2.1 configurazione dei modelli
Prima di iniziare a lavorare con i dati reattivi, è necessario impostare una struttura di scheletro. 4.2 mostra il corpo del
nostro sito. Esso comprende tre subtemplates: selectHouse, che permette agli utenti di selezionare una casa; casa tipo, che
visualizza tutti i dettagli rilevanti di una voce di database; e houseForm, che permette agli utenti di aggiungere e
modificare le voci del database. Questi saranno definiti all'interno dello stesso file in vista delle prossime sezioni-tutti i
modelli rimarrà piuttosto piccola, e dividendoli non è necessario.
4.2 Struttura del modello di base in modalità client / templates.html
<Head>
<Title> Il HouseSitter </ title> </ head>
<Body>
<H1> La Casa-Sitter App </ h1> {{> selectHouse}} {{>
casa tipo}} {{> houseForm}} </ body> tag di inclusione
per modelli
aggiuntivi
<Nome di modello = "selectHouse"> </ template>
Questi modelli
<Nome di modello = "casa tipo"> </ template> rimangono vuote per
ora.
<Nome di modello = "houseForm"> </ template>
NOTA Se stai inclusi i modelli che non sono disponibili, Meteor verrà visualizzato un errore. È possibile evitare di
incorrere in questi errori da entrambe la creazione di un modello vuoto o rimuovere i tag di inclusione dal corpo
fino a quando sono effettivamente necessari.

www.it-ebooks.info
Costruire un'applicazione house-sitter 85
L'applicazione non necessita di alcuna definizione di stile, in modo che il file del client / style.css rimane vuoto. Se si desidera
aggiungere stili per rendere la casa-sitter app più bella, questo è dove è possibile metterli.
4.2.2 Collegamento a un database e dichiarando collezioni

Anche se imparerete a conoscere le collezioni al paragrafo 4.4, è necessario definire uno ora perché si richiede
alcuni dati siano disponibili. Discuteremo i dettagli di lavorare con le collezioni più avanti in questo capitolo.
MongoDB è un documento-oriented, o NoSQL, banca dati. Non memorizza il suo contenuto nelle tabelle, ma nei
documenti. Più documenti sono raggruppati in collezioni. Pertanto, si sta per definire un nuovo Collezione oggetto
chiamato HousesCollection che memorizzerà il suo contenuto all'interno di un database MongoDB in una raccolta
denominata case. Creare un file all'interno di una directory collezioni e aggiungere il codice dalla quotazione 4.3.
Listing dichiarazione 4.3 Collection di collezioni / houses.js
HousesCollection = new Mongo.Collection ( 'case');
Inoltre, è necessario assicurarsi che ci sia alcuni dati all'interno del database con cui lavorare, quindi dovrete
aggiungere un po 'di codice lato server che controlla all'avvio se non c'è alcun dato disponibile all'interno del HousesCollection.
Se non ci sono voci, il nostro codice inserirà un nuovo documento nel database (vedi 4.4). È possibile aggiungere più
case al case
array se avete bisogno di più dati per essere disponibile.
NOTA Wrapping codice in un Meteor.startup () blocco funziona sia su server e client. Mentre sul server il codice
viene eseguito una volta quando l'istanza Node.js avviato, viene eseguito su ogni cliente una volta il DOM è pronto.
Avvolgendo il codice all'interno di un Meteor.startup () blocco assicura che funziona solo quando il server si avvia. In
teoria si potrebbe anche aggiungere questo codice al cliente, ma Meteora
. avviare() Verrà eseguita ogni volta che un client si connette con successo. A causa della condizionale Se, non
sarebbe successo niente, quindi si può altrettanto bene limitare gli infissi a solo il server.
4.4 Aggiunta di infissi in server / server.js
Esegui solo una volta quando si
if (HousesCollection.find (). count () === 0) {
avvia il server.
case var = [{
Nome: 'Stephan', le piante: [{
Verificare se ci sono ancora
colore rosso', messaggi della collezione.
istruzioni: '3 pentole / settimana'}, {
colore: 'bianco', le istruzioni: 'mantenere umido'}]}]; Definire tutte le

apparecchiature come elementi dell'array.

www.it-ebooks.info
while (houses.length> 0) {
Inserire tutti gli oggetti dalla
HousesCollection.insert (houses.pop ()); }
matrice case nel database. la
console.log ( 'apparecchi aggiunti'); }}); registrazione della console
funziona anche sul server.
NOTA Il console.log () il comando funziona bene nella console del browser, ma può essere utilizzato anche
all'interno del contesto del server per stampare i messaggi. L'uscita può essere visualizzato all'interno del
terminale che esegue il meteora comando.
4.3 Lavorare con l'oggetto Session

Tradizionalmente, si accede a un sito tramite HTTP è senza stato. Un utente richiede un documento dopo l'altro.
Perché c'è spesso la necessità di mantenere un certo stato tra le richieste, ad esempio, per mantenere un utente
collegato in modo più essenziale per memorizzare i dati volatili in un'applicazione web è la sessione. Il concetto di
Meteor di una sessione è diverso da linguaggi come PHP, in cui esiste un oggetto sessione dedicata sul server o in un
cookie. Meteor non utilizza i cookies HTTP, ma utilizza il browser di memoria locale instead- per esempio, per
memorizzare i token di sessione per mantenere un utente connesso.
Un dedicato Sessione oggetto che è solo disponibile sul client e vive nella memoria è utile solo per tenere traccia
dei contesti utente corrente e azioni.
4.3.1 L'oggetto Session
Il Sessione oggetto contiene coppie chiave-valore, che possono essere utilizzati solo sul client. Si tratta di un dizionario
reattiva che fornisce un ottenere() e impostato() metodo. Fino a quando una chiave di sessione è associata tramite impostato(),
rimane indefinito. È possibile evitare questo impostando un valore predefinito utilizzando imposta default(), che funziona
esattamente come impostato(), ma solo se il valore è attualmente undefined. Controllo per un valore di sessione è
un'operazione comune, che può essere fatto in modo più efficiente, utilizzando il Sessione oggetto di equivale() funzione. Non
è necessario dichiarare una nuova Sessione variabile utilizzando la var sintassi, poiché la variabile diventa disponibile quando
la impostato() o imposta default() metodo viene utilizzato. La sintassi corrispondente viene illustrata qui di seguito.
Listato 4.5 Utilizzo del Sessione oggetto
setDefault () imposta un valore per una

chiave solo se la chiave è indefinito.
Restituisce Session.setDefault ( "chiave", "valore di default"); Session.get ( "chiave");

il valore Assegna un nuovo valore ad una chiave
di default Session.set ( "chiave", "nuovo valore"); Session.equals ( "chiave",
"espressione");
Si traduce in Session.get ( "chiave") ===
"espressione", ma è più efficiente
MANCIA Anche se un Sessione variabile viene tipicamente usato con le stringhe, esso può anche contenere array o oggetti.

www.it-ebooks.info
Lavorare con l'oggetto Session 87
Vediamo come è possibile applicare la Sessione opporsi al app housesitter. Prendere in considerazione
Sessione essere memoria a breve termine della app per tenere traccia della casa attualmente selezionato.
4.3.2 Utilizzo di sessione al negozio selezionato valori discesa
Per il selectHouse template, è sufficiente disporre di un elenco a discesa in modo gli utenti possono selezionare una casa
dal database. L'idea è quella di recuperare tutti i documenti dal database e mostrare tutti i nomi disponibili. Una volta
selezionato un nome, sarà definire il contesto di tutti gli altri modelli e verrà visualizzata una sola casa. Sarete utilizzando
il codice mostrato nel Listato 4.6.
Un {{# ogni}} modello helper è utilizzato per scorrere tutte le case restituiti dal database. Il contesto dati è
impostato in modo esplicito dal passaggio housesNameId 1 come argomento. Entrambi {{_ id}} e {{ nome}} sono attributi
del Casa oggetto proveniente dal database, quindi non c'è bisogno di definire aiutanti per loro.
Listing 4.6 discesa codice elenco nella selectHouse modello
<Nome di modello = "selectHouse">

Iniziare la lista con un'opzione
<Select id = "selectHouse">
vuota per selezionare.
<Option value = "" {{isSelected}}> </ option> {{#each housesNameId}}
<Option value = "{{_ id}}" {{isSelected}}> {{nome}} </ option> {{/ ogni}} </ select> </ template>
ogni itera su tutti gli oggetti restituiti da un aiutante

chiamato housesNameId.
Nel file delle Client.js si definisce un aiutante che fornisce la housesNameId contesto dati. Perché non abbiamo
guardato i dettagli di lavorare con le collezioni ancora, ti basta restituire tutti i documenti ei campi per ora. Perché housesNameId
è definita all'interno di una
Modello oggetto, è reattivo. Questo significa che se si aggiungono o rimuovono i documenti dal database, il valore di
ritorno verrà automaticamente regolata e la casella di selezione rifletterà le modifiche senza la necessità di scrivere
codice dedicato.
Potrai utilizzare un Sessione variabile chiamata selectedHouseId per memorizzare la selezione a discesa. La casella di selezione
dovrebbe riflettere la selezione vera e propria, quindi è necessario aggiungere una selezionato
attribuire all'opzione attualmente selezionata. Per fare ciò, si definisce un secondo aiutante di nome è selezionato che
restituisce una stringa vuota o ritorni selezionato se il valore di
_ID è uguale a quello del tuo Sessione variabile.
L'ultimo passo è quello di impostare il valore per il Sessione variabile in base alla selezione dell'utente. Perché si tratta di
un'azione proveniente da parte dell'utente, questo richiede una mappa degli eventi.
Ogni volta che il valore per l'elemento DOM con l'ID selectHouse modifiche, il gestore di eventi consente di
impostare il selectedHouseId variabile per il valore selezionato
1 Per adesso housesNameId contiene più di un nome e un ID, ma non preoccupatevi. Faremo che più
efficiente in un po '.

www.it-ebooks.info
Elemento opzione. Si noti che è necessario passare l'evento come un argomento per la funzione JavaScript che imposta la Sessione
valore al fine di accedere al suo valore (vedi elenco seguente).
Listing 4.7 codice JavaScript per la selezione di case
Template.selectHouse.helpers ({ Restituisce selezionati se la _id per la

housesNameId: function () { casa attualmente elaborato è uguale a
Restituisce
tornare HousesCollection.find ({}, {}); }, quella memorizzata nella variabile di
tutti i
documenti sessione
della collezione IsSelected: function () {

tornare Session.equals ( 'selectedHouseId', this._id)? 'selezionato' : ''; }});
Ricordarsi di passare
Template.selectHouse.events = { l'evento come parametro
'Cambiare #selectHouse': function (evt) { per cui la funzione può
Session.set ( 'selectedHouseId', evt.currentTarget.value); }}; assegnare il valore di

selezione alla variabile di
sessione.
È possibile verificare che tutto funzioni correttamente aprendo la console JavaScript all'interno di un browser e selezionando
un valore dall'elenco a discesa. È possibile ottenere e impostare i valori per la variabile direttamente all'interno della vostra
console. Se si modifica il valore di una valida _ id,
si può vedere che l'elenco a discesa si aggiorna immediatamente a seguito della è selezionato
helper, come mostrato in figura 4.6.
Cambiando il valore
selezionato imposta il valore
per selectedHouse.
Controllare il valore corrente

utilizzando Session.get nella
console.
Impostare un valore per

selectedHouse cambia
automaticamente il valore di
visualizzazione del menu a
discesa.
Figura 4.6 ottenere e impostare la Sessione variabile attraverso la console JavaScript

www.it-ebooks.info
Lavorare con le collezioni MongoDB 89
4.3.3 La creazione di un contesto reattiva utilizzando Tracker.autorun
Quando si lavora con il codice JavaScript, spesso si ha bisogno per controllare il valore di una variabile per capire meglio il motivo
per cui un'applicazione si comporta il modo in cui lo fa. È possibile utilizzare il
console.log () metodo, uno degli strumenti più importanti per il debugging, per tenere traccia dei contenuti variabili.
Perché hai a che fare con le origini dati reattivi, è possibile inoltre usufruire di calcoli di monitorare i valori effettivi di
quelle fonti. In questa sezione imparerete come stampare il contenuto del reattivo Sessione variabile ogni volta che
cambia con la creazione di un contesto reattivo per l'esecuzione di console.log ().
Nella sezione 4.1 si è visto che, oltre a modelli e Blaze c'è un terzo modo per stabilire un contesto che consente
calcoli reattivi: Tracker.autorun (). Qualsiasi funzione esecuzione all'interno di una tale blocco si ricorre
automaticamente ogni volta che le sue dipendenze (cioè, le fonti di dati reattivi utilizzati all'interno di esso)
cambiamento. Meteoriti rileva automaticamente quali fonti di dati sono utilizzati e imposta le dipendenze necessarie.
È possibile tenere traccia del valore Session.get ( "selectedHouseId") mettendolo all'interno di un autorun funzione.
Inserire questo codice, proprio all'inizio del file Client.js, al di fuori tutti i blocchi di modello (vedi elenco 4.8). Ogni volta
che si utilizza l'elenco a discesa per selezionare un altro valore, la console di stampa immediatamente l'ID selezionato.
Se non viene selezionata alcuna casa, sarà la stampa non definito.
Listato 4.8 Uso Tracker.autorun () per stampare un Sessione variabile per la console
Tracker.autorun (function () {
console.log ( "Il selectedHouse ID è:" +
Session.get ( "selectedHouseId")
); });
Come si può vedere, la Sessione oggetto è semplice da lavorare e può essere estremamente utile. Vi si può accedere da
qualsiasi parte dell'applicazione e mantiene i suoi valori, anche se si modificano i file di origine e Meteor ricarica l'applicazione
(un processo noto come codice calda spinge). Se un utente avvia un aggiornamento della pagina, tutti i dati vengono persi,
però.
Tenete a mente che il contenuto di una Sessione oggetto non lasciare mai il browser, in modo che altri clienti o anche il
server può mai accedere al suo contenuto. Questo è ciò che le collezioni sono utilizzati per. Diamo uno sguardo più da vicino a
lavorare con le collezioni.
4.4 Lavorare con le collezioni MongoDB

Meteor dotato di una propria istanza di MongoDB, un open source, di database NoSQL document-oriented. Ogni volta che
si avvia il server con il run di meteoriti di comando, un server di database dedicato è anche iniziato e ascolta le connessioni
sulla porta 3001. Per impostazione predefinita, Meteor usa questo esempio come il suo motore di database e memorizza
tutti i contenuti all'interno di un database chiamato meteora. Non c'è bisogno di definire tutte le stringhe di connessione al
database. Ma è possibile utilizzare variabili d'ambiente come MONGO_URL per puntare il server Meteor a un'altra istanza
del database. Capitolo 12 va in dettaglio su come utilizzare i database esterni al posto di quello locale predefinito.

www.it-ebooks.info
Che cosa è un database document-oriented?

MongoDB è un database NoSQL document-oriented. In contrasto con i database relazionali (SQL), ogni
ingresso è autonomo e non si estende su più tabelle per specificare relazioni. Ogni voce del database è
fondamentalmente un oggetto JSON. Per capire meglio i database orientati ai documenti, prendere in
considerazione tutti i dati che si desidera memorizzare per essere scritto su un pezzo di carta (un
“documento”). Se si desidera tenere traccia di tutte le case si è casa-sitting per, devi creare un modulo per
ogni casa e poi annotare tutte le istruzioni. Il vantaggio di archiviazione dei documenti è che ogni
informazione utile in un unico luogo. Basta prendere un singolo pezzo di carta e di avere tutte le informazioni
di cui hai bisogno di prendersi cura di quella casa.
Ogni documento è autonomo e può anche avere diverse informazioni su di esso ( “campi”), il che riflette il fatto
che in alcune case si prende cura delle piante, mentre in altri potrebbe anche essere necessario per alimentare
il coniglio. Lei non annotare tutte le zone che non c'è bisogno di intervenire in, quindi, anche se due documenti
possono essere della stessa collezione, non necessariamente contengono gli stessi campi:
Nome: Stephan Nome: Manuel

Piante: Piante:
- Colore: Rosso - Colore: Rosso
Istruzioni: 3 pentole / settimana Istruzioni: 3 pentole / settimana
- Colore: bianca - Colore: Giallo
Istruzioni: acqua al giorno Istruzioni: mantenere umido
Animali:
- Nome: Danbo
Istruzioni: 1 carota / giorno
Se avete lavorato con i database SQL come MySQL o Oracle, prima, la seguente tabella si traduce termini
SQL comuni ai loro equivalenti orientati ai documenti.
termine SQL termine di documento orientato
Banca dati Banca dati
tavolo collezione
riga documento
colonna campo
Se i dati è destinato a essere conservato per un lungo periodo di tempo, o se deve essere condiviso tra i clienti, le
collezioni sono il modo per farlo. collezioni nuovo database sono dichiarati

www.it-ebooks.info
usando il Mongo oggetto. La seguente dichiarazione rende il contenuto da una raccolta di nome MongoDB la mia collezione disponibili
all'interno di un'applicazione come Meteor La mia collezione:
MyCollection = new Mongo.Collection ( "MyCollection");
Perché la raccolta deve essere accessibile sia il server e il client, è necessario assicurarsi che questa linea è eseguito in
entrambi i contesti, in modo che non devono essere avvolti all'interno di qualsiasi IsClient () o isServer () blocchi. Si noti
inoltre che non fa uso di un var dichiarazione, che limiterebbe il campo di applicazione a un singolo file.
NOTA I nomi delle raccolte in Meteor di solito inizia con una lettera maiuscola e hanno nomi plurali. Se si
vuole essere più esplicito è possibile aggiungere Collezione ai loro nomi per rendere il codice più leggibile.
Le collezioni sono meglio definiti in uno o più file dedicati accessibili a client e server.
I fondamentali di lavorare con una collezione si basano sul modo in cui funziona MongoDB, quindi se sei già familiarità
con la sintassi utilizzata per interrogare Mongo banche dati è possibile riutilizzare questa conoscenza con Meteor, anche
dall'interno del browser.
4.4.1 documenti Interrogazione a MongoDB

Interrogazione documenti in MongoDB è fatto utilizzando trova() o trova uno(). I primi restituisce tutti i documenti
corrispondenti; quest'ultimo recupera solo il primo documento che corrisponde ai criteri di ricerca specificati. Questi criteri
vengono passati alla query come oggetto chiamato documento di interrogazione o selettore. Se nessun selettore viene definito,
quindi tutti i documenti corrispondono.
Per trovare un documento in cui il nome è "Stephan", abbiamo bisogno di accertarsi che il selettore contiene il
campo di ricerca ( nome) e il valore desiderato (" Stephan "). I nomi dei campi o chiavi non necessitano di citazioni:
MyCollection.findOne ({name: "Stephan"});
Il trova uno() operazione viene eseguita sulla raccolta denominata La mia collezione. Si abbina e restituisce il primo
documento in cui il valore del campo nome equivale
"Stephan".
Trovare tutti i documenti che hanno le istruzioni per innaffia una pianta bianca richiede una query più avanzate. Questa
volta trova() viene eseguito, in modo che tutti i documenti corrispondenti all'interno
La mia collezione vengono restituiti. Il documento interrogazione specifica che all'interno di una piante chiave deve essere un altro
tasto chiamata colore. Il termine $ esiste: 1 traduce nel campo essendo presente all'interno tutte le partite.
Collection.find ({ "plants.color": {$ esiste: 1}});
Per verificare se il campo contiene un valore specifico, è possibile utilizzare $ in invece di

$ Esiste. Se si desidera trovare tutti i documenti che contengono una pianta con un colore attributo " Bianca", si utilizza
la seguente query:
Collection.find ({ "plants.color": {$ in: [ "bianco"]}});

www.it-ebooks.info
Oltre ai criteri di ricerca, un secondo oggetto può essere passato alle operazioni di query. Si chiama proiezione, e lo si
può utilizzare per limitare i campi che devono essere restituiti, modificare l'ordinamento, o di applicare qualsiasi tipo di
operazione sui risultati di ricerca prima di restituirli. Le proiezioni possono essere utilizzati con o senza un documento
di interrogazione. Se non sono necessari criteri di ricerca, un selettore vuoto viene passato al trova() funzione.
La query seguente restituisce solo il nome campo e il valore di ogni documento. Il termine Nome: 1 può essere letto
come “impostare il nome del campo visibile”, perché 1 rappresenta vero. Utilizzando 0, si definiscono i campi che si
desidera escludere dal recupero:
Collection.find ({}, {nome: 1})
Come si può vedere da questi esempi, utilizzando query di raccolta è molto diversa da utilizzando SQL. E 'utile
tenere a mente che non si tratta di tabelle e righe, ma con i documenti che si comportano come oggetti.
NOTA Maggiori dettagli su come utilizzare MongoDB si possono trovare nella documentazione ufficiale a
http://docs.mongodb.org/.
4.4.2 Lavorare con le collezioni Meteor
Al livello più semplice, è possibile memorizzare i dati di una raccolta come un documento e cercare e recuperare uno o
più documenti quando è necessario per visualizzare i dati. Cominciamo con il popolamento del case collezione.
Le funzioni più importanti quando si lavora con le collezioni sono riportati nella tabella 4.2.
Tabella 4.2 Panoramica delle funzioni più importanti quando si lavora con le collezioni
Funzione Caso d'uso Valore di ritorno
Collection.find () Trova tutti i documenti che corrispondono il selettore Cursore
Collection.findOne () Trova il primo documento che corrisponde ai criteri di Oggetto
selezione e proiezione
Collection.insert () Inserisce un documento in una raccolta String ( documento _ID)
Collection.update () Modifica uno o più documenti in una raccolta Numero di documenti colpiti
Collection.upsert () Modifica uno o più documenti in una raccolta o inserisce un Oggetto
nuovo documento se non viene trovata alcuna
corrispondenza
Collection.remove () Rimuove i documenti da un oggetto collezione
io NTRODUCING CURSORS: la differenza tra FIND () e trovare O NE ()

Un unico documento può essere recuperato da una collezione utilizzando trova uno(). Questa funzione restituisce un oggetto
JavaScript che può essere affrontato come qualsiasi altro oggetto. utilizzando

www.it-ebooks.info
il trova() funzione per recuperare più documenti non restituisce alcun documento ma invece restituisce una cursore. Il
cursore è una fonte di dati reattivo, non la raccolta.
Si può pensare a un cursore come la query che alla fine viene eseguito nel database. I cursori consentono di
inviare i dati in lotti. Quando si tratta di dati di grandi dimensioni, troverete che non è efficiente per tornare sempre
tutti i documenti da una query, ma per scorrere i risultati e inviarli in lotti.
Per ora, non ci occupiamo di cursori direttamente a causa Meteor è in grado di saper gestire i risultati di un Collection.find
() va bene. Rivisiteremo questo tema una volta che discutiamo casi di utilizzo più avanzate nel capitolo 9.
4.4.3 Inizializzazione una collezione
Per ogni casa è necessario prendersi cura di, avrete un documento all'interno del database. Tale documento
includerà il nome e le piante è necessario prendersi cura di. Per avere una migliore tracciabilità lungo il codice
dell'applicazione, potrai utilizzare un nome verbose per aiutarti a tenere traccia dell'oggetto collezione. Che hai
aggiunto il codice necessario nella sezione 4.2.2 già, quindi non c'è bisogno di aggiungere di nuovo questa linea. HousesCollection
fornirà un'interfaccia per tutte le voci del database:
HousesCollection = new Mongo.Collection ( "case");
Non c'è alcuna necessità di creare eventuali strutture di dati all'interno di una collezione. Quando la prima voce viene aggiunta ad una
collezione, Meteor crea automaticamente una collezione all'interno del database se non è ancora presente.
Il codice del server abbiamo definito durante l'impostazione della nostra applicazione nella sezione 4.2.2 si occupa sia di
creare una collezione di database e lo riempie di dati. Come si è visto nel capitolo 2 con l'esempio frigo, è possibile anche
utilizzare la console del browser per aggiungere nuovi dati. Aggiungeremo meccanismi di sicurezza che impediscono questo
quando discutiamo pubblicazioni e metodi nel capitolo 6. Per ora concentriamoci su come aggiungere funzionalità invece di
ottenere pronto per la produzione.
Un importante effetto collaterale di utilizzare apparecchi è che avete un'idea di ciò che la struttura dei dati
assomiglia. Perché hai a che fare con un database NoSQL, ogni documento può avere una struttura completamente
diversa ed è bene avere le voci di riferimento a portata di mano. Anche se ci possono essere altri campi (come
animali o bambini), i campi previsti per ogni documento casa sono riportati nella tabella 4.3. Stai solo prendersi cura
di piante in questo esempio.
Tabella 4.3 Previsto campi per la case collezione
nome campo contiene Gli appunti
_ID ID univoco per ogni casa; stringa assegnata automaticamente da MongoDB
nome Nome visualizzato per ogni casa; stringa

www.it-ebooks.info
Tabella 4.3 Previsto campi per la case collezione ( continua)
nome campo contiene Gli appunti
l'ultima visita Timestamp per ultima azione; Generato dalla logica dell'applicazione
Data
piante impianti domestici a prendersi cura di; array

di oggetti
plants.color colore pianta unica per casa; stringa Nessun vincolo di database, l'unicità deve essere
garantita da logica dell'applicazione
plants.instructions istruzioni per l'irrigazione

una pianta; stringa
4.4.4 collezioni Interrogazione
E 'conveniente fare affidamento su tutto essere reattivi in un ambiente di sviluppo, ma con set di dati più grandi che
hanno tutte le funzioni reagire a qualsiasi modifica dei dati avrà un impatto visibile sulle prestazioni. Per l'elenco a
discesa delle case, non importa se qualcuno aggiunge o rimuove le piante da / per un documento, quindi si sta
andando a limitare la reattività al nome e _ id solo campi.
R eturning Campi specifici SOLO

Nella sezione precedente, è stato definito il housesNameId aiutante di tornare tutto da HousesCollection; ora si limita il
valore di ritorno per solo i campi nome e
_ID come mostrato nel Listato 4.9. L'oggetto selettore rimane vuoto, ma si passa un secondo oggetto con un i campi struttura
al cursore. Al suo interno è possibile impostare singoli campi a 1, il che significa che sarà essere restituiti. In alternativa
è possibile impostare i campi a 0 per escludere che vengano restituiti. Non è possibile combinare l'inclusione (1) e
l'esclusione (0) stili. Tutte le chiavi di cui devono essere impostati su 1 o 0.
Listing 4.9 Limitare i campi restituiti al elenco a discesa
Template.selectHouse.helpers ({
housesNameId: function () {
tornare HousesCollection.find ({}, {campi: {nome: 1, _id: 1}}); },
// definizione isSelected});
R Eturning A PIENO DOCUMENTO

Una volta che l'utente effettua una selezione dall'elenco a discesa, si vuole mostrare il documento casa in piena. In questo
caso dovrete, ovviamente, di restituire tutti i campi all'interno del documento. Potrai creare un altro supporto che tornerà
esattamente un documento con tutti i campi in base al valore della Sessione variabile selectedHouseId. Questo aiuto verrà
utilizzato all'interno di un template chiamato casa tipo, quindi è necessario aggiungere questo blocco al file Client.js, come
mostrato nel Listato 4.10.

www.it-ebooks.info
4.10 Restituzione di un documento di database a un modello basato su ID
Template.showHouse.helpers ({
Casa: function () {
tornare HousesCollection.findOne ({
_ID: Session.get ( "selectedHouseId")}); }});
Questa volta si sta utilizzando un documento di query, ma passare opzioni al trova uno() funzione. Come risultato si otterrà il
documento completo memorizzato all'interno MongoDB come un oggetto. Questo oggetto può essere letta come qualsiasi altro
in JavaScript.
4.4.5 i dati di raccolta di visualizzazione in un modello
modelli Meteor facilitano l'accesso ai dati all'interno di un oggetto restituito da un aiutante. Tutto ciò che serve è un tag a
doppia staffa riferimento al nome dell'oggetto e il campo specifico che si desidera visualizzare. Per visualizzare il nome
memorizzato all'interno del documento restituito da
Casa, Puoi usare {{ Nome della casa}}. Per eliminare la necessità di anteporre ogni proprietà oggetto con Casa, però, ci
si accorge che un # con blocco che imposta il contesto dati è utile perché rende il modello più leggibile.
Per migliorare l'esperienza utente, verrà aggiunto un condizionale per verificare se una selezione valida è stata fatta.
Se non è stata fatta nessuna selezione, il modello deve chiedere all'utente di effettuare una selezione.
Ogni impianto deve essere visualizzato con le informazioni riguardanti il suo colore, le istruzioni per l'irrigazione, e un pulsante per
contrassegnare una pianta come innaffiato.
Per visualizzare il contenuto del documento, è possibile mettere tutto dentro la

casa tipo modello o utilizzare un subtemplate dedicato. Utilizzando un subtemplate offre una maggiore flessibilità e
gestibilità in futuro, quando si potrebbe desiderare di supportare gli animali domestici, i bambini, o la pulizia.
Quando si include un modello, eredita contesto dati del genitore. In questo modo, non è necessario definire un
nuovo aiutante e la necessità di scrivere meno codice. Nell'esempio nell'elencare 4.11, si può vedere che il contesto
dati non viene presa dal genitore direttamente, ma è ulteriormente specificata da {{# ogni pianta}}. Dal subtemplate, la
corrente pianta
oggetto dal loop è contesto definito. È comunque possibile utilizzare le stesse espressioni come si farebbe nel
genitore, ma ricordate che ora siete ad un livello più profondo all'interno Casa.
Per accedere attributi padre, ad esempio l'ID casa, è necessario utilizzare la notazione di ../.
Listing 4.11 codice del template per mostrare una casa con tutti gli impianti
<Nome di modello = "casa tipo">

{{Casa #Con}}
Impostazione del
<h2> Prendersi cura di {{nome}} casa 's </ h2>
contesto dati per il
modello in modo esplicito
Ogni campo del database è una proprietà
dell'oggetto casa e si può accedere
usando la notazione punto.

www.it-ebooks.info
{{piante #each}}
ogni restringe ulteriormente
{{> PlantDetails}} {{/ ogni}} {{else}}
il contesto dati per la
subtemplate.
Un subtemplate,
È necessario selezionare una casa. {{/ Con}} </
plantsDetails, è
template> incluso.
<Nome del modello = "plantDetails">

<P>
colore <strong> impianto: </ strong> {{color}} </ p> <p>
<strong> Istruzioni: </ strong> {{istruzioni}}

<Class = tasto "acqua" data-id = "{{../_ id}} - {{color}}" {{}} isWatered
Fine </
button> </ p> </
template>
L'aggiunta di due modelli per l'applicazione, è ora possibile selezionare una casa e visualizzarne il contenuto,
indipendentemente dal numero di piante.
ReactiveVar: il potere di Sessione con un ambito locale

Sessione richiede un nome univoco a livello globale, o tecnicamente parlando, vive dentro la portata globale. A
volte si desidera una variabile sia disponibile ovunque nella vostra app, ma ci sono molti casi in cui il loro uso
è limitato ad una sola parte del zione-o anche un singolo modello di applica-.
Come regola generale si dovrebbe evitare di mettere troppo in ambito globale, soprattutto non le variabili che vengono utilizzati solo
a livello locale, come ad esempio lo stato innaffiato. Per mantenere le cose semplici ci concentriamo sul lavoro con il Sessione oggetto,
cerchiamo di accettare questa limitazione per l'applicazione house-sitter.
Per i progetti più grandi e, se si desidera migliorare il codice è possibile utilizzare con ambito locale le variabili-reattivo
giustamente chiamato ReactiveVar. Il ReactiveVar pacchetto è parte di nucleo Meteor, ma bisogna aggiungere
manualmente tramite la riga di comando:
$ Meteora aggiungere reattiva-var
Entrambi ReactiveVar e Sessione uso ottenere() e impostato() funzioni, ma ReactiveVar

non inquina namespace globale e può essere limitata a un ambito locale. È possibile riutilizzare con valori diversi per
lo stesso modello. Proprio come Sessione, ReactiveVar memorizza coppie di valori-chiave. Può immagazzinare oggetti
interi come valori. Aggiornamento oggetti all'interno ReactiveVar contenitore richiede l'uso di impostato().
Perché è ambito ad un contesto modello, è necessario dichiarare una nuova ReactiveVar

dentro il creato callback per un modello. Non c'è imposta default() funzione, ma è possibile passare un valore di default
per ReactiveVar quando viene dichiarata una nuova istanza:
Template.plantDetails.onCreated (function () {
this.watered = new ReactiveVar (); this.watered.set (false); });

www.it-ebooks.info
(Continua)
Qui, la parola chiave Questo si riferisce al contesto dati attualmente disponibili (che risulta essere il contenuto di un singolo piante
oggetto). All'interno di una mappa degli eventi è possibile impostare il suo valore a vero quando il pulsante viene premuto. È
necessario utilizzare il secondo argomento della funzione, tpl, che detiene un riferimento al modello. Perché irriguo è una
proprietà dovuti del modello, è possibile impostare in questo modo:
Template.plantDetails.events ({
'Fare clic sul pulsante': la funzione (EVT, tpl) {
tpl.watered.set (true); }});
E, infine, dall'interno delle aiutanti il valore corrente è possibile accedere. Qui è necessario accedere
all'istanza modello corrente utilizzando il corrispondente Modello
. esempio() sintassi:
Template.plantDetails.helpers ({
innaffiato: function () {
tornare Template.instance (). watered.get ()? 'Disabilitato' : ''; }});
E VENT MAPPE E DATI ASSOCIAZIONE

Oltre semplicemente presentando i dati da un documento, si vuole anche essere in grado di segnare una pianta come
innaffiato. Facendo clic su un pulsante attiva un evento che imposta un impianto per innaffiato, ma se si passa tra le case si
desidera mantenere lo stato di un impianto. Per ottenere questo, viene utilizzato un Sessione variabile di nuovo. Questa
volta non è possibile impostare il nome nel codice dell'applicazione, perché non si sa quante piante ogni casa ha. Pertanto,
si creerà dinamicamente un ID per ciascun impianto, costituito dal documento _ id in combinazione con il colore attributo. Si
può fare questo perché è stato definito colore come un identificatore univoco per ciascun impianto all'interno di una casa.
E 'pratica comune per utilizzare l'attributo HTML Dati-id per passare gli ID elemento unico al codice
dell'applicazione. La mappa evento orologi per un clic su un pulsante con la classe acqua e memorizza il valore di Dati-id
per il pulsante attualmente cliccato consistente sia l'ID del documento e la colore valore. La mappa evento mostrato
nella messa in vendita di 4.12 può usare Dati-id senza dover creare l'ID composto stesso.
Una volta che il pulsante viene premuto, un Sessione variabile con il nuovo valore ID composto è impostato vero. Non c'è alcuna necessità di
impostare un valore predefinito per la Sessione variabile. Ricordate, tecnicamente si tratta di un archivio di valori-chiave all'interno del Sessione opporsi,
in modo da poter aggiungere nuove chiavi in qualsiasi momento.
Listing 4.12 Evento mappa per abbeverare gli impianti
'Click button.water': function (evt) { Dati-id contiene un ID
var plantId = $ (evt.currentTarget) .attr ( 'data-id'); Session.set (plantId, true); }}); univoco per ogni
impianto.

www.it-ebooks.info
Ogni volta che un impianto è irrigato, si desidera disabilitare il pulsante come un indicatore che questa pianta non
richiede più attenzione. Farete questo con un aiutante (4.13) simile a quello utilizzato per determinare la casa
attualmente selezionato nell'elenco a discesa. Perché si sta utilizzando disponibile a livello globale Sessione variabili,
si può innaffiare la pianta rosso nella casa di Manuel, passare alla casa di Stephan, e poi di nuovo a Manuel e
ancora trovare il pulsante disabilitato.
A meno che l'utente forza un ricaricare la pagina, tutti i contenuti memorizzati all'interno di un Sessione oggetto rimarrà
globalmente disponibile in tutta l'applicazione.
Listing 4.13 Modello aiuto per disabilitare il pulsante Done
Template.plantDetails.helpers ({
isWatered: function () {
var = plantId Session.get ( "selectedHouseId") + '-' + this.colore; tornare Session.get (plantId)? 'Disabilitato' : ''; }});
4.4.6 dati Aggiornamento in una raccolta
Si aggiornano i dati all'interno di una collezione attraverso il Collection.update () funzione. Anche se può modificare uno
o più documenti contemporaneamente quando viene richiamata sul server, il aggiornare() la funzione è limitata a
manipolare un singolo documento in base alla sua _ id
durante l'esecuzione sul lato client. Questo per evitare operazioni di massa accidentali che possono bloccare il server per
tutti gli utenti. Se è necessario aggiornare più di un singolo documento alla volta, è possibile farlo utilizzando metodi lato
server (vedi capitolo 6).
Quando si usa aggiornare(), è necessario specificare che i documenti per l'aggiornamento, come aggiornare loro, ed
eventualmente definire opzioni, così come un callback (con un errore come il primo valore di ritorno e il numero di
documenti interessati come un secondo valore):
Collection.update (selettore, modificatore, opzioni, callback);
Sono disponibili solo due opzioni, che sono entrambi valori booleani:
■ Multi -Il valore predefinito è false; se è impostato su vero, tutti i documenti corrispondenti vengono aggiornati; in caso contrario,
solo la prima partita viene aggiornato.
■ upsert -Il valore predefinito è false; se è impostato su vero, inserisce un nuovo documento se non si trovano
documenti corrispondenti. Chiamare aggiornare() da parte del cliente, è necessario fornire un singolo _ id come primo
argomento. Questo fa parte del primo argomento, che è chiamato il selettore. Può essere sia un oggetto con un _ id attributo
o una stringa che contiene un ID documento valido. Il modificatore utilizza sintassi standard Mongo definire come
modificare i dati presenti. Tabella 4.4 fornisce una panoramica di alcuni degli operatori più comuni. Il seguente
comando aggiorna un documento con un _ id di 12345 e imposta il campo nome a Nome Aggiornato:
Collection.update ({_ id: "12345"}, {$ set: {name: "Aggiornamento Nome"}});

www.it-ebooks.info
NOTA Non tutte le funzionalità disponibili in MongoDB è disponibile in Minimongo, l'implementazione del
client. È possibile controllare il file NOTE all'interno del minimongo Pacchetto per una panoramica delle
attuali limitazioni.
Tabella 4.4 Panoramica dei modificatori aggiornare frequentemente usati per collezioni
operatore di Aggiornamento Descrizione
$ inc Incrementa il valore di un campo della quantità specificata
$ set Imposta il valore di un campo nel documento
$ unset Rimuove un campo dal documento
$ rename Rinomina un campo da un documento
$ addtoSet Aggiunge elementi ad un array se non esistono già
$ spinta Aggiunge un elemento ad un array
$ tirare Rimuove tutti gli elementi dell'array che corrispondono a una query specificata
T EVENTI RIGGERING AGGIORNAMENTI VIA
Finora vi abbiamo mostrato solo come utilizzare Sessione variabili per memorizzare i dati, il che significa che tutti i dati è andato
una volta che la finestra del browser è chiuso o l'utente costringe una ricarica. Per tenere traccia di quando ogni casa è stato
visitato l'ultima volta, si estende il gestore di eventi per memorizzare la data corrente al database. Un campo, lastvisited, sarà
utilizzato all'interno di ciascun Casa
documento. Anche in questo caso, non c'è bisogno di definire la struttura del database prima di poter aggiungere i dati-si può solo
aggiungere un nuovo campo a un documento esistente.
All'interno il file Client.js si estendere il gestore di eventi esistente per il plantDetails modello con due linee
(Listato 4.14). Una nuova variabile chiamata l'ultima visita sarà assegnato un timestamp corrente. Sarà essere
utilizzato nel aggiornare() funzione per il documento corrente. 2 Fate attenzione perché si sta ora si tratta di due ID: uno
per l'impianto e l'altro per la casa. Andiamocene plantId intatta e per l'ID del documento utilizzare il selectedHouseId variabile
di sessione per specificare l'ID nel aggiornare dichiarazione.
Listing 4.14 mappa evento esteso per l'aggiunta di un last-visitato la data
'Click button.water': function (evt) {
var plantId = $ (evt.currentTarget) .attr ( 'data-id'); Session.set (plantId, true); var lastvisit = new
Date (); HousesCollection.update ({
lastvisit contiene un
timestamp corrente.
_ID: Session.get ( "selectedHouseId")}, {
2 L'implementazione del browser Minimongo non supporta il set di funzionalità completo fornito da MongoDB. Là-
ribalta, utilizzando il $ data odierna modificatore non è possibile sul client.

www.it-ebooks.info
$ Set: {
lastvisit: lastvisit}}); }});
Il campo lastvisit all'interno del documento
attualmente selezionato è impostato il
timestamp corrente.
Ogni volta che una delle piante all'interno di una casa è innaffiato ora (cioè, il pulsante Fine si fa clic) il l'ultima visita campo
viene aggiornato. Per verificare che l'aggiornamento avviene, si estende il casa tipo template per visualizzare il valore
di l'ultima visita, come illustrato nel seguente elenco.
Listato 4.15 Aggiunta del l'ultima visita timestamp al casa tipo modello

{{Casa #Con}}
// ... Aggiungere questa riga per
<P> Ultima visita: {{lastvisit}} </ p> // ... {{/ con}} </ template> mostrare il timestamp
memorizzato come lastvisit.
Clic sul pulsante per entrambi impianto disattiva automaticamente il pulsante e aggiornare il timestamp nel database,
come mostrato in figura 4.7.
A causa della compensazione di latenza, il valore nell'istanza Minimongo locale viene aggiornato primo e il
risultato è mostrato immediatamente. Allo stesso tempo, l'aggiornamento viene inviato al server, in cui verrà
persisteva l'ultima data di visita. Se la connessione al
Figura 4.7 Il timestamp viene aggiornato sullo schermo e all'interno del database per ogni clic su un pulsante
Done.

www.it-ebooks.info
server di essere persa, Meteor memorizzerà l'aggiornamento localmente nel browser e inviare di nuovo una volta la connessione viene
ripristinata.
4.4.7 Inserimento di nuovi dati in una raccolta

Come azienda cresce, nuove case sono aggiunti e nuovi documenti devono essere aggiunti a un insieme. In genere
l'aggiunta di documenti viene fatto usando il inserire() funzione. Ogni campo del documento deve essere specificato
singolarmente, e il rapporto qualità-_ id è lasciato fuori perché è assegnato automaticamente dal database:
Collection.insert ({campo: "value"});
L'aggiunta di una nuova casa per la nostra collezione richiede un nuovo modello, così come un'altra mappa evento per attivare
l'inserimento. Nella sezione 4.2.2 si dispone già di impostare un template chiamato
houseForm, che è possibile estendere.
NOTA Non abbiamo ancora discusso di routing, in modo che tutti i modelli vengono visualizzati nella stessa
vista. Anche se si potrebbe usare Sessione per determinare quali modelli mostrare, il metodo preferito
comporta l'uso di un router. Passare al Capitolo 8 per conoscere i principi per l'utilizzo di viste dedicati per
l'editing e la visualizzazione dei dati.
Listato 4.16 mostra la houseForm modello, che consiste in una visione per un documento casa che visualizza tutti i campi
modificabili all'interno di un modulo. Per semplificare le cose, cerchiamo di limitare il modulo per aggiungere un solo impianto
per una casa. 3 Tutti i campi di input saranno identificati dal loro ID.
Listing 4.16 L'aggiunta di nuove case che utilizzano un modulo
<Nome di modello = "houseForm">

<H3> Aggiungi una casa </ h3> <form id
= "houseForm">
Nome <input id = "casa-name" type = "text" segnaposto = "Nome"> <br/> piante
Colore <input id = tipo "pianta-colore" = "text"> Istruzioni <input id = "pianta-istruzioni" type = "text"> <br/>
<Button id = "saveHouse"> Save House </ button> </ form> </ template>
Successivamente, creare una mappa degli eventi per la gestione del modulo (vendita di 4.17). Quando il pulsante per il
modulo viene cliccato, il comportamento predefinito è quello di inviare un modulo e ricaricare una pagina. Perché si sta
implementare le proprie funzionalità per il pulsante, è necessario sopprimere il comportamento predefinito chiamando il preventDefault
() Metodo sull'evento. Utilizzando jQuery, potrai recuperare tutti i valori per i campi di input e li metti in variabili locali.
3 Non si preoccupi; voi presto creare un modo più potente per aggiungere il numero di piante che vuoi.

www.it-ebooks.info
L'ultima riga di codice fa due cose. In primo luogo, si inserisce un nuovo documento con i valori dei campi di input
nella HousesCollection. Che restituisce l'ID del nuovo documento, che viene assegnato al selectedHouseId Session variabile.
In questo modo, l'intera pagina visualizza immediatamente la nuova casa nella visualizzazione di selezione e di
dettaglio.
Listing 4.17 Evento mappa per l'aggiunta di una nuova casa
Template.houseForm.events ({
'Fare clic sul pulsante # saveHouse': function (evt) { Impedisce l'invio del
evt.preventDefault (); modulo e ricaricare la
Recupera i
var houseName = $ ( 'ingresso [id = casa-name]') val ().; var plantColor = $ ( 'ingresso [id = pianta-color]') valpagina
().; . Var
valori di campo
plantInstructions = $ ( 'ingresso [id = pianta istruzioni]') val (); Session.set ( 'selectedHouseId', HousesCollection.insert ({
di ingresso
utilizzando jQuery
Nome: houseName, piante: [{
colore: plantColor,
Inserisce un nuovo documento e
Avviso: plantInstructions}]}));
assegna il valore restituito alla
variabile selectedHouseId
visualizzare immediatamente
// svuotare la forma $ ( 'ingresso') val ( '').; contenuti della nuova
}}); documento
Svuota i campi
del modulo
Questo è solo un modo molto semplice per aggiungere le case che ha diverse carenze. La forma non consente
all'utente di inserire più piante per una casa. Inoltre, la forma è solo in grado di aggiungere nuove case (anche se si
potrebbe facilmente riutilizzarla per consentire la modifica di case esistenti pure). Nella sezione cui è decisivo, potrai
migliorare l'esempio di migliorare queste carenze e refactoring parte del codice per una migliore efficienza. Ma prima
mettiamo gli ultimi ritocchi al CRUD.
4.4.8 Rimozione dei dati da una raccolta
Il passo finale per la piena CRUD 4 funzionalità sta rimuovendo una voce dal database. La relativa funzione è
chiamata rimuovere():
Collection.remove (id);
Simile al aggiornare() metodo, Elimina() richiede un ID univoco per sapere quale documento da rimuovere. Più
documenti possono essere eliminati solo dal server, che vedremo in un po 'quando discuteremo metodi.
4 Create, Read, Update, Delete-un nome comune per le operazioni di base sui dati persistenti

www.it-ebooks.info
Per il codice HTML, tutto quello che dovete fare per consentire per le case da cancellare è quello di aggiungere un
pulsante alla casa tipo modello. Quando il pulsante viene premuto, si identifica la casa con il suo ID. Ci sono almeno tre modi
per fare questo in Meteor:
■ Se il pulsante HTML ha avuto un Dati-id attributo, è possibile interrogare il contenuto nello stesso modo si è
determinato l'ID dell'impianto.
■ Se l'ID casa attualmente selezionato viene memorizzato all'interno del Sessione oggetto, è possibile utilizzare lo stesso
modo che hai fatto il pulsante Fine per l'aggiornamento case.
■ Se il modello ha un contesto di dati che fornisce l'ID, si accedervi direttamente. Abbiamo già coperto i primi
due. Questa volta, l'ID è già parte del contesto di dati in cui il clic evento si svolge. Ciò significa che è possibile
semplificare il modo in cui si stabilisce che il documento da eliminare e scegliere la terza opzione. Il Listato 4.18
mostra come aggiungere il pulsante per il modello.
NOTA Anche se non è necessario, si dovrebbe prendere in considerazione l'aggiunta di un Dati-id attribuire al pulsante
Elimina per fornire alcune tracciabilità per rendere più facile il debug.
Listato 4.18 Aggiunta di un pulsante Elimina per rimuovere le case dal database

{{Casa #Con}}
. . . Aggiungere il
pulsante appena
<Button id = "delete"> Elimina questa casa <button /> {{else}}
prima del tag di altro.
. . .
{{/ Con}} </
template>
Non c'è nessuna mappa evento per il casa tipo modello ancora, quindi facendo clic sui pulsanti non fa nulla. Creiamo
una nuova mappa eventi in Client.js. Profilo 4.19 mostra il codice che esegue essenzialmente Collection.remove (). Ti
avvolge all'interno di una finestra di conferma per impedire agli utenti di case eliminazione accidentale.
Si noti che non c'è bisogno di catturare l'evento e leggere il Dati-id attributo come hai fatto quando si imposta un
impianto in uno stato innaffiato. È possibile accedere direttamente a tutte le informazioni contenute nel documento di
casa attualmente selezionato, tra cui _ id.
Listing 4.19 Evento mappa per l'eliminazione di una casa
Template.showHouse.events ({ Questo è il contesto dati attuali: il

'Fare clic sul pulsante # delete': function (evt) { documento selezionato casa
var id = this._id;
var deleteConfirmation = confirm ( 'davvero eliminare questa casa?'); if (deleteConfirmation) {
Mostra una
finestra di
HousesCollection.remove (id); }}});
Rimuove il conferma prima di
documento dalla poter realmente
raccolta sul client e rimuovere il
server documento

www.it-ebooks.info
Complimenti, siete ora in grado di eseguire tutte le operazioni di dati di base che utilizzano Meteor! Circa 50 righe di
codice HTML e circa 100 righe di JavaScript sono tutto quello che serve. Fai un respiro profondo e pat te sul retro.
Ormai si ha familiarità con l'utilizzo del Sessione oggetto e vari modi per memorizzare, manipolare e recuperare i
dati da un database MongoDB usando Collezione S. Anche se la funzionalità principale di questa applicazione è
presente, avete ancora del lavoro da fare. A seconda delle preferenze, si potrebbe iniziare a garantire l'applicazione
ora, che richiederebbe gli utenti e gli account (vedi capitolo 6). Una seconda opzione potrebbe essere quella di
aggiungere funzionalità di routing per l'applicazione in modo che la forma per l'aggiunta di nuove case non viene
visualizzato sulla stessa pagina i dettagli casa (vedi capitolo 8). Ma dobbiamo affrontare alcune carenze per quanto
riguarda la funzionalità del sito prima applicazione: aggiunta e la rimozione di un numero personalizzato di piante da /
per case esistenti e nuove.
Nel prossimo capitolo, ci passo le cose un po 'adottando un approccio più reattivo di superare i limiti attuali della
nostra applicazione sfruttando principi fondamentali del Meteor di reattività piuttosto che cadere nelle vecchie
abitudini di eseguire manipolazioni DOM complessi utilizzando jQuery.
4.5 Sommario
■ fonti di dati reattivi sono a conoscenza di calcoli dipendenti.

■ contesti reattive consentono funzioni da eseguire nuovamente quando le fonti di dati cambiano.
■ Tracker.autorun () può trasformare qualsiasi funzione in un calcolo reattiva fornendo un contesto reattivo.
■ i dati di breve durata possono essere memorizzati all'interno del negozio di valori-chiave della Sessione oggetto.
■ Persistente dati viene memorizzato in MongoDB Collezione S.
■ Meteor pubblica automaticamente tutti Collezione s per ogni cliente a meno che il autopublish pacchetto viene
rimosso.
■ Entrambi autopublish e insicuro deve essere rimosso prima di mettere un'applicazione in produzione.

www.it-ebooks.info

1.3.1.3 Lab - Mapping The Internet

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

1.3.1.3 Lab - Mapping The Internet

Caricato da

Copyright:

Formati disponibili

MANNING

F REMESSA BY Matt DeBergalis

Licensed to Mark Watson <nordickan@gmail.com>

Licensed to Mark Watson <nordickan@gmail.com>

Sales Department speciale

Shelter Island, NY 11964 e-mail:

© 2016 da Manning Publications Co. Tutti i diritti riservati.

Manning Publications Co. Editor di sviluppo: Dan Maharry

Licensed to Mark Watson <nordickan@gmail.com>

1 ■ Un modo migliore per costruire applicazioni 3

2 ■ Il mio frigo! Un gioco reattivo 31

P ARTE 2 3, 2, 1- IMPACT! .................................................. ....... 49

3 ■ Lavorare con i modelli 51

4 ■ Utilizzo dei dati 76

5 ■ editing completamente reattivo 105

6 ■ Utenti, autenticazioni e autorizzazioni 130

7 ■ Scambio di dati 153

8 ■ Routing utilizzando Iron.Router 176

9 ■ Il sistema dei pacchetti 203

10 ■ metodi di server avanzate 227

P ARTE 3 L on partenza IL CRATERE................................................ 251

11 ■ Costruzione e debugging 253

12 ■ Andando in produzione 281

Licensed to Mark Watson <nordickan@gmail.com>

P ARTE 1 L OOK - UN TIRO STELLA!................................ 1

1 Un modo migliore per costruire

JavaScript 7 Esame nel browser: in esecuzione su piattaforme distribuite 9

1.2 Come funziona Meteor 12

codice del server 17

1.3 Punti di forza e di debolezza 19

1.4 La creazione di nuove applicazioni 24

La creazione di un nuovo progetto 24 Avvio dell'applicazione 25

Licensed to Mark Watson <nordickan@gmail.com>

1.5 dissezione il progetto predefinito 25

2 Il mio frigo! Un gioco reattivo 31

2.2 Configurazione iniziale 32

La creazione di un nuovo progetto 33

2.3 Creazione di un layout 34

2.4 Aggiunta di contenuto al database in tempo reale 38

di un insieme definito di prodotti 43

2.5 Spostamento di elementi in frigo 44

elementi per essere trascinabili 47

2.6 Distribuzione per meteor.com e utilizzando il frigo 48

P ARTE 2 3, 2, 1- IMPACT! ............................................. 49

3 Lavorare con i modelli 51

3.2 Lavorare con i modelli 53

3.3 Creazione di modelli HTML dinamico 55

3.4 Gestione degli eventi 68

comportamento di default del browser 71

3.5 Il ciclo di vita del modello 72

Licensed to Mark Watson <nordickan@gmail.com>

4 Utilizzo dei dati 76

4.2 Costruire un'applicazione house-sitter 82

Configurazione dei modelli 84 Collegamento a un database e dichiarando

4.3 Lavorare con l'oggetto Session 86

Valori 87 La creazione di un contesto reattiva utilizzando Tracker.autorun 89

4.4 Lavorare con MongoDB collezioni 89

L'inizializzazione di un insieme di 93 collezioni Interrogazione 94 i dati di

raccolta di visualizzazione in un modello 95 L'aggiornamento dei dati in una

4.5 Sintesi 104

5 editing completamente reattivo 105

5.3 cambiamenti di gestione temporanea di una raccolta locale di 111

5.4 Visualizzazione dei dati di raccolta all'interno di un modulo 115