[Powered by Google Translate] [Seminar] [Kornizat JavaScript:? Pse dhe Si] [Kevin Schmid] [Universiteti i Harvardit] [Kjo është CS50.] [CS50.TV] 

Hi, të gjithë. Mirë se vini në seminarin Kornizat JavaScript. Emri im është Kevin, dhe sot unë jam duke shkuar për të folur për kornizat JavaScript, dhe qëllimi i këtij seminari nuk do të merrni ju në, të themi, të zotëruar një kuadri të veçantë në vetvete por për të ju jap një hyrje të gjerë për një çift të kornizave dhe të tregojnë pse ne do të ndonjëherë të dëshironi të përdorni një kornizë. 

Para se unë bëj këtë, unë do të sigurojë një sfond të vogël në JavaScript, dhe pastaj ne do të marrë atë nga atje. Ne jemi duke shkuar për të filluar duke zbatuar një listë për të-bërë. Këtu është lista jonë detyrë për sot. Kjo është lloj i funny. Ne duhet të zbatojë një listë për të-bërë në JavaScript. Kjo është ajo që ajo do të duken si, kështu që është qëllimi ynë i parë. Ne nuk jemi duke shkuar për të përdorur një kornizë për të bërë këtë. Ne jemi duke shkuar për kodit JavaScript dhe për të marrë për të bërë listë për të punuar. Pastaj ne jemi duke shkuar për të përmirësuar hartimin pa përdorur një kornizë. Ne jemi duke shkuar për të diskutuar gjëra të ndryshme që mund të bëjmë vetëm me JavaScript vetëm të bëjë tonë për të bërë listë pak më mirë të projektuar. Pastaj ne jemi duke shkuar për të hedhur në disa jQuery, dhe atëherë ne do të shikojmë në të njëjtën kohë të-bërë lista, zbatohet vetëm në kornizat e ndryshme, dhe ne do të diskutuar  mirat dhe të këqijat gjatë rrugës. 

Le të fillojë zbatimin që për-bërë lista. Le të thonë se ne jemi të dhënë këtë HTML. Unë jam duke shkuar për të bërë këtë një pak më të vogël. Siç mund ta shikoni, unë kam një kokë të vogël që thotë Todo dhe një kuti të vogël ku unë mund të jepni një përshkrim të një Todo dhe pastaj një buton i ri artikull, kështu që le të përpiqet për të hyrë në një todo të re në këtë listë. Dërgo një seminar kornizat JavaScript, dhe unë jam për të goditur artikull i ri. Unë marrë këtë alarm JavaScript që thotë zbatojë mua. Ne kemi marrë për ta zbatuar atë. Le të shikoni kodin për këtë, si HTML dhe JavaScript. Ja HTML tonë. Siç mund ta shikoni këtu, këtu është pak tonë todos header. Kjo ishte gjëja që guximshme në krye, dhe pastaj ne kemi kutinë e input me placeholder, dhe pastaj ka një atribut të caktuar të këtij butonin që quan këtë addTodo funksion. A ka dikush doni të me mend se çfarë on click është nënkuptuar? [Student përgjigje padëgjueshme] Të mira, klikoni në është lloj i si një ngjarje, si klikuar të miut është vetëm një ngjarje, dhe çfarë jemi duke bërë është që ne jemi të lidhur ngjarjen e klikuar këtë buton për të ekzekutuar atë funksion. AddTodo është kjo mbajtës ngjarje për të klikuar atë buton. 

Siç mund ta shikoni, kur klikoj butonin Temë e Re ngjarja klikoni mbi suspendohet, dhe ky funksion merr quajtur. Le të shikojmë në funksion. Siç mund ta shikoni, këtu është kodi im deri tani JavaScript. Ajo që unë kam në krye është një strukturë globale të dhënave për për-bërë listën time. Ajo duket si një rrjet. Kjo është vetëm një koleksion bosh. Dhe atëherë unë kam funksionin addTodo që pamë më herët, dhe linja e vetme e kodit në atje është kjo vigjilent. Ajo alarme zbatojë mua, dhe atëherë unë kam 2 detyra në dorë. Unë kam për të shtuar todo asaj globale strukturën e të dhënave, dhe pastaj unë dua për të nxjerrë jashtë listës për-bërë. Asgjë shumë të dashuroj vetëm ende, por JavaScript që ju mund të jenë të panjohura me, kështu që unë jam duke shkuar për të shkuar të ngadaltë dhe të rishikojë bazat e JavaScript në atë mënyrë. 

