[Powered by Google Translate] [Seminari] [framework JavaScript: Perché e Come] [Kevin Schmid] [Harvard University] [Questa è CS50.] [CS50.TV] 

Ciao a tutti. Benvenuti nel Frameworks seminario JavaScript. Il mio nome è Kevin, e oggi ho intenzione di parlare di framework JavaScript, e l'obiettivo di questo seminario non è quello di ottenere che, per dire, padroneggiare un quadro particolare di per sé ma per darvi un'ampia introduzione a un paio di quadri e mostrare perché avremmo mai voluto usare un framework. 

Prima di fare questo, io vi fornirò un po 'di storia in JavaScript, e poi ci prenderemo da lì. Stiamo per iniziare con l'attuazione di un elenco di cose da fare. Ecco la nostra lista compito per oggi. E 'una specie di divertente. Dobbiamo implementare una lista di cose da fare in JavaScript. Questo è quello che sta andando a guardare come, in modo che il nostro primo obiettivo. Non abbiamo intenzione di utilizzare un framework per farlo. Stiamo andando a codice JavaScript e ottenere l'elenco delle cose da fare per lavorare. Poi andremo a migliorare il disegno senza utilizzare un framework. Stiamo andando a discutere di varie cose che possiamo fare con il proprio alone di JavaScript per rendere la nostra to-do list un po 'più ben progettato. Poi andremo a gettare un po 'di jQuery, e poi andiamo a guardare la stessa to-do list, appena implementato in contesti diversi, e ne discuteremo  i pro ei contro, lungo la strada. 

Cominciamo attuazione che a-do list. Diciamo che si sta per fornire questo codice HTML. Ho intenzione di rendere questo un po 'più piccola. Come potete vedere, ho un piccolo colpo di testa che dice Todo e una piccola scatola in cui posso inserire una descrizione di una todo e poi un nuovo pulsante voce, quindi cerchiamo di entrare in un nuovo todo a questa lista. Dare un framework JavaScript seminario, e io sono a colpire nuovo elemento. Ottengo questo alert JavaScript che dice mi implementare. Abbiamo avuto modo di attuarla. Diamo un'occhiata al codice per questo, sia per il codice HTML e JavaScript. Ecco il nostro codice HTML. Come si può vedere qui, qui è il nostro piccolo intestazione Todos. Quello era che cosa grassetto nella parte superiore, e poi abbiamo la casella di immissione con il segnaposto, e poi c'è un certo attributo di questo pulsante che chiama questa funzione addTodo. Qualcuno vuole indovinare ciò che il click è a significare? [Studente risposta incomprensibile] Buono, il sui click è un po 'come un evento, come un clic del mouse è solo un evento, e quello che stiamo facendo è che siamo legando caso di clic su questo pulsante per eseguire tale funzione. AddTodo è questo gestore di eventi per fare clic su tale pulsante. 

Come si può vedere, quando clicco sul pulsante Nuova voce l'evento click sul viene licenziato, e questa funzione viene chiamata. Diamo un'occhiata a funzione. Come si può vedere, ecco il mio codice JavaScript finora. Quello che ho in cima è una struttura dati globale per la mia to-do list. Si presenta come un array. E 'solo un array vuoto. E poi ho la funzione addTodo che abbiamo visto in precedenza, e l'unica riga di codice in c'è questo avviso. Si avvisa mi implementare, e poi ho 2 compiti a portata di mano. Devo aggiungere il todo di quella struttura dati globale, e poi voglio tirare fuori la lista delle cose da fare. Niente di speciale troppo appena ancora, ma JavaScript voi non conoscete, così ho intenzione di andare piano e di rivedere i fondamenti di JavaScript in questo modo. 

