[Powered by Google Translate] [Seminar] [Cadrele JavaScript: De ce și cum] [Kevin Schmid] [Universitatea Harvard] [Aceasta este CS50.] [CS50.TV] 

Hi, toata lumea. Bine ați venit la seminar cadre JavaScript. Numele meu este Kevin, și astăzi am de gând să fie vorba despre cadrele JavaScript, și scopul acestui seminar nu este de a ajunge la, să zicem, comandantul unui cadru special pe sine dar pentru a vă oferi o introducere largă pentru un cuplu de cadre și arată de ce ne-ar dori vreodată să utilizați un cadru. 

Înainte de a face acest lucru, voi oferi un pic de fond de JavaScript, și apoi vom lua de acolo. Vom începe prin punerea în aplicare a unei liste a-do. Iată lista noastră de sarcini pentru ziua de azi. E un fel de amuzant. Trebuie să pună în aplicare o lista de-a face în JavaScript. Aceasta este ceea ce se va arăta, așa că e primul nostru obiectiv. Noi nu suntem de gând să utilizeze un cadru pentru a face acest lucru. Vom cod JavaScript și pentru a obține lista de probleme de la locul de muncă. Apoi, vom îmbunătăți designul fără a utiliza un cadru. Vom discuta despre diverse lucruri pe care le putem face doar cu JavaScript singur pentru a face noastre de a-do list un pic mai bine concepute. Apoi, vom arunca în unele jQuery, si apoi ne vom uita la acelasi să-do list, doar implementate în cadre diferite, și vom discuta  argumente pro și contra de-a lungul drum. 

Să începem de punere în aplicare care să-do list. Să presupunem că suntem dat acest cod HTML. Am de gând să facă acest lucru un pic mai mic. După cum puteți vedea, am un antet mic care spune Todo și o cutie mica unde pot introduce o descriere a unei todo și apoi un buton nou element, astfel încât să încercați să introduceți un nou todo la această listă. Oferă un seminar cadre JavaScript, și eu sunt la lovit element nou. I a lua această alertă JavaScript care spune aplicare mine. Trebuie să-l pună în aplicare. Să verificăm codul pentru aceasta, atât HTML și JavaScript. Iată HTML nostru. După cum puteți vedea aici, aici e antet micul nostru Todos. Asta a fost chestia aia îndrăzneț în partea de sus, și apoi ne-am caseta de intrare cu substituent, și apoi există un anumit atribut al acestui buton care solicită această funcție addTodo. Vrea cineva să ghicească ceea ce pe clic este ceea ce înseamnă? [Student răspuns inaudibil] Bine, pe clic este ca un fel de eveniment, ca făcând clic pe mouse-ul este doar un eveniment, și ceea ce facem noi este ne leagă cazul clic pe acest buton pentru a executa această funcție. AddTodo este acest handler eveniment pentru a face clic pe acel buton. 

După cum puteți vedea, atunci când faceți clic pe butonul element nou evenimentul click pe e concediat, iar această funcție se numește. Să ne uităm la funcția. După cum puteți vedea, aici e codul meu JavaScript pana acum. Ce am în partea de sus este o structură de date la nivel mondial pentru lista mea de a-face. Se pare ca o matrice. Este doar un array gol. Și apoi am funcția addTodo că am văzut mai devreme, și singura linie de cod în există această alertă. Acesta avertizează aplicare mine, iar apoi am 2 sarcini la îndemână. Trebuie să adăugați Todo la care structura de date la nivel mondial, și apoi Vreau să atrag pe lista de To-Do. Nimic prea fantezist doar încă, dar de activarea JavaScript-ați putea fi familiarizat cu, așa că am de gând să merg încet și să revizuiască fundamentele de activarea JavaScript-în acest mod. 