Le të jap këtë një e shtënë. Le të thonë se përdoruesi hyn diçka në këtë kuti. I shtypur thjesht diçka këtu, në tekst. Si mund unë lloj i qasjes se teksti përmes JavaScript? Mos harroni se JavaScript-in, një nga karakteristikat e tij themelore është se ai na jep kjo qasje programatike për DOM. Kjo na lejon për të hyrë në elementet dhe pronat e tyre të kësaj HTML aktuale. Mënyra që ne bëjmë me eshtra të zhveshur JavaScript është që ne mund të përdorni të vërtetë një funksion në JavaScript quajtur getElementByID. Unë dua të ruajtur tekstin që është shtypur atje në disa ndryshore, kështu që unë jam duke shkuar për të thonë se një variabël të re të quajtur new_todo, dhe unë jam duke shkuar për të marrë atë element. Ky është një funksion,. GetElementByID. Dhe tani unë jam duke marrë një element me ID, kështu që kam nevojë ID e asaj kutinë e tekstit, kështu që unë kam dhënë atë new_todo_description ID. Kjo është se si unë jam duke shkuar për të marrë një element. Kjo është argumenti im në këtë funksion, të përcaktojë se cila ID për të marrë. Dhe kështu që është një element në HTML, dhe ajo ka veti. Ju keni parë këto. Ata janë atribute. Atribut i elementit tekstit që ruan kontributin e përdoruesit quhet vlerë. I shpëtuam vlerën e asaj kutinë e tekstit tani në këtë ndryshore të quajtur new_todo. Tani unë kam qasje programatike në këtë variabël, që është lloj i ftohtë sepse tani se çfarë unë mund të bëj është që unë mund të shtoni atë në për-bërë listën time. 

Mënyra se ne do të bëjmë këtë në JavaScript-dhe mos u shqetësoni nëse ju jeni të panjohur me këtë, por vetëm duke kaluar nëpër këtë është todos.push sepse kjo është emri i sime strukturën globale të dhënave deri këtu, dhe unë jam duke shkuar për të nxitur new_todo. Kjo është e madhe, sepse tani kam shtuar atë në JavaScript tim përfaqësimi i që për-bërë lista. Por tani si mund ta merrni atë përsëri në HTML? Unë duhet të gjejnë një mënyrë për të zgjidhur të shtyjë atë përsëri. Me fjalë të tjera, unë lloj i duhet të tërheqë këtë. Ajo që ne jemi duke shkuar për të bërë është që ne jemi duke shkuar për të nxjerrë në listë për-bërë. Unë kam nevojë për të rinovuar HTML tjera në këtë faqe, dhe si ju mund të shihni, unë kam lënë këtë enë të vogël këtu, kjo ndarës i faqes cilit ID është todos, dhe unë jam duke shkuar për të vënë në listë për-bërë atje. Së pari unë jam duke shkuar për të pastruar atë për shkak se, të themi, ka qenë një i vjetër për të bërë listë atje. Unë jam duke marrë atë element nga ID përsëri, dhe unë jam i qasjes në HTML brendshme të atij elementi, dhe unë jam duke shkuar për të pastruar atë. Nëse ne e kemi lënë këtë kod siç është, ne do të shohim një gjë bosh atje, dhe tani unë dua të fillojë dhënien listë të re time për-bërë. Unë jam në thelb do të fshijë për-bërë listën time. 

Tani brenda brendshme HTML e atij div todos është plotësisht e qartë, dhe tani kam nevojë për të filloni duke shtuar listën time. Gjëja e parë që unë dua të shtoj përsëri është tag listë të parenditur, e cila në thelb tregon se ky është fillimi i një listë të parenditur. Tani për çdo element në todos array tim unë dua të shtypura it out në brendësi të asaj HTML. Unë dua të append atë në fund të kësaj liste. Ashtu si në C, unë mund të përdorni një për lak, dhe unë jam duke shkuar për të filluar në fillim të listës sime element në 0, dhe unë jam duke shkuar për të shkuar gjatë gjithë rrugës për gjatësinë e listës. Ne fakt mund të merrni gjatësinë e një grup në JavaScript duke përdorur pronën gjatësi. Në thelb unë jam duke shkuar për të bërë diçka shumë të ngjashme brenda këtu për të printuar jashtë atë element. Unë mund të hyni përsëri div todos, pronën e brendshme HTML e se, dhe unë jam duke shkuar për të shtuar këtë artikull në listën e re, dhe se do të jenë të rrethuar nga ky tag li, dhe unë jam duke shkuar për të lidh me operatorin +, dhe kjo është elementi i ith todos array tim, dhe atëherë unë jam duke shkuar për të mbyllur atë etiketë. Tani për çdo element ne do të shtoni një hyrje të re listë. Dhe atëherë të gjithë ne me të vërtetë duhet të bëni është mbyllur jashtë atë etiketë. Unë vetëm nevojë për të mbyllur off se parenditur tag list. 