Diamo a questo un colpo. Diciamo che l'utente digita qualcosa in questa casella. Ho scritto qualcosa qui, il testo. Come si ordina di accesso che il testo tramite Javascript? Ricorda che JavaScript, una delle sue caratteristiche fondamentali è che essa ci dà questo accesso a livello di DOM. Ci permette di accedere agli elementi e le loro proprietà di questo codice HTML vero e proprio. Il modo in cui lo facciamo con Bare Bones JavaScript è che possiamo effettivamente utilizzare una funzione in JavaScript chiamato GetElementById. Voglio memorizzare il testo che viene digitato lì a qualche variabile, così ho intenzione di dire una nuova variabile chiamata new_todo, e ho intenzione di ottenere tale elemento. Questa è una funzione,. GetElementById. E ora sto diventando un elemento di ID, quindi ho bisogno l'ID di tale casella di testo, così ho dato il new_todo_description ID. Ecco come ho intenzione di ottenere un elemento. Questo è il mio argomento di questa funzione, per specificare quale ID per arrivare. E così questo è un elemento in HTML, ed ha proprietà. Hai visto questi. Sono attributi. L'attributo dell'elemento di testo che memorizza l'input dell'utente viene chiamato valore. Ho salvato il valore della casella di testo, che ora in questa variabile chiamata new_todo. Ora ho l'accesso programmatico a questa variabile, che è genere di freddo perché ora quello che posso fare è che posso aggiungere alla mia to-do list. 

Il modo in cui vorremmo farlo in JavaScript-e non preoccupatevi se non si ha familiarità con questo, ma solo andando attraverso di essa è todos.push perché questo è il nome della mia struttura dati globale quassù, e ho intenzione di spingere new_todo. Ciò è grande perché ora ho aggiunto alla mia JavaScript rappresentazione di quella to-do list. Ma ora come faccio a tornare a il codice HTML? Devo trovare un modo per ordinare di spingerlo indietro. In altre parole, io tipo di devo disegnare questo. Che cosa stiamo andando a fare è che stiamo andando a disegnare la lista delle cose da fare. Ho bisogno di aggiornare altro HTML in quella pagina, e come potete vedere, ho lasciato questo piccolo contenitore qui, questo divisore della pagina il cui ID è todos, e ho intenzione di mettere la lista delle cose da fare lì. In primo luogo ho intenzione di cancellarlo a causa, per esempio, c'era un vecchio to-do list lì. Sto diventando quell'elemento da ID di nuovo, e sto accedendo il codice HTML interno di tale elemento, e ho intenzione di cancellare quella. Se abbiamo lasciato questo codice come è, ci piacerebbe vedere un altro vuoto lì, e ora voglio iniziare a rendere la mia nuova lista di cose da fare. Praticamente sto andando a spazzare via la mia to-do list. 

Ora l'interno HTML interno che todos div è del tutto chiaro, e ora ho bisogno di iniziare ad aggiungere la mia lista. La prima cosa che voglio aggiungere schiena è il tag di lista non ordinata, che denota sostanzialmente che questo è l'inizio di un elenco non ordinato. Ora, per ogni elemento nella mia matrice todos voglio stamparlo all'interno di quel HTML. Voglio aggiungere che al fondo di questa lista. Proprio come in C, posso usare un ciclo for, e ho intenzione di cominciare dall'inizio della mia lista a elemento 0, e ho intenzione di andare fino in fondo alla lunghezza della lista. Si può effettivamente ottenere la lunghezza di un array in JavaScript utilizzando la proprietà length. Fondamentalmente ho intenzione di fare qualcosa di molto simile all'interno di qui per stampare tale elemento. Posso ancora accedere al div todos, la struttura HTML interno che, e ho intenzione di aggiungere su questa nuova voce di elenco, e che sta per essere circondato da questo tag li, e ho intenzione di concatenare con l'operatore +, e questo è l'elemento i-esimo del mio array di Todos, e poi ho intenzione di chiudere il tag. Ora, per ogni elemento si aggiungerà una nuova voce dell'elenco. E poi tutti abbiamo veramente bisogno di fare è chiudere il tag. Ho solo bisogno di chiudere fuori che non ordinato elenco tag. 