Să-i dăm o șansă. Să presupunem că utilizatorul introduce ceva în această casetă. Am scris ceva aici, text. Cum pot rezolva de acces care textului prin intermediul JavaScript? Amintiți-vă că JavaScript, una din caracteristicile sale fundamentale este că ne dă acest acces programatic la DOM. Ea ne permite să acceseze elemente și proprietățile lor de acest cod HTML reale. Modul în care facem asta cu oasele goale JavaScript Este putem folosi de fapt, o funcție în JavaScript numit getElementById. Vreau pentru a stoca textul care este introdus acolo în unele variabile, așa că am de gând să spun o nouă variabilă numită new_todo, și am de gând pentru a obține acel element. Aceasta este o funcție,. GetElementById. Și acum Primesc un element de identitate, asa ca am nevoie de ID-ul de care casetă de text, asa ca am dat new_todo_description ID-ul. Asta e modul în care am de gând pentru a obține un element. Asta e argumentul meu la această funcție, pentru a specifica ID-ul pentru a obține. Si pentru ca este un element de HTML, si are proprietati. Ai văzut astea. Sunt atribute. Atributul de element de text care stochează intrarea utilizatorului se numește valoare. Am salvat valoarea care caseta de text acum în această variabilă numită new_todo. Acum am acces programatic la această variabilă, care este un fel de rece pentru că acum ceea ce pot face este să pot adauga la lista mea de-a face. 

Felul în care ne-ar face acest lucru în JavaScript și nu vă faceți griji dacă nu sunteți familiarizat cu acest lucru, ci doar trece prin ea este todos.push pentru că e numele structura mea de date la nivel mondial aici, și am de gând pentru a împinge new_todo. Acest lucru este mare, deoarece acum eu l-am adăugat la JavaScript meu reprezentare de care să-do list. Dar acum nu stiu cum l înapoi la HTML? Trebuie să găsesc o cale de a sorta de împingeți-o înapoi. Cu alte cuvinte, am un fel de trebuie să elaboreze acest lucru. Ceea ce am de gând să faceți este să mergem să atragă pe lista de rezolvat. Am nevoie pentru a actualiza alte HTML pe acea pagină, și după cum puteți vedea, am lăsat acest recipient mic aici, acest divizor de pagini ale cărei identitate este Todos, și am de gând să pună pe lista de rezolvat acolo. În primul rând am de gând să-l clar, deoarece, spune, a existat un vechi de a-do list acolo. Primesc acest element de identitate din nou, și eu sunt accesarea HTML interioară a acestui element, și am de gând să clar că. Dacă am lăsat acest cod cum este, am vedea un nimic gol acolo, și acum vreau să încep redarea noua mea listă a-face. Eu practic de gând să șteargă lista mea de a-face. 

Acum interior HTML interiorul că todos div este complet clară, și acum am nevoie pentru a începe adăugarea lista mea. Primul lucru pe care vreau să adăugați înapoi este neordonate tag-ul lista, care, practic, denotă că acesta este începutul unei liste neordonate. Acum, pentru fiecare element în meu tablou todos vreau să-l imprimați interiorul că HTML. Vreau să-l adăugați pe la partea de jos a acestei liste. La fel ca în C, pot folosi o pentru buclă, și am de gând să înceapă de la începutul lista mea la elementul 0, și am de gând să merg tot drumul la lungimea listei. Putem obține de fapt, durata de o serie de activarea JavaScript folosind proprietatea lungime. Practic am de gând să fac ceva foarte asemănător în interiorul de aici pentru a imprima acel element. Eu pot accesa din nou div Todos, proprietatea interioară HTML de care, și am de gând să adăugați la acest nou element din listă, și care va fi înconjurat de această etichetă Li, și am de gând să înlănțui cu operatorul +, și că este elementul-lea al meu matrice Todos, și apoi am de gând să închidă acea etichetă. Acum, pentru fiecare element, vom adăuga o nouă înregistrare în lista. Și apoi tot avem cu adevărat nevoie să faceți este să închidă acea etichetă. Am nevoie doar pentru a inchide care neordonate tag-ul lista. 

Nu veți obține o simt pentru modul în care funcționează? Acest lucru deschide întreaga listă. Aceasta adaugă elemente individuale din lista de Todos la lista, și apoi că închide întreaga listă, iar acest lucru este funcția mea addTodo. Eu practic începe prin obtinerea de probleme de rezolvat din caseta de text. Am adăuga că la matrice Todos, iar apoi am re-face lista pentru a-face. Acum pot adăuga elemente la lista mea. Aceasta este un fel de interesanta, deoarece în doar câteva linii de cod ne-am făcut de fapt o listă de-a face în cazul în care putem adăuga elemente. Mare. Asta e un fel de introducere de bază pentru JavaScript. Nu vă faceți griji prea mult despre sintaxa de acum, dar cred că despre acest punct de vedere conceptual. Am avut unele HTML. Am avut o casetă de text pe pagina care de fapt a permis utilizatorilor sa intrare un element de a-face pentru a adăuga. Și apoi am folosit JavaScript pentru a aduce acel Todo din acea casetă de text. Am depozitat ca într-un tablou JavaScript, care este de fapt ca reprezentarea noastră programatic de care să-do list, și apoi l-am imprimat. Aceasta este todos.js. 