A ju merrni një të ndjehen për mënyrën se si që punon? Ky hap gjithë listën. Kjo shton elementet individuale nga lista todos në listë, dhe pastaj që mbyll të gjithë listën, dhe ky është funksioni im addTodo. Unë në thelb të fillojë me marrjen e todo nga kutinë e tekstit. Unë shtoj se të array todos, dhe pastaj ri-bëjnë listën e të-bërë. Tani unë mund të shtoni artikujt në listën time. Kjo është lloj i emocionuese, sepse në vetëm disa rreshta të kodit ne kemi bërë në thelb një listë për të-bërë, ku ne mund të shtoni artikujt. Great. Kjo është lloj i një hyrje themelore për JavaScript. Mos u shqetësoni shumë për sintaksë për tani, por mendoj se për këtë konceptualisht. Ne kishim disa HTML. Ne patëm një kuti teksti në faqen që lejoi përdoruesit të input në thelb një artikull për-bërë të shtoni. Dhe pastaj ne kemi përdorur JavaScript për të shkoj të marr atë todo nga ajo kutinë e tekstit. Ne që ruhen brenda një array javascript, e cila është në thelb si Përfaqësimi ynë programatike që i për-bërë lista, dhe pastaj ne të shtypura it out. Kjo është todos.js. 

Kjo është lloj i ftohtë, por si mund të marrim këtë më tej? E pra, si ju mund të shihni, kjo nuk është si një komplet të-bërë lista. Për shembull, unë nuk mund të shënojë ndonjë nga këto objekte si të paplotë, si në qoftë se unë të kërkuar për të reprioritize artikuj ose fshirë objekte. Kjo është në rregull, por ne mund të marrë këtë të mëtejshme. Unë nuk jam duke shkuar për të folur shumë rreth duke shtuar veçori shtesë, por ne mund të marrë atë më tej. Le të flasim për duke shtuar një tipar më shumë për këtë për-bërë lista, e cila do të jetë të qenit në gjendje për të kontrolluar një individ për të-bërë pika dhe e kanë atë të kalohet jashtë, kështu që në thelb duke thënë se unë e kam bërë këtë. Le të shikojmë në disa kodin që mund të përmbushur këtë. Vini re atë që unë kam bërë në krye është Unë kam shtuar një koleksion të ri të quajtur globale të plotë. Unë jam në thelb duke përdorur këtë për të ruajtur nëse sendet në listën e To-A janë të plota ose jo. Kjo është një mënyrë për të bërë këtë. Nëse unë shoh në zbatimin e kësaj, ekranit, në thelb në qoftë se unë të hyjë në një todo dhe unë shtypni këtë buton toggle ajo kalon jashtë, kështu që çdo send në këtë listë ka as një të plotë shtetërore apo të paplota, dhe unë jam duke përdorur një tjetër grup për të përfaqësuar atë. 

Në thelb për çdo Todo në atë rrjet todos ka një artikull në grup të plotë që në thelb tregon nëse kjo është e plotë apo jo. Unë kam pasur për të bërë ndryshime mjaft minimale këtij kodi, kështu që këtu është funksioni ynë addTodo. Vini re që këtu unë jam i shtyjnë atë mbi array, dhe atëherë unë jam shtyrë një 0 në atë grup të plotë, në thelb paralelisht me atë shtytje të re TODO për të thënë Unë jam duke shtuar këtë artikull, dhe kjo është shoqëruar me këtë vlerë, që do të thotë se është e paplotë. Dhe atëherë unë jam rivizatim listën e të-bërë. Tani, vini re unë kam shtuar këtë funksion drawTodoList. Kjo merr një shumë të kodit kishim para, në thelb pastron nga kuti dhe pastaj tërheq të ri të-bërë lista. Por vini re se brenda kësaj për lak ne jemi duke bërë një pak më shumë tani. Ne jemi në thelb të kontrolluar nëse pika që korrespondon me Todo ith këtu është i plotë, dhe ne jemi të sillet ndryshe në këto rrethana 2. Nëse është e plotë, ne jemi duke shtuar këtë tag del, e cila në thelb është mënyra që ju mund të merrni atë grevë nëpërmjet efektit kalimit nga lista për-bërë, nëse është e plotë, dhe në qoftë se kjo nuk është, ne nuk jemi duke e përfshirë atë. Dhe kështu kjo lloj kujdeset që, 