Vuoi avere un'idea di come funziona? Questo apre tutta la lista. Questo aggiunge singoli elementi dall'elenco todos alla lista, e poi che chiude l'intera lista, e questa è la mia funzione addTodo. Io fondamentalmente cominciare da ottenere il todo dalla casella di testo. Aggiungo che alla matrice todos, e poi ho ri-renderizzare la lista delle cose da fare. Ora posso aggiungere altri prodotti al mio elenco. Questa è una specie di eccitante, perché in poche righe di codice abbiamo praticamente fatto una lista di cose da fare, dove possiamo aggiungere elementi. Grande. Questo è il genere di una formazione di base di JavaScript. Non preoccupatevi troppo della sintassi, per ora, ma pensare a questo concettualmente. Abbiamo avuto un po 'di HTML. Abbiamo avuto una casella di testo sulla pagina che fondamentalmente permesso agli utenti di inserire una voce to-do di aggiungere. E poi abbiamo utilizzato Javascript per andare a prendere quella todo da quella casella di testo. Abbiamo conservato che dentro una matrice JavaScript, che è fondamentalmente come nostra rappresentazione programmatica che to-do list, e poi abbiamo stampato fuori. Questo è todos.js. 

Questo è il genere di freddo, ma come possiamo fare questo ulteriore? Beh, come potete vedere, questo non è come un completo to-do list. Ad esempio, non riesco a segnare uno qualsiasi di questi elementi come incompleta, come se volessi cambiare la priorità delle voci o eliminare elementi. Questo va bene, ma possiamo prendere questo ulteriore. Io non ho intenzione di parlare troppo di aggiungere funzionalità extra, ma potremmo prendere che ulteriormente. Parliamo di aggiunta di una caratteristica in più a questa to-do list, che sta per essere in grado di controllare un individuo di fare-voce e farlo essere cancellato, in modo sostanzialmente dicendo che ho fatto questo. Diamo un'occhiata a un po 'di codice che potrebbe riuscirci. Notate quello che ho fatto nella parte superiore è ho aggiunto un nuovo array globale chiamato completa. Praticamente sto usando questo per memorizzare se le voci della lista delle cose da fare sono completi o meno. Questo è un modo per fare questo. Se guardo l'attuazione del presente, il display, In pratica se entro in un todo e premo il pulsante di commutazione attraversa fuori, in modo che ogni elemento di questa lista o ha una completa o stato incompleto, e sto usando un altro array per rappresentare questo. 

In pratica per ogni todo in tale matrice todos c'è un elemento dell'array completo che indica fondamentalmente se questa è completa o meno. Ho dovuto fare i cambiamenti piuttosto minimale per questo codice, quindi ecco la nostra funzione addTodo. Si noti che qui sto spingendo sulla matrice, e poi io sto spingendo un 0 a tale matrice completa, sostanzialmente in parallelo con quella nuova spinta todo di dire Sto aggiungendo questa voce, ed è accoppiato con questo valore, il che significa che è incompleto. E poi sto ridisegnando la lista delle cose da fare. Ora, notate ho aggiunto questa funzione drawTodoList. Questo richiede un sacco di codice che avevamo prima, cancella sostanzialmente fuori dalla scatola e poi disegna la nuova to-do list. Ma si noti che all'interno di questo ciclo for stiamo facendo un po 'di più ora. Stiamo fondamentalmente controllando se l'elemento corrispondente al todo esimo qui è completo, e ci stiamo comportando in modo diverso in queste due circostanze. Se è completo, stiamo aggiungendo il tag del, che è fondamentalmente il modo in cui si può ottenere che colpiscono attraverso effetto cancellando la lista delle cose da fare se è completo, e se non lo è, non stiamo includendolo. E così quel tipo di prende cura di questo, 

e questo è un modo per ottenere questo risultato. E poi notare quando l'utente fa clic su uno di questi noi cambiare lo stato di completamento di esso. Quando l'utente fa clic, saremo invertono se è stato completato o non, e poi ci ridisegnare esso. Questo tipo di opere. Abbiamo queste funzioni che svolgono i propri compiti, e questo è bene. C'è qualcosa che possiamo fare meglio di questo, anche se? Notate abbiamo questi due array globali. Se questo era C, e avevamo 2 array quel tipo di rappresentato dati che è stato una sorta di legato in qualche modo cosa potremmo usare in C per combinare questi due campi in qualcosa che racchiude entrambe le informazioni? C'è qualcuno che vuole dare un suggerimento? [Studente risposta incomprensibile] 