Aceasta este un fel de misto, dar cum putem lua acest lucru mai departe? Ei bine, după cum puteți vedea, acest lucru nu este ca un complet de a-do list. De exemplu, eu nu pot marca oricare dintre aceste elemente fi incomplete, cum ar fi dacă am vrut să reprioritize elementele sau șterge elemente. Acest lucru este în regulă, dar putem lua acest lucru în continuare. Eu nu am de gând să vorbesc prea mult despre adăugarea de caracteristici suplimentare, dar am putea lua ca departe. Să vorbim despre adăugarea o caracteristică mai mult la acest lucru pentru a-do list, care va fi posibilitatea de a verifica un individ de a-do element și l-au barează, astfel încât, practic spui că am făcut asta. Să ne uităm la unele cod care ar putea realiza acest lucru. Observați ce am făcut în partea de sus e că am adăugat un nou tablou global numit complet. Sunt practic folosind acest pentru a stoca dacă elementele de pe listă pentru a-do sunt complete sau nu. Aceasta este o modalitate de a face acest lucru. Dacă mă uit la punerea în aplicare a acestei, pe ecran, practic, dacă am introduce un memento și apăsați acest buton de comutare se trece afară, astfel încât fiecare punct de pe această listă are nici o complet sau de stat incomplete, și eu sunt, folosind o matrice a reprezenta. 

Practic pentru fiecare todo în care matrice todos există un element în matrice complet, care de fapt indică dacă acesta este complet sau nu. Am avut de a face schimbari destul de minime la acest cod, Deci, aici este funcția noastră addTodo. Observați că aici eu sunt împingându-l pe matrice, și apoi mă împinge un 0 pentru care gama completa, practic, în paralel cu acest nou impuls todo să spun Sunt adăugarea acestui element, și este cuplat cu această valoare, ceea ce înseamnă că este incomplet. Și apoi am redesenarea lista a-do. Acum, observa am adăugat această funcție drawTodoList. Acest lucru are o mulțime de cod am avut-o înainte, practic șterge din cutie și apoi atrage noi să-do list. Dar observa că în interiorul de acest lucru pentru bucla facem un pic mai mult acum. Suntem practic verifica dacă elementul corespunzător Todo lea aici este completă, iar noi te comporți diferit în aceste două condiții. Dacă e complet, vom adăuga această etichetă del, care este de fapt modul în care se poate obține ca greva prin efect trecere în lista de-a face în cazul în care este complet, și dacă nu e, nu suntem o include. Și astfel acest tip de are grijă de faptul că, 

și că este o modalitate de a realiza acest lucru. Și apoi observați atunci când utilizatorul face clic pe unul dintre acestea am comuta starea de completare a acestuia. Când utilizatorul face clic, vom inversa dacă acesta a fost încheiat sau nu, și apoi vom redesenare. Acest tip de lucrări. Avem aceste funcții care desfășoară propriile sarcini, și acest lucru este în regulă. Este ceva ce am putea face mai bine cu privire la acest lucru, deși? Observați avem aceste două tablouri la nivel mondial. În cazul în care acest lucru a fost C, și am avut două tablouri care fel de reprezentate date care a fost un fel de legătură într-un fel ceea ce ne-ar folosi în C pentru a combina aceste 2 domenii în ceva care incapsuleaza ambele bucăți de informații? Vrea cineva să facă o sugestie? [Student răspuns inaudibil] 