dhe kjo është një mënyrë për të arritur këtë. Dhe pastaj vini re kur përdoruesi klikimeve një nga këto ne toggle statusin përfundimit të saj. Kur përdoruesi klikon, ne do të kundërt nëse ajo është përfunduar apo jo, dhe pastaj ne do të shlyen atë. Ky lloj i punimeve. Ne kemi këto funksione që kryejnë detyrat e tyre, dhe kjo është në rregull. A ka ndonjë gjë që ne mund të bëjmë më mirë në lidhje me këtë, pse? Vini re që ne kemi këto 2 vargjeve globale. Nëse kjo ishte e C, dhe ne kishim 2 vargjeve se lloj i përfaqësuar Të dhënat që ishte lloj i lidhur në një farë mënyre çfarë do që ne përdorim në C për të kombinuar këto 2 fusha në diçka që encapsulates dy pjesë të informacionit? Çdokush doni të bëni një sugjerim? [Student përgjigje padëgjueshme] 

Pikërisht, kështu që ne mund të përdorin disa lloj struct, dhe në qoftë se ju mendoni përsëri në, të themi, pset 3, mos harroni kishim fjalorin, dhe pastaj kemi pasur nëse fjala ishte në fjalor, dhe të gjitha që informacioni u vënë së bashku brenda disa strukturën e të dhënave. Një gjë unë mund të bëj me këtë kod, për të shmangur që këto 2 vargjeve të ndryshme për copa të ngjashme të informacionit është që unë mund të kombinohen ato në një objekt JavaScript. Le të hidhni një sy në këtë. Njoftim Kam vetëm një koleksion në krye tani dhe atë që unë kam bërë është-dhe kjo është vetëm sintaksa JavaScript për lloj duke krijuar një version literal të një objekti, njoftim dhe ka 2 prona, kështu që ne kemi todo, dhe ajo është mbajtur së bashku me nëse kjo është e plotë ose të paplota. Ky është kodi shumë të ngjashme. Ne jemi duke përdorur objekte JavaScript. Ky lloj i gjërave të përmirësohet. Ashtu si tani, të gjitha këto fusha të informacionit lidhur mbahen së bashku. Kur ne shkojmë për të shtypura it out, ne mund të hyni fushat. 

Vini re se si ne jemi duke bërë todos [I]. Plotë në vend të kontrolluar koleksion të plotë veç e veç, dhe vini re, kur ne duam të marrë string për të bërë-ne jemi duke marrë pasurinë e të-bërë e atij TODO, kështu që ky lloj i ka kuptim, sepse çdo send ka këto veti të perceptuar në lidhje me të. Ajo ka një todo, dhe ajo ka nëse kjo është e plotë apo jo. Jo shumë shumë ndryshime atje funksionalisht, vetëm shtuar disa më shumë për kodin. Ky është një përmirësim në disa fronte, e drejtë? Unë do të thotë, ne faktorizohen nga hartimin e një grimë. Tani ne kemi objekte të encapsulate thelb këto të dhëna. A ka ndonjë gjë më shumë ne mund të bëjmë nga këtu në drejtim të JavaScript? Ashtu si njoftim se ky kod të drejtë këtu për marrjen e HTML e brendshme e një div është pak, unë mendoj, të gjatë. Ka document.getElementById ("todos"). InnerHTML. Një gjë që ne mund të bëni për të bërë këtë kod duket pak miqësore kështu që unë nuk do të duhet të mbajë scrolling majtë dhe të djathtë, mbrapa dhe me radhë, është që unë mund të përdorni një bibliotekë si jQuery. 

Le të shikoni Seminar 2, dhe ky është kodi i njëjtë, por ajo është bërë me jQuery. Ju mund të mos jetë shumë e njohur me jQuery, por vetëm e di se jQuery është lloj i një bibliotekë JavaScript për që e bën më të lehtë për të bërë gjëra të tilla si elemente të veçanta qasjen e DOM. Këtu në vend të thënë document.getElementById ("todos"). InnerHTML Unë mund të përdorin rrugën shumë më të pastra në jQuery, e cila është vetëm për të përdorur selectors. Siç mund ta shikoni, ky kod ka marrë një pastruese pak, shumë të ngjashme funksionalisht, por kjo është ideja. Ne kemi parë një çift të gjëra deri më tani, kështu që kemi filluar me implementimin e vetëm të papërpunuara JavaScript. Ne kemi shtuar karakteristika të reja dhe tregoi se si ne mund të përmirësojmë atë me vetëm atë që kemi në JavaScript. 