Esattamente, così abbiamo potuto utilizzare un qualche tipo di struttura, e se si pensa di nuovo, per dire, pset 3, Ricordo che avevamo dizionario, e poi abbiamo avuto se la parola era presente nel dizionario, e tutte le informazioni che è stato messo insieme all'interno di qualche struttura dati. Una cosa posso fare con questo codice per evitare di avere questi 2 array diversi per pezzi simili di informazioni è che io possa combinare in un oggetto JavaScript. Diamo un'occhiata a questo. Notate ho solo una matrice in alto ora e quello che ho fatto è-e questo è solo la sintassi JavaScript per tipo di creando una versione letterale di un oggetto, e notare ci sono 2 proprietà, in modo da avere il todo, ed è tenuto insieme se è completo o incompleto. Questo codice è molto simile. Stiamo usando gli oggetti JavaScript. Questo genere di cose migliora. Come ora, tutti questi campi di informazioni correlate sono tenuti insieme. Quando andiamo a stamparlo, siamo in grado di accedere ai campi. 

Nota come stiamo facendo todos [i]. Completa invece di controllare la gamma completa separatamente, e notiamo quando vogliamo ottenere la stringa di cose da fare che stiamo ottenendo la proprietà delle cose da fare di che todo, quindi questo tipo di senso perché ogni elemento ha queste proprietà intrinseche riguardo. Ha una todo, e ha se è completa o meno. Non troppi cambiamenti non funzionalmente, appena aggiunto un po 'di più per il codice di. Questo è un miglioramento su alcuni fronti, giusto? Voglio dire, abbiamo fattorizzato il design un po '. Ora abbiamo oggetti per incapsulare fondamentalmente questi dati. C'è qualcosa di più che possiamo fare da qui in termini di JavaScript? Che avviso che questo codice qui per ottenere il codice HTML interno di un div è un po ', credo, a lungo. C'è document.getElementById ("Todos"). InnerHTML. Una cosa che si potrebbe fare per rendere questo codice di guardare un po 'più amichevole in modo da non dover continuare a scorrere a destra ea sinistra, avanti e indietro, è ho potuto utilizzare una libreria come jQuery. 

Diamo un'occhiata Seminario 2, e questo è lo stesso codice, ma è fatto con jQuery. Potrebbe non essere troppo familiarità con jQuery, ma è sufficiente sapere che jQuery è una sorta di libreria per JavaScript che rende più facile fare le cose come accesso singoli elementi del DOM. Qui invece di dire document.getElementById ("Todos"). InnerHTML Posso usare il modo molto più pulito in jQuery, che è solo di utilizzare selettori. Come si può vedere, questo codice ha ottenuto un po 'più pulito, funzionalmente molto simili, ma questa è l'idea. Abbiamo visto un paio di cose fino ad ora, così abbiamo iniziato con la realizzazione di JavaScript solo crudo. Abbiamo aggiunto nuove funzionalità e ha mostrato come possiamo migliorare con proprio quello che abbiamo in JavaScript. 

Qualcuno vede le difficoltà con questo motivo? Vale a dire, immagino, o non necessariamente difficoltà ma diciamo Non stavamo facendo un progetto di to-do list, e domani abbiamo deciso abbiamo voluto fare una lista della spesa o un progetto di lista della spesa. Molte di queste caratteristiche sono molto simili. Un sacco di cose che vogliamo uscire di JavaScript sono molto comuni, e questo sottolinea la necessità di un certo tipo di modo di rendendo questo più facile da fare. Ho dovuto costruire tutto questo accesso HTML, tutto questo accesso DOM, come sto andando a rappresentare la lista delle cose da fare con questo modello. E accorgo io sono responsabile come lo sviluppatore JavaScript per mantenere il codice HTML e JavaScript che ho in sincronia. Nulla di fatto automaticamente che la rappresentazione di JavaScript o la lista delle cose da fare ottenere spinto fuori in HTML. Nulla applicata tranne che per me. Ho dovuto scrivere il sorteggio to-do list funzione. E questo non può essere, voglio dire, è ragionevole per farlo, ma può essere noioso a volte. Se si dispone di un progetto più ampio, che potrebbe essere difficile. 