Exact, așa că am putea folosi un fel de struct, și dacă te gândești înapoi la, să zicem, PSET 3, amintesc că am avut dicționar, iar apoi am avut dacă cuvântul a fost în dicționar, și toate că informațiile au fost puse împreună în interiorul unor structuri de date. Un lucru pot face cu acest cod pentru a evita aceste două tablouri diferite pentru piese similare de informații sunt eu pot să le combine într-un obiect JavaScript. Să aruncăm o privire la asta. Observați Am doar un singur element în partea de sus acum și ceea ce am făcut este, și acest lucru este doar sintaxa JavaScript pentru fel de creând o versiune literală a unui obiect, și observați există două proprietăți, așa că avem probleme de rezolvat, și este ținut, împreună cu, dacă este complet sau incomplet. Acest lucru este foarte asemănătoare cod. Suntem folosind obiecte JavaScript. Acest tip de lucruri se imbunatateste. La fel ca acum, toate aceste domenii de informații legate sunt ținute împreună. Când mergem să-l imprimați, putem accesa câmpurile. 

Observați cum facem todos [i]. Complet în loc de a verifica matrice complet separat, si observa atunci când doriți să obțineți șir de-a face primim proprietatea de a-do de care Todo, astfel încât acest tip de sens, deoarece fiecare element are aceste proprietăți intrinseci despre asta. Ea are un memento, și are dacă este complet sau nu. Nu prea multe schimbări acolo funcțional, a adăugat doar ceva mai mult la codul. Aceasta este o imbunatatire pe unele fronturi, nu? Adică, am luat în design un pic. Acum avem de obiecte pentru a ingloba practic aceste date. Este ceva mai mult am putea face de aici, din punct de vedere JavaScript? Plăcea că acest cod aici pentru obtinerea de HTML interioară a unui div este un pic, cred, mult timp. Există document.getElementById ("Todos"). InnerHTML. Un lucru pe care am putea face pentru a face acest cod arata un pic mai prietenos așa că nu ar trebui să țină defilare la stânga și la dreapta, înainte și înapoi, Este aș putea folosi o bibliotecă ca jQuery. 

Să verifica afară Seminar 2, iar acest lucru este acelasi cod, dar sa terminat cu jQuery. Este posibil să nu fi prea familiarizat cu jQuery, dar știu doar că jQuery este un fel de bibliotecă pentru JavaScript care face mai ușor de a face lucruri, cum ar fi elemente individuale de acces ale DOM. Aici, în loc de a spune document.getElementById ("Todos"). InnerHTML Eu pot folosi modul mult mai curat în jQuery, care este doar de a folosi selectorii. După cum puteți vedea, acest cod a obține un pic mai curat, foarte similare funcțional, dar asta e ideea. Am văzut o serie de lucruri până acum, așa că am început cu implementarea doar crud JavaScript. Am adăugat caracteristici noi și a arătat cum o putem îmbunătăți cu doar ceea ce avem în JavaScript. 

Are cineva vedea orice probleme cu acest design? Și anume, cred, sau nu neapărat dificultăți, dar să spunem nu am fost a face un proiect de listă a-face, și mâine ne-am decis am vrut sa facem o lista de cumparaturi sau a unui proiect de listă de cumpărături. O mulțime de aceste caracteristici sunt foarte asemănătoare. O mulțime de lucrurile pe care vrem să ieșim din JavaScript sunt foarte frecvente, iar acest lucru subliniaza nevoia de un fel de cale de face acest lucru mai ușor să faci. Am avut de a construi toate din acest acces HTML, tot acest acces DOM, ca am de gând să reprezinte pe lista de-a face cu acest model. Și observa eu ​​sunt responsabil ca dezvoltator JavaScript pentru păstrarea HTML și JavaScript că am în sincronizare. Nimic nu a făcut în mod automat că reprezentarea JavaScript sau lista pentru a-face împinși afară de HTML. Nimic aplicate că în afară de mine. Am avut de a scrie trage de-a face funcția de lista. Și că nu poate fi, vreau să spun, e rezonabil să faci asta, dar poate fi plictisitor uneori. Dacă aveți un proiect mai mare, care ar putea fi dificil. 

Cadre, unul dintre scopurile de cadre este de a simplifica acest proces și fel de factor de aceste comune-Cred ca ai putea modele spune-proiectare că oamenii au, în general, un fel de mod de reprezentare de date, fie că este o listă de prieteni, indiferent dacă este vorba harta informații sau ceva sau o listă a-face. Unii oameni au, în general, o modalitate de a reprezenta informații, și, în general, au nevoie de a păstra ca un fel de informații în sincronizare între ceea ce utilizatorul vede într-un fel de vedere, vorbind din punct de vedere, cum ar fi modelul de vedere controller care ai văzut în curs, și apoi modelul, care în acest caz este această matrice JavaScript. Cadrele ne da o cale de a rezolva această problemă. Acum, haideți să aruncăm o privire la punerea în aplicare a acestei to-do list într-un cadru numit angularjs. Asta este. Observați că se potrivește pe un diapozitiv. Nu trebuie pentru a defila la stânga și la dreapta. Care, probabil, nu este un motiv de mare pentru a recomanda utilizarea unui cadru, dar notificare am accesați vreodată elemente HTML individuale de aici? Am vreodată în DOM? Nu vedeți orice document.getElementById sau ceva de genul asta? Nu, e plecat. 