A ka dikush të shoh ndonjë vështirësi me këtë dizajn? Gjegjësisht, unë mendoj apo jo-domosdoshmërisht vështirësi, por le të themi ne nuk ishin duke bërë një projekt për të bërë listë, dhe nesër ne kemi vendosur ne të kërkuar për të bërë një listë ushqimore ose një listë pazar projekt. Një shumë nga këto karakteristika janë shumë të ngjashme. Një shumë nga gjërat që ne duam të dalim nga JavaScript janë shumë të zakonshme, dhe kjo nënvizon nevojën për një lloj i mënyrës së duke e bërë këtë më të lehtë për të bërë. Unë kisha për të ndërtuar gjithë këtë qasje HTML, tërë këtë qasje DOM, si unë jam duke shkuar për të përfaqësuar në listë për-bëjnë me këtë model. Dhe vini re unë jam përgjegjës si zhvilluesi JavaScript për mbajtjen e HTML dhe JavaScript që kam në sync. Asgjë nuk bëhet automatikisht se përfaqësimi JavaScript ose për të bërë listë të merrni shtyrë në HTML. Asgjë nuk zbatohen se përveç për mua. Unë kisha për të shkruar barazim për të-bërë lista funksion. Dhe kjo nuk mund të jetë-Unë do të thotë, është e arsyeshme për të bërë këtë, por ajo mund të jetë i lodhshëm ndonjëherë. Nëse ju keni një projekti më të madh, që mund të jetë e vështirë. 

Kornizat, një nga qëllimet e kornizave është për të lehtësuar këtë proces dhe lloj të faktorit jashtë këto zakonshme-I guess ju mund të thonë-design modelet që njerëzit në përgjithësi kanë një lloj mënyrë për të përfaqësojnë të dhënat, nëse kjo është një listë e miq, nëse kjo është informacioni hartë apo diçka, ose një për-bërë lista. Disa njerëz kanë përgjithësisht një mënyrë për të përfaqësuar informacion, dhe ata në përgjithësi kanë nevojë për të mbajtur atë lloj informacioni të në sync midis asaj që sheh përdoruesi në një lloj të mendimit, duke folur në kushtet e si kontrollues view modelit që ju keni parë në leksion, dhe pastaj modeli, e cila në këtë rast është kjo array JavaScript. Kornizat na japin një mënyrë për të zgjidhur këtë problem. Tani le të marrin një vështrim në zbatimin e kësaj për-bërë listën në një kuadër të quajtur angularjs. Kjo është ajo. Vini re se kjo i përshtatet në një rrëshqitje. Unë nuk duhet të lëvizni në të majtë dhe të djathtë. Kjo ndoshta nuk është një arsye e madhe për të rekomandojë duke përdorur një kornizë, Njoftimi por jam unë ndonjëherë qasja elementet individuale HTML këtu? Unë jam duke shkuar kurrë në DOM? A shihni ndonjë document.getElementById ose diçka të tillë? Jo, kjo është e shkuar. 

Këndor na ndihmon të mbani DOM dhe JavaScript përfaqësimin tonë të diçkaje lloj në sync, kështu që nëse ajo nuk është në dosjen js, në qoftë se nuk ka asnjë mënyrë për të marrë programuar për të gjithë përmbajtjen që HTML nga JavaScript sesi jemi duke mbajtur këtë në sync? Nëse nuk është në dosje. Js, ai e mori të jetë në HTML, e drejtë? Ky është versioni i ri i skedar HTML, dhe vini re ne kemi shtuar një shumë këtu. Vini re ka këto atribute të reja që thonë se ng-click dhe ng-përsëritur. Qasja këndor për zgjidhjen e këtij problemi të vështirësive në hartimin është në thelb të bëjë shumë më të fuqishme HTML. Këndor është një mënyrë për të lejuar ju që të bëni HTML disi më ekspresive. Për shembull, unë mund të them se unë jam duke shkuar për të lidhë ose ta detyrojë këtë kutinë e tekstit në një variabël brenda kodit këndor tim JavaScript. Kjo ng-model e bën vetëm se. Kjo në thelb thotë se pika brenda këtij kutinë e tekstit, vetëm që e lidhin me new_todo_description ndryshueshme brenda kodit JavaScript. Kjo është shumë e fuqishme, sepse unë nuk kanë për të shkuar në mënyrë eksplicite DOM për të marrë këtë informacion. Unë nuk kam për të thënë document.getElementById. Unë nuk kam për të përdorur jQueries si qasje DOM. Unë mund të shoqërojnë atë me një ndryshore, dhe pastaj kur unë të ndryshojë që të ndryshueshme brenda JavaScript ajo është mbajtur në sync me HTML, kështu që thjeshton procesin e të pasurit për të shkuar mbrapa dhe me radhë në mes të dy. A ka kuptim që e bëjnë? 