Frameworks, uno degli scopi di quadri è semplificare questo processo e una sorta di fattore di fuori questi comuni-Credo che si potrebbe dire che i modelli di progettazione che le persone in genere hanno un qualche tipo di modo di rappresentare i dati, se questa è una lista di amici, se questa è informazione mappa o qualcosa del genere o un elenco di cose da fare. Alcune persone hanno in genere un modo di rappresentare le informazioni, e hanno in genere bisogno di mantenere quel tipo di informazioni in sincronia tra ciò che l'utente vede in qualche tipo di vista, parlando in termini di come il Model View Controller che si è visto in conferenza, e poi il modello, che in questo caso è presente matrice JavaScript. Frameworks ci danno un modo per risolvere questo problema. Ora diamo uno sguardo alla realizzazione di questo to-do list in un quadro chiamato angularjs. Questo è quanto. Si noti che si inserisce su una diapositiva. Non devo far scorrere verso sinistra e destra. Che probabilmente non è un buon motivo per raccomandare utilizzando un quadro, ma preavviso sto mai accedere ai singoli elementi HTML qui? Riuscirò mai nel DOM? Vede qualche document.getElementById o qualcosa di simile? No, è andato. 

Angolare ci aiuta a mantenere il DOM e la nostra rappresentazione di qualcosa di JavaScript tipo di in sincronia, quindi se non è nel file js, se non c'è modo di ottenere il livello di programmazione a tutti che il contenuto HTML dalla JavaScript come stiamo tenendo questo in sincronia? Se non è nel file. Js, è avuto modo di essere in formato HTML, giusto? Questa è la nuova versione del file HTML, e notiamo che abbiamo aggiunto un sacco qui. Notate c'è questi nuovi attributi che dicono ng-click e ng-repeat. L'approccio di angolare per risolvere il problema delle difficoltà di progettazione è quello di rendere fondamentalmente HTML molto più potente. Angolare è un modo per consentire di effettuare HTML po 'più espressiva. Per esempio, posso dire che ho intenzione di legare o legare questa casella di testo ad una variabile all'interno del mio codice JavaScript angolare. Questo modello-ng fa proprio questo. Che dice sostanzialmente che l'interno di questa casella di testo oggetto, basta associare che con la new_todo_description variabile all'interno del codice JavaScript. Questo è molto potente, perché non devo andare esplicitamente a il DOM per ottenere tali informazioni. Non ho da dire document.getElementById. Non devo usare jQueries come l'accesso DOM. Posso associarlo ad una variabile, e poi quando cambio la variabile entro JavaScript è tenuto in sincronia con il codice HTML, modo che semplifica il processo di dover andare avanti e indietro tra i due. Ha senso? 

E notare non c'è alcun codice di accesso HTML. Abbiamo appena fatto HTML più potente, e ora, per esempio, siamo in grado di fare cose come questa, come quando si fa clic su questo, chiamare questa funzione nel campo di applicazione todos.js, e abbiamo potuto farlo prima, ma ci sono altre cose, come questo ng-modello, e notare questo ng-repeat. Cosa ne pensi questo fa? Ecco la nostra lista non ordinata da prima. Abbiamo i tag ul, ma sto mai di rendering che elenco all'interno del codice JavaScript? Io non sono mai rendere esplicito tale elenco. Come funziona? Beh, il modo angolare compie questo è questo è chiamato un ripetitore. Fondamentalmente questo dice che voglio stampare questo HTML per ogni todo all'interno della mia matrice todos. All'interno di todos.jr c'è una matrice todos proprio qui, e questo vi dirà go angolare attraverso tale array, e per ogni elemento si vede Voglio di stampare questo codice HTML. Questo è il tipo di impressionante perché posso solo fare questo senza dover scrivere un ciclo for, che per una lista di cose da fare che era solo 30 righe di codice non può essere la cosa più utile, ma se si dispone di un grande progetto, questo potrebbe diventare molto conveniente. 