Unghiular ne ajuta sa tinem DOM și reprezentarea noastra JavaScript de ceva un fel de în sincronizare, deci, dacă nu este în js, Dacă nu există nici o modalitate de a obține în mod programatic la tot ce conținut HTML de JavaScript cum vom păstrarea în sincronizare? Dacă nu este în js., N-are să fie în HTML, corect? Aceasta este noua versiune a fișierului HTML, si observa am adăugat o mulțime aici. Observați există aceste atribute noi, care spun ng-clic și ng-repeat. Abordarea unghiular de la rezolvarea acestei probleme de dificultăți în proiectare este de a face de fapt HTML mult mai puternic. Unghiular este o modalitate de a permițându-vă pentru a face HTML ceva mai expresiv. De exemplu, eu pot să spun că am de gând să-și lege sau lega această casetă de text la o variabilă în codul meu JavaScript unghiular. Acest ng model nu doar asta. Care practic spune că în interiorul acestei casete un articol de text, doar asociat care cu new_todo_description variable în codul JavaScript. Asta e foarte puternic, pentru că nu trebuie să merg în mod explicit la DOM pentru a obține aceste informații. Nu am să spun document.getElementById. Nu trebuie să utilizeze jQueries cum ar fi accesul DOM. Pot să-l asocia cu o variabilă, și apoi când am schimba acea variabila în activarea JavaScript este ținut în sincronizare cu HTML, astfel încât simplifică procesul de a avea pentru a merge înainte și înapoi între cele două. Are vreun sens? 

Și observa nu exista nici un cod de acces HTML. Ne-am făcut doar HTML mult mai puternic, și acum, de exemplu, putem face lucruri de genul asta, ca atunci când faceți clic pe aceasta, numesc această funcție în domeniul de aplicare al todos.js, și am putea face asta înainte, dar există alte lucruri, cum ar fi acest ng-model, si observa acest ng-repeat. Ce crezi că face? Iată lista noastră de neordonate de înainte. Avem etichetele ul, dar am redare vreodată că lista interiorul codului JavaScript? Eu nu sunt niciodată făcând în mod explicit această listă. Cum face acest lucru? Ei bine, modul în care unghiulară realizeaza acest lucru este aceasta se numește un repetor. Practic aceasta spune că vreau să imprimați acest HTML pentru fiecare in Todo a mea matrice Todos. In interiorul todos.jr există o gamă Todos chiar aici, și acest lucru va spune du-te unghiular prin care matrice, și pentru fiecare element pe care îl vedeți Vreau să imprimați acest cod HTML. Aceasta este un fel de minunat pentru că eu pot face doar acest lucru fără a fi nevoie să scrie o pentru buclă, care, pentru o listă a-face că a fost doar 30 de linii de cod nu poate fi cel mai benefic, dar dacă aveți un proiect mare, acest lucru ar putea ajunge foarte comod. 

Aceasta este o soluție pentru această problemă, făcând HTML mai puternic, și care ne permite să păstreze JavaScript și HTML în sincronizare. Există și alte modalități posibile de a rezolva această problemă, și nu fiecare cadru face acest lucru. Nu orice cadru de lucrări de-a lungul acestor linii. Unele cadre au abordări diferite, și ați putea găsi că vă bucurați de codificare într-un cadru pe de altă parte. Să ne uităm la unul mai mult. Aceasta este lista de-a face codificate într-un cadru numit coloana vertebrală. Am de gând să treacă prin această repede. Voi începe cu HTML înainte de a merge acolo. O secundă. Începând cu HTML, cum observați, HTML noastra este foarte asemănător a ceea ce a fost înainte, așa că nu prea mult noi pe acest front. Dar dosarul nostru JS este un pic diferit. Tip coloana vertebrală a are această idee, sau se bazează pe ideea că o mulțime de ceea ce facem cu, să zicem, proiectele noastre JavaScript se gândească modele si colectii ale acestor modele. Acest lucru ar putea fi, de exemplu, o fotografie și colecții de fotografii, sau ideea de un prieten și colecții de prieteni. Și de multe ori când suntem programare aplicatii JavaScript vom rezolva din reprezintă ideea de a avea o colecție de prieteni într-un fel în JavaScript, și coloana vertebrală ne dă acest strat pe partea de sus de tablouri și obiecte existente Javascript pentru a face lucrurile mai puternice cu care mai ușor. 