Dhe nuk ka asnjë njoftim Kodi HTML qasje. Ne kemi bërë vetëm HTML më të fuqishme, dhe tani, për shembull, ne mund të bëjmë gjëra të tilla si kjo, si kur ju klikoni mbi këtë, telefononi këtë funksion brenda fushëveprimit të todos.js, dhe ne mund ta bëjë këtë më parë, por ka gjëra të tjera, si ky modeli-shqip, dhe këtë njoftim ng-përsëritje. Çfarë mendoni se e bën këtë? Këtu është lista jonë e renditura nga më parë. Ne kemi tags UL, por unë jam bërë ndonjëherë atë listë brenda kodit JavaScript? Unë nuk jam kurrë në mënyrë eksplicite pasqyrim atë listë. Si e bën këtë punë? E pra, mënyra këndor realizon këtë është kjo quhet një përsëritës. Në thelb kjo thotë se unë dua të printuar këtë HTML për çdo Todo brendësi të todos array tim. Brenda todos.jr ka një koleksion të todos të drejtë këtu, dhe kjo do të tregojë këndor shkojnë nëpër atë grup, dhe për çdo element që ju shihni Unë dua që ju të shtypura këtë HTML. Kjo është lloj i tmerrshëm, sepse unë vetëm mund ta bëjë këtë pa pasur nevojë për të shkruar një për lak, e cila për një listë të-bërë që ishte vetëm 30 rreshta të kodit nuk mund të jetë gjëja më e dobishme, por në qoftë se ju keni një projekt të madh, kjo mund të merrni shumë i përshtatshëm. 

Kjo është një zgjidhje për këtë problem, duke e bërë më të fuqishme HTML, dhe që na lejon të mbani JavaScript dhe HTML në sync. Ka mënyra të tjera të mundshme për të zgjidhur këtë problem, dhe jo çdo kornizë e bën këtë. Jo çdo kuadri punon përgjatë këtyre linjave. Disa kornizat kanë qasje të ndryshme, dhe ju mund të gjeni se ju të gëzojnë kodim në një kuadër mbi tjetrin. Le të shikojmë në një më shumë. Kjo është për-bërë lista e koduar deri në një kuadër të quajtur Backbone. Unë jam duke shkuar për të shkuar nëpër këtë shpejt. Unë do të fillojë me HTML para se të shkojmë atje. Një sekondë. Duke filluar me HTML, si ju njoftim, HTML ynë është shumë i ngjashëm në atë që ishte më parë, kështu që nuk është shumë i ri në këtë front. Por fotografinë js ynë është pak më ndryshe. Lloj shtylla kurrizore e ka këtë ide, ose bazohet në idenë se një shumë të asaj që ne bëjmë me të, të themi, JavaScript tanë projekte po mendoj rreth modeleve dhe koleksione të këtyre modeleve. Kjo mund të jetë, për shembull, një foto dhe koleksione të fotografive, apo ideja e një mik dhe koleksionet e miqve. Dhe shumë herë kur ne jemi programimin e aplikimeve JavaScript ne do lloj të përfaqësojnë idenë e të paturit e një koleksion të miqve fare mënyre në JavaScript, dhe Backbone na jep këtë shtresë në krye të vargjeve ekzistuese JavaScript-së dhe objekteve të për të bërë gjëra më të fuqishme me atë më të lehtë. 