Questa è una soluzione a questo problema, rendendo HTML più potente, e che ci permette di mantenere JavaScript e HTML in sincronia. Ci sono altri possibili modi per risolvere questo problema, e non ogni quadro fa questo. Non ogni quadro funziona in questo senso. Alcune strutture hanno approcci diversi, e si potrebbe scoprire che ti piace di codifica in un unico quadro sopra l'altro. Diamo un'occhiata a un altro. Questa è la lista delle cose da fare codificato in un quadro chiamato Backbone. Ho intenzione di passare attraverso questa fretta. Comincerò con il codice HTML prima di andare lì. Un secondo. Partendo con il codice HTML, come si nota, il nostro HTML è molto simile a quello che era prima, quindi non troppo nuovo su questo fronte. Ma il nostro file js è un po 'diverso. Backbone tipo di ha questa idea, o si basa sull'idea che un sacco di quello che facciamo, diciamo, con i nostri progetti di JavaScript è pensare a modelli e le collezioni di questi modelli. Questo potrebbe essere, ad esempio, una foto e le collezioni di foto, o l'idea di un amico e collezioni di amici. E spesso quando stiamo programmando applicazioni JavaScript Ci penseremo di rappresentare l'idea di avere una collezione di amici in qualche modo in JavaScript, e Backbone ci dà questo strato sulla cima di array esistenti di JavaScript e oggetti per fare cose più potenti con quella più facilmente. 

Qui ho definito un modello per-do, e non c'è bisogno di preoccuparsi troppo della sintassi, ma si noti che ciò che è una delle proprietà di questo? Essa ha un campo predefinito. Backbone mi permette di specificare già fuori del blocco qualsiasi nuova to-do che creo sta per avere queste impostazioni predefinite. Ora posso personalizzare questo, ma essere in grado di specificare i valori di default è bello, ed è una specie di comodo, perché questo non è qualcosa che è come insita in JavaScript, e ora non ho esplicitamente dicono che i todos sono incompleti. Posso dire a destra fuori del blocco che todos stanno per essere contrassegnato come incompleto. Si noti poi che cosa è questo? Ora ho una lista di cose da fare, e questa è una collezione. Notate il campo associato a tale modello dice todo. Questo è il mio modo di raccontare Backbone che Io vado a pensare a una collezione di questi singoli todos. Questa è sostanzialmente la struttura modello per il mio programma. Qui ho questa idea di una collezione, e in fondo le voci contenute in tale collezione sono tutti per essere tali todos, e che è molto naturale in questo senso perché faccio avere todos, e li ho in una raccolta. 

Diamo un'occhiata a un po 'di più di questo. Ecco una vista Backbone. L'altra cosa che dice è che Backbone un sacco di modelli che stai pensando o anche collezioni avranno bisogno di avere un modo di essere visualizzato. Abbiamo bisogno di rendere quella to-do list, e non sarebbe bello se si potrebbe fornire per ciascun modello o associare a ogni modello di questa visione che ci permette Credo collegare i due insieme? Mentre prima abbiamo dovuto usare un ciclo for che avrebbe eseguito attraverso ogni todo nella nostra lista e poi stamparlo qui possiamo fondamentalmente collegarlo con questo modello. Questa è una vista-do. Questo è associato con il todo abbiamo trovato in precedenza. Ora ogni todo è visualizzabile o renderable da questa cosa da fare vista. Si noti alcuni dei campi. Cosa ne pensi questo tagName è, tagName: li? Ricordate da prima, quando abbiamo voluto rendere un todo ci sarebbe da associare in modo esplicito le nostre todos con questo tag li. Ora stiamo dicendo che dove questa todo sta andando a vivere sta per essere all'interno di un tag li. E ora stiamo anche associare eventi con i nostri todos. 

Ogni todo ha questo evento unico. Se si fa clic su praticamente il pulsante di selezione, che è quello che sto dicendo qui, quindi fondamentalmente segnare il todo come l'opposto di quello che era prima e poi ri-rendere l'applicazione. Questa è una specie di simile al codice precedente. Ricordate quando abbiamo segnato come sia il contrario o- e poi ci siamo ri-reso. Ma bando ora questo evento usato per essere qualcosa che era in HTML. Si era seduto lì. Il pulsante ha un on click. Quando si fa clic sul pulsante, che tipo di fa la roba per istituito che todo di essere incompleta. Qui noi abbiamo associato l'evento di clic su tale pulsante a levetta e inversione se è on o off con questa visione. 