Aici am definit un model pentru a-do, și nu trebuie să vă faceți griji prea mult despre sintaxa, dar observați că ceea ce este una dintre proprietățile de acest lucru? Ea are un câmp implicit. Coloana vertebrală îmi permite să specificați deja pe bat orice nou de-a face, care pot crea va avea aceste valori implicite. Acum pot personaliza acest lucru, dar fiind capabil de a specifica valorile implicite este frumos, și este un fel de convenabil, deoarece acest lucru nu este ceva care e ca inerente în JavaScript, iar acum nu am în mod explicit spune că todos sunt incomplete. Pot să spun right off BAT, care todos vor fi marcate ca fiind incompletă. Observați atunci ce este asta? Acum am o lista de-a face, și că este o colecție. Observați domeniul asociate cu care spune că modelul de todo. Acesta este felul meu de a spune că Backbone Am de gând să se gândească la o colecție de aceste todos individuale. Aceasta este, în principiu structura model pentru programul meu. Aici am această idee de-o colecție, și practic elementele cuprinse în această colecție sunt toate vor fi aceste Todos, și că este foarte natural în acest sens pentru că eu nu am Todos, și le-am într-o colecție. 

Să ne uităm la un pic mai mult de acest lucru. Aici este o vedere Backbone. Un alt lucru pe care coloana vertebrală spune este că o mulțime de modele care te gandesti sau chiar colecții sunt de gând să trebuie să aibă un mod de a fi afișate. Avem nevoie de a face că, pentru a-do list, și nu ar fi frumos dacă am putea oferi pentru fiecare model sau asociat cu fiecare model de acest punct de vedere care ne permite să Cred conecta cele două împreună? În timp ce înainte am avut de a folosi o buclă care ar fi, prin fiecare todo în lista noastră și apoi imprima aici putem conecta practic cu acest model. Aceasta este o vedere de a-face. Aceasta este asociat cu probleme de rezolvat am găsit mai devreme. Acum, fiecare todo se fi afișat sau renderable prin aceasta să-rezolvat. Observați unele câmpuri. Ce crezi că tagName este, tagName: Li? Amintiți-vă din urmă, când ne-am dorit pentru a face un todo ne-ar trebui pentru a asocia în mod explicit todos noastre cu această etichetă Li. Acum ne spune că în cazul în care acest lucru todo se întâmplă să trăiască va fi in interiorul unui tag Li. Și acum suntem asociind, de asemenea, evenimente cu todos noastre. 

Fiecare todo are acest eveniment. Dacă faceți clic destul de mult butonul de comutare, asta e ceea ce vreau să spun aici, apoi marchează practic Todo ca opusul a ceea ce a fost înainte și apoi re-face aplicație. Aceasta este un fel de similar codului înainte. Amintiți-vă atunci când am marcat, fie ca opusul sau, și apoi l-am re-prestate. Dar observa acum acest eveniment folosit pentru a fi ceva care a fost în HTML. Ea stătea acolo. Butonul a avut o pe clic. Când faceți clic pe butonul, este un fel de face lucruri pentru a stabilit că Todo a fi incomplete. Aici ne-am asociat acestui eveniment de clic, care buton de comutare și de mers înapoi dacă este pornit sau oprit cu acest punct de vedere. 