Këtu unë kam përcaktuar një model për-bërë, dhe ju nuk keni për t'u shqetësuar shumë rreth sintaksës, por vini re se ajo është një nga vetitë e kjo? Ajo ka një fushë default. Backbone lejon mua që të specifikojë tashmë off bat ndonjë të re për të-bërë që unë të krijojë do të ketë këto standarte. Tani unë mund të rregulloje këtë, por duke qenë në gjendje të përcaktojë standarte është e bukur, dhe kjo është lloj i përshtatshëm, sepse kjo nuk është diçka që është si qenësishme në JavaScript, dhe tani unë nuk kanë për të në mënyrë eksplicite thonë se todos janë të plota. Unë mund të them të drejtën off bat që todos do të të shënohet si i paplotë. Njoftim atëherë çfarë është kjo? Tani unë kam një listë të-bërë, dhe kjo është një koleksion. Njoftim fushën lidhur me që thotë se modeli todo. Kjo është rruga ime e thënë shtyllës kurrizore që Unë jam duke shkuar për të të menduarit në lidhje me një koleksion të këtyre todos individuale. Kjo është në thelb struktura model për programin tim. Këtu unë kam këtë idenë e një koleksion, dhe në thelb sende të përfshira në atë koleksion jemi të gjithë do të jenë këto todos, dhe se është shumë e natyrshme në këtë kuptim sepse unë nuk kanë todos, dhe unë kam ato në një koleksion. 

Le të shikojmë në një pak më shumë për këtë. Këtu është një pamje Backbone. Gjë tjetër që Backbone thotë është se një shumë prej modeleve që ju jeni duke menduar rreth saj ose edhe koleksionet do të duhet të ketë disa mënyra e duke u shfaqur. Ne duhet të bëjnë që për-bërë lista, dhe nuk do të jetë mirë nëse ne mund të sigurojë për çdo model ose shok me çdo model këtë pikëpamje që na lejon të mendoj lidhë dy së ​​bashku? Ndërsa para se të kishte për të përdorur një për lak që do të kandidojë përmes çdo todo në listën tonë dhe pastaj të shtypura it out këtu Ne thelb mund të lidheni atë me këtë model. Kjo është një për-bërë view. Kjo lidhet me Todo kemi gjetur më parë. Tani çdo todo është displayable ose renderable me këtë për-bërë pikëpamje. Vini re disa nga fushat. Çfarë mendoni se kjo tagName është, tagName: li? Të ruaj të para, kur ne të kërkuar për të marrë një todo ne do të duhet të në mënyrë eksplicite palë todos tanë me këtë tag li. Tani ne jemi duke thënë se ku kjo todo është duke shkuar për të jetuar do të jetë në brendësi të një tag li. Dhe tani ne jemi edhe shoqërimin ngjarjet me todos tona. 

Çdo todo ka këtë ngjarje një. Nëse ju klikoni pretty much butonin toggle, kjo është ajo që unë jam duke thënë atje, atëherë në thelb të shënojë todo si e kundërta e asaj që ishte më parë dhe pastaj ri-bëjnë kërkesën. This është lloj i ngjashëm me kodin e para. Mos harroni kur kemi shënuar atë si as kundërta or- dhe pastaj kemi ri-dhënë atë. Por vini re tani këtë ngjarje përdorur të jetë diçka që ishte në HTML. Ai ishte ulur atje. Button kishte një klikoni mbi. Kur ju klikoni butonin, ajo lloj i bën sende për ngritur që todo të jenë të paplota. Këtu ne kemi lidhur atë ngjarje të klikuar butonin toggle dhe të përmbysur nëse kjo është në ose off me këtë pikëpamje. 

Kjo është një mënyrë e mirë për ngritjen e kësaj ngjarje në mënyrë që ajo është shumë e lidhur fort kësaj pikëpamjeje, dhe kështu me këtë njoftim një më shumë. Unë kam këtë metodë render, dhe ne nuk duhet të kalojnë nëpër detaje. Kjo është lloj i ngjashëm me atë që kishim para, por vini re unë nuk jam looping përmes asgjë. Unë nuk jam shtypjen që tag ul që është lloj i thënë se unë jam duke shkuar për të shtypur të gjitha elementet. Unë jam duke ofruar funksionalitet për dhënien këtë një për-bërë pika. Ky është një koncept shumë i fuqishëm, sepse në thelb Lista e të-bërë ynë përbëhet nga të gjitha këto todos, dhe në qoftë se ne në thelb mund të specifikojë mënyrë që të merr njërin prej atyre todos atëherë ne mund të kemi boshtin tonë të fuqishëm në vetvete merr të gjitha të todos duke telefonuar metodën e dhënë mbi todos individuale. Ky është një koncept që është e dobishme këtu. Tani një pyetje e mirë është për të pyetur se si është kjo kërkesë u vënë së bashku? Sepse ne kemi mundësinë që të merr një todo, por si nuk kemi marrë idenë e todos shumta? 