Questo è un bel modo di creare questo evento in modo che è molto strettamente legata questo punto di vista, e così notare questo uno di più. Ho questo metodo di rendering, e non c'è bisogno di passare attraverso i dettagli. È un po 'simile a quello che avevamo prima, ma notato non sto scorrendo nulla. Io non sono la stampa di quel tag ul che è sorta di dire ho intenzione di stampare tutti gli elementi. Sto fornendo la funzionalità per il rendering di questo fare-voce. Questo è un concetto molto potente perché in fondo la nostra to-do list è costituito da tutti questi todos, e se possiamo fondamentalmente specificare il modo di rendere uno di quelli todos allora possiamo avere il nostro potente spina dorsale di per sé rendere tutto il todos chiamando il metodo di rendering sui singoli todos. Un concetto, utile qui. Ora una buona domanda da porsi è come è la candidatura venga messo insieme? Perché abbiamo la capacità di rendere una todo, ma come possiamo ottenere l'idea di molteplici todos? 

Diamo un'occhiata a questo. Questa è l'ultima parte. Notate abbiamo una visualizzazione elenco di cose da fare qui, e notare che è anche un punto di vista. E per andare oltre un paio di cose, questo metodo initialize viene chiamato quando abbiamo prima creato questa lista di cose da fare. Come potete vedere, è come creare la lista delle cose da fare e associandolo con questa visione. E poi ho aggiunto le funzioni qui in modo sostanzialmente quando si aggiunge un elemento- questo è simile al metodo addItem abbiamo visto prima- Ho intenzione di creare un nuovo oggetto todo, e notare realtà sto chiamando questo nuovo metodo di todo, quindi questo è fornito da Backbone, e posso passare le mie proprietà qui. E ora ogni todo che creo usando questo otterrà quella funzionalità che abbiamo visto prima. Notate che sto deselezionando la casella di testo prima-un piccolo piccolo dettaglio- e poi sto aggiungendo questa collezione. 

Questo sembra quasi strano perché prima abbiamo dovuto farlo todos.push, e poi ci hanno fatto, e questo può sembrare più complicato per questo particolare progetto, e si potrebbe scoprire che Backbone o anche angolare o di qualsiasi altro quadro non soddisfare il vostro progetto particolare, ma penso che sia importante pensare che cosa questo significa in una scala più grande per i grandi progetti, perché se avessimo un progetto più ampio in cui stavamo rappresentando qualche collezione davvero complesso, qualcosa di più profondo di un semplice elenco di cose da fare, diciamo che un elenco di amici o qualcosa di simile, questo potrebbe rivelarsi utile perché abbiamo potuto organizzare il nostro codice in un modo davvero conveniente, in un modo che renderebbe più facile per qualcun altro che ha voluto prendere un progetto su cui costruire. Si può vedere che questo fornisce un sacco di struttura. E poi chiamo il rendering su questo addItem. Rendering, come si può vedere, e non c'è bisogno di cogliere questa sintassi completa, ma in fondo per ogni modello che sta per chiamare il metodo di rendering individuale. Questa è una sorta di dove questo proviene. Diciamo basta specificare come eseguire il rendering dei singoli todos, e poi cerchiamo di incollare insieme nel suo complesso. Ma questo è un modo di astrazione, perché ho potuto cambiare il modo in cui ho deciso di rendere le singole todos, e non vorrei cambiare nulla di tutto questo codice. Questo è genere di freddo. 

Qualcuno ha domande su framework JavaScript? [Studente domanda incomprensibile] Oh, certo, che è una grande domanda. Il problema era come ho fatto a includere i quadri? La maggior parte dei framework JavaScript sono fondamentalmente solo file js che è possibile includere nella parte superiore del vostro codice. Avviso nella porzione di testa di mia HTML ho tutti questi tag di script, e il tag script finale è il codice che abbiamo scritto. E poi i codici quadro 3 sono solo anche i tag script. Li sto anche da quello che viene chiamato un CDN, che mi permette di ottenere da qualcun altro, a questo punto ma ogni quadro è questo: si può tranquillamente trovare il contenuto per una particolare libreria Javascript disponibile su alcuni CDN o qualcosa di simile, e quindi è possibile includere questi tag script. Ha senso? Freddo. 

Quelli sono due diversi approcci. Quelli non sono gli unici approcci per risolvere questo problema. Ci sono molte cose diverse che qualcuno potrebbe fare, e ci sono molti quadri là fuori. Angolare e Backbone non raccontare tutta la storia. Buona fortuna con i progetti finali, e la ringrazio molto. [CS50.TV]