Acesta este un mod frumos de a înființa acest eveniment, astfel că este foarte strâns legat la acest punct de vedere, și așa observa asta mai mult. Eu am aceasta metoda Render, iar noi nu trebuie să treacă prin detalii. Este un fel de similar cu ceea ce am avut înainte, dar observa Nu looping prin nimic. Eu nu sunt de a imprima eticheta ul asta e un fel de a spune am de gând să imprima toate elementele. Sunt oferind funcționalitatea pentru a face acest o să-do element. Acesta este un concept foarte puternic, deoarece, practic Lista noastră de-a face cuprinde toate aceste Todos, și dacă putem specifica practic modalitate de a face una dintre cele todos atunci putem avea coloana vertebrala nostru puternic în sine face toate todos apelând metoda de randare pe todos individuale. Acesta este un concept care este util aici. Acum, o întrebare bună care se pune este cum este aceasta cerere de a fi puse împreună? Pentru ca avem capacitatea de a face o Todo, dar cum ajungem la ideea de mai multe todos? 

Să aruncăm o privire la asta. Aceasta este ultima parte. Observați avem o vedere lista de-a face aici, și observați este, de asemenea, un punct de vedere. Și pentru a trece peste o serie de lucruri, această metodă Initialize va fi numit atunci când vom crea mai întâi această listă pentru a-do. După cum puteți vedea, e ca si cum crearea listei de rezolvat și asocierea acesteia cu acest punct de vedere. Și apoi am adăugat funcțiile aici Deci, practic, atunci când adăugați un element- acest lucru este similar cu metoda addItem am văzut înainte- Am de gând să creeze un nou obiect Todo, și observați eu sunt de fapt sun această nouă metodă Todo, deci acest lucru este prevăzut de coloana vertebrală, și eu pot trece în proprietățile mele aici. Și acum fiecare todo care am creat-o folosind acest lucru va primi ca funcționalitatea pe care am văzut înainte. Observați Sunt de compensare în caseta de text înainte de-un mic mic detaliu- și apoi adaug această colecție. 

Acest lucru pare aproape ciudat pentru că înainte am avut doar de a face acest lucru todos.push, și apoi ne-au făcut, iar acest lucru poate părea mai complicat pentru acest proiect special, și ați putea găsi că coloana vertebrală sau chiar unghiulare sau orice alt cadru nu se potrivi cu proiectul dvs. special, dar cred că este important să ne gândim ce înseamnă acest lucru pe o scară mai largă pentru proiecte mai mari, pentru că dacă am avut un proiect mai mare care ne-au reprezentat unele de colectare într-adevăr complex, ceva mai mult decât o listă de-a face, Să spunem că un lista de prieteni sau ceva de genul asta, acest lucru ar putea veni la îndemână pentru că am putea organiza codul nostru într-un mod foarte convenabil, într-un mod care ar face mai usor pentru altcineva care a vrut să ridice un proiect pentru a construi pe. Puteti vedea că acest lucru oferă o mulțime de structuri. Și apoi am sunat face pe acest addItem. Face, după cum puteți vedea, și nu trebuie să profite de această sintaxă complet, dar în principiu pentru fiecare model se va apela metoda Render individuale. Asta e un fel de unde vine asta. Să specifica doar cum să facă de Todos individuale, și apoi să le lipiți ca un întreg. Dar acest lucru oferă un mod de abstractizare, pentru că am putea schimba modul în care am decide ca Todos individuale, și nu ar trebui să schimbe orice din acest cod. Asta e un fel de misto. 

Are cineva are întrebări cu privire la cadrele JavaScript? [Student întrebare inaudibil] Oh, sigur, că este o întrebare mare. Întrebarea era cum am includ cadre? Cele mai multe cadre JavaScript sunt de fapt doar js pe care le pot include în partea de sus a codului. Observați în partea șefului HTML meu am toate aceste tag-uri script-ul, și tag-ul script-ul final este codul pe care l-am scris. Si apoi cele 3 coduri cadru sunt doar, de asemenea, tag-uri script. Eu le-inclusiv la ceea ce se numește un CDN, care-mi permite să-l lua de la altcineva în acest moment dar fiecare cadru are acest lucru, puteți găsi destul de mult conținut pentru o anumită bibliotecă JavaScript disponibil pe unele CDN sau ceva de genul asta, și apoi puteți include aceste tag-uri script. Are vreun sens? Rece. 

Acestea sunt două abordări diferite. Cei care nu sunt singurele abordări la rezolvarea acestei probleme. Există multe lucruri diferite pe care cineva ar putea face, și există multe cadre acolo. Unghiulare și coloana vertebrală nu spun întreaga poveste. Mult noroc cu proiectele finale, și vă mulțumesc foarte mult. [CS50.TV]