Le të hidhni një sy në këtë. Kjo është pjesa e fundit. Vini re ne kemi një pamje të-bërë lista këtu, dhe vini re kjo është gjithashtu një pikëpamje. Dhe për të shkuar mbi disa gjëra, kjo metodë nisja do të quhet kur ne së pari të krijojë këtë listë për të-bërë. Siç mund ta shikoni, kjo është si krijimin e listës për-bërë dhe shoqërimin atë me këtë pikëpamje. Dhe pastaj kam shtuar funksionet këtu kështu që në thelb, kur ju të shtoni një artikull- kjo është e ngjashme me metodën addItem pamë para- Unë jam duke shkuar për të krijuar një objekt të ri TODO, dhe vini re unë jam në të vërtetë duke bërë thirrje Ky i ri metodë todo, kështu që kjo është dhënë nga shtylla kurrizore, dhe unë mund të kalojë në pronat e mia këtu. Dhe tani çdo todo që unë krijoj përdorur këtë do të merrni atë funksionalitetin që pamë para. Njoftim unë jam pastrimin nga kutinë e tekstit para-pak më të vogël detaje dhe atëherë unë jam duke shtuar këtë koleksion. 

Kjo pothuajse duket i çuditshëm, sepse para se ne vetëm kishte për të bërë atë todos.push, dhe pastaj ne ishim bërë, dhe kjo mund të duket shumë e komplikuar për këtë projekt të veçantë, dhe ju mund të gjeni se shtylla kurrizore apo edhe këndor ose çfarëdo kornize tjera nuk i përshtaten projektit tuaj të veçantë, por unë mendoj se është e rëndësishme që të mendojnë për Çfarë kjo do të thotë në një shkallë më të madhe për projekte më të mëdha, sepse në qoftë se kemi pasur një projekt të madh ku ne ishim përfaqëson disa koleksion të vërtetë komplekse, diçka më e thellë se vetëm një listë të-bërë, le të themi një listë miqtë apo diçka të tillë, kjo mund të vijë në volitshëm sepse ne mund të organizojë kodin tonë në një mënyrë të vërtetë i përshtatshëm, në një mënyrë që do ta bënte më të lehtë për dikë tjetër që donte të marr një projekt për të ndërtuar mbi të. Ju mund të shihni se kjo siguron një shumë të strukturës. Dhe atëherë unë jam duke e quajtur bëjnë në këtë addItem. Render, si ju mund të shihni, dhe ju nuk keni për t'a përdorur këtë sintaksë të plotë, por në thelb për çdo model është duke shkuar për të thirrur metodën individuale render. Kjo është lloj i ku kjo vjen nga. Le të vetëm të specifikojë se sa që të merr todos individuale, dhe pastaj le të zam ata së bashku si një e tërë. Por kjo siguron një mënyrë të abstraksionit, sepse unë mund të ndryshojë mënyrën se si unë të vendosë që të merr todos individuale, dhe unë nuk do të duhet të ndryshojë ndonjë të këtij kodi. Kjo është lloj i ftohtë. 

A ka dikush ndonjë pyetje në lidhje me kornizat JavaScript? [Pyetja Student padëgjueshme] Oh, i sigurt, kjo është një pyetje e madhe. Pyetja ishte si nuk kam përfshijnë kornizat? Kornizat Shumica JavaScript janë në thelb vetëm fotografi js që ju mund të përfshijë në krye të kodit tuaj. Vini re në pjesën e kreut të HTML tim unë kam të gjitha këto tags script, dhe tag përfundimtar dorëshkrim është kodi që ne kemi shkruar. Dhe pastaj 3 kodet kuadri janë vetëm edhe tags script. Unë jam i përfshirë ata nga ajo që quhet një CDN, e cila lejon mua për të marrë atë nga dikush tjetër në këtë pikë por çdo kuadri ka këtë, ju mund të pretty much gjeni përmbajtjen për një bibliotekë të veçantë JavaScript në dispozicion në disa CDN ose diçka si kjo, dhe pastaj ju mund të përfshijnë këto tags script. A ka kuptim që e bëjnë? Best. 

Ata janë 2 qasjeve të ndryshme. Ata nuk janë qasjet e vetme për zgjidhjen e këtij problemi. Ka shumë gjëra të ndryshme që dikush mund të bëjë, dhe nuk janë kornizat shumë atje. Këndore dhe Backbone nuk tregojnë histori e tërë. Good luck me projektet tuaja formës së prerë, dhe thank you very much. [CS50.TV]