[Powered by Google Translate] [Szeminárium] [JavaScript keretrendszerek: Miért és hogyan?]
[Kevin Schmid] [Harvard Egyetem]
[Ez a CS50.] [CS50.TV]
>> Sziasztok. Üdvözöljük a JavaScript keretrendszerek szemináriumon.
A nevem Kevin, és ma én leszek beszélni JavaScript keretrendszerek,
és a cél ennek a szeminárium, hogy nem kap, hogy, mondjuk, a mester egy adott keretet önmagában
de kapsz egy széles körű bevezetés néhány keretek
és meg kell mutatni, hogy miért lenne valaha is használni a keretet.
>> Mielőtt ezt, én majd az egy kis háttér JavaScript,
aztán elvisszük onnan.
Fogunk kezdeni végrehajtása to-do listát.
Itt a feladatok listáját a mai.
Elég vicces. Van, hogy végre egy to-do lista a JavaScript.
Ez az, amit ez fog kinézni, hogy ez az első cél.
Nem fogunk használni a keretet erre.
Elmegyünk kód JavaScript és kap a to-do lista dolgozni.
Aztán megyünk, hogy javítsa a tervezés nélkül a keretet.
Fogunk beszélni különböző dolog, amit tehetünk, hogy csak egyedül JavaScript
hogy a to-do lista egy kicsit jól megtervezett.
Ezután fogunk dobni néhány jQuery,
majd fogunk nézni ugyanazt a to-do lista,
csak végre a különböző keretek, és megbeszéljük
az érvek és ellenérvek az út mentén.
>> Kezdjük végrehajtó to-do listát.
Tegyük fel, hogy most megkapja ezt a HTML.
Fogom, hogy ez egy kicsit kisebb.
Mint látható, van egy kis fejlécet, amely azt mondja Todo
és egy kis dobozt, ahol megadhatja a leírást a todo
, majd egy új elem gomb, úgyhogy próbáljuk meg egy új todo erre a listára.
Küldj JavaScript keretrendszerek szeminárium
és én, hogy elérje az új elemet.
Értem ezt JavaScript alert azt mondja végre engem.
Van annak végrehajtására.
Nézzük meg a kód, mind a HTML és a JavaScript.
Itt a HTML.
Mint látható, itt van a mi kis Todos fejléc.
Ez volt az, hogy merész dolog a tetején,
és akkor mi van a beviteli mezőbe a helyőrző,
és akkor ott van egy bizonyos tulajdonsága ez a gomb, hogy hívja ezt a funkciót addTodo.
Van bárki is kitalálni, hogy mi a kattintás jelezve?
[Student hallható válasz]
Jó, a kattintásra van valami, mint egy esemény,
mint kattintson az egér csak egy esemény, és mit csinálunk
A mi árukapcsolás esetén erre a gombra kattint, hogy végre ezt a funkciót.
AddTodo ez eseménykezelőt kattintson a gombra.
>> Mint látható, amikor rákattintok az új elem gomb
A kattintásra esemény kirúgják, és ez a funkció hívódik.
Nézzük meg működését.
Mint látható, itt a JavaScript kód eddig.
Amit a tetején egy globális adatszerkezetet a to-do listát.
Úgy néz ki, mint egy tömb. Ez csak egy üres tömböt.
És akkor már a addTodo függvény korábban láttuk,
és az egyetlen kódsort itt van ez a figyelmeztetés.
Ez figyelmezteti végre engem, és akkor már 2 feladat kéznél.
Hozzá kell tennem, hogy a teendők, hogy a globális adatszerkezetet,
és akkor szeretném, hogy dolgozzon ki a to-do listát.
Semmi sem túl divatos csak még, de lehet, hogy a JavaScript ismerik,
úgyhogy megyek lassan és felülvizsgálja az alapjait a JavaScript ilyen módon.
>> Nézzük ad ez egy lövés.
Tegyük fel, hogy a felhasználó belép valami a dobozban.
Én csak gépelt valamit itt, a szöveg.
Hogyan rendezheti a hozzáférés, hogy a szöveg a JavaScript?
Ne feledje, hogy a JavaScript, az egyik alapvető tulajdonsága, hogy ad nekünk
a programozott hozzáférést a DOM.
Ez lehetővé teszi számunkra, hogy hozzáférést elemek és azok tulajdonságait tényleges HTML.
Az, hogy mi, hogy a csupasz csont JavaScript
az, amit ténylegesen használni a funkciót JavaScript nevű getElementById.
Azt akarom, hogy tárolja a szöveget, ami beírt van néhány változó,
így fogok mondani, egy új változót, new_todo,
és megyek, hogy ezt az elemet.
Ez a funkció. GetElementById.
És most kapok egy elem azonosító, ezért kell az azonosító, hogy a szövegdoboz,
úgyhogy adtam, hogy az azonosító new_todo_description.
Így fogok kapni egy elemet.
Ez az én érvelés ezt a funkciót, hogy meghatározza, hogy milyen ID kap.
És ez az elem a HTML-ben, és azt tulajdonságokkal.
Már láttam ezeket. Ők attribútumokat.
Az attribútum a szöveg elem, amely tárolja a felhasználó által megadott értéket nevezzük.
Megmentettem az értékét, hogy a szövegmező most ebben a változó nevű new_todo.
Most már programozott hozzáférést a változó, ami elég jó
mert most, mit tehetek, hogy én is hozzá, hogy az én to-do listát.
>> Az, hogy mi lenne ennek a JavaScript és ne aggódj, ha nem ismeri ezt,
de csak megy keresztül ez todos.push
mert ez a neve a globális adatszerkezetet itt,
és én fogom nyomni new_todo.
Ez nagyszerű, mert most már van hozzá, hogy az én JavaScript
képviselete, hogy a to-do listát.
De most hogyan jutok vissza a HTML-t?
Meg kell találni a módját, hogy valahogy tolja vissza.
Más szóval, valahogy meg kell hívni ezt.
Mit fogunk csinálni az fogjuk felhívni a to-do listát.
Meg kell frissíteni más HTML az oldalon,
és mint látható, hagytam ezt a kis tartályban itt,
ez az elválasztó lapot, amelynek azonosító todos,
és megyek, hogy a to-do lista is.
Először fogom egyértelmű, hogy ki, mert, mondjuk, volt egy öreg teendők is.
Kezdek az elem azonosító ismét
és én hozzáférés a belső HTML adott elem,
és megyek, hogy egyértelmű, hogy az.
Ha elhagyta ezt a kódot, ahogy van, mi lenne egy üres semmi,
és most szeretném kezdeni teszi az új teendők.
Én alapvetően fogja kiirtani a to-do listát.
>> Most a belső HTML aztán az todos div teljesen tiszta,
és most el kell kezdeni hozzá listámon.
Az első dolog, amit szeretnék, hogy adjunk hát a rendezetlen lista tag,
ami alapvetően azt jelzi, hogy ez a kezdete egy rendezetlen listát.
Most minden eleme az én todos tömbben akarom nyomtassa ki benne, hogy a HTML.
Szeretném hozzáfűzni azt, hogy az alján a lista.
Csakúgy, mint a C, tudom használni a for ciklus, és megyek, hogy az elején a listámon
A 0. elem, és én megyek végig, hogy a hossza a listán.
Mi valóban kap hosszú tömb JavaScript segítségével a length tulajdonság.
Alapvetően fogok csinálni valamit nagyon hasonló belső innen
kinyomtatni, hogy az elem.
Én ismét elérni a todos div, a belső HTML tulajdonság az, hogy
és én fogom adni ezt az új lista elem, és ez lesz körülvéve
a li tag, és megyek összekapcsol a + operátor,
és ez az i-edik elem a todos tömb
aztán fogom zárni, hogy a tag.
Most minden eleme akkor egy új lista bejegyzés.
És akkor valóban meg kell tennie, hogy zárja ki, hogy a tag.
Csak kell, hogy zárja le, hogy a rendezetlen lista tag.
>> Kapsz egy érzed, hogy ami működik?
Ez megnyitja a teljes lista.
Ez növeli az egyes elemeket a todos listából a listán,
majd, hogy bezárja a teljes lista, és ez az én addTodo funkciót.
Én alapvetően kezdem hogy a teendők a szövegmezőbe.
Hozzáteszem, hogy a todos tömb, aztán újra teszi a to-do listát.
Most már hozzá elemeket listámon.
Ez a fajta izgalmas, mert néhány sornyi kódot
már alapvetően arról a to-do lista, ahol lehet hozzá elemeket.
Remek.
Ez a fajta egy alapvető bevezetés a JavaScript.
Ne aggódj túl sokat a szintaxis most,
de gondolni ezt fogalmilag.
Volt néhány HTML.
Volt egy szövegmezőt az oldalon, hogy alapvetően lehetővé tette a felhasználók számára felszámított a to-do felvenni kívánt elemet.
Aztán használt JavaScript letölteni, hogy abból a todo mezőbe.
Azt, hogy a tárolt belsejében a JavaScript tömb, amely alapvetően, mint
a programszerű képviselete, hogy a teendők,
és aztán kinyomtatta.
Ez todos.js.
>> Ez elég jó, de hogyan tudjuk ezt tovább?
Nos, mint látható, ez nem olyan, mint egy komplett to-do listát.
Például, nem lehet kijelölni a felsoroltak közül bármelyik hiányos,
mint ha akartam reprioritize tételek és törlését.
Ez rendben van, de mi ezt tovább.
Én nem fogok túl sokat beszélni hozzá extra funkciók,
de venni, hogy tovább.
Beszéljünk hozzá még egy vonás, hogy a to-do lista,
ami lesz képes ellenőrizni az egyes to-do tétel
, és azt át kell húzni, így gyakorlatilag azt csináltam ezt.
Nézzünk meg egy kódot, amely véghez ezt.
Figyeljük meg, hogy mit tettem a tetején van, amit ki
egy új, globális nevű tömböt teljes.
Én alapvetően ezzel tárolni, hogy az elemeket a to-do lista
a teljes vagy nem.
Ez az egyik módja ennek.
Ha megnézzük a végrehajtásában, a kijelző,
alapvetően, ha belépek egy teendők és nyomja meg ezt a váltógomb
átmegy ki, így minden pont ezen a listán van vagy teljes
vagy hiányos állapot, és én egy másik tömböt képviselni.
>> Alapvetően minden todo abban todos array
van egy elem a teljes tömb alapvetően azt jelzi,
hogy ez-e a teljes vagy sem.
Elegem van, hogy nagyon minimális változtatásokat ezt a kódot,
így itt a mi addTodo funkciót.
Figyeljük meg, hogy itt vagyok nyomja rá a sor,
aztán Elmegyek egy 0-tól, hogy a teljes tömb
alapvetően párhuzamosan, hogy az új todo nyomja mondani
Én hozzá ez a tétel, és ez párosul ez az érték,
ami azt jelenti, hogy ez nem teljes.
És akkor én újrarajzolás a to-do listát.
Most észre adtam ezt drawTodoList funkciót.
Ez veszi el a legtöbb a kód a miénk volt,
alapvetően törli ki a dobozt, és felhívja az új teendők.
De észre, hogy belül ez a for ciklus csinálunk egy kicsit most.
Mi alapvetően annak ellenőrzése, hogy a tételnek az i-edik todo itt
teljes, és mi viselkednek eltérően a 2 esetben.
Ha ez kész, mi ezt hozzá del tag,
amely alapvetően így lehet kapni, hogy a sztrájk hatása
áthúzva a to-do listát, ha ez kész,
és ha nem, mi nem, beleértve azt.
És ez a fajta gondoskodik róla,
>> és ez az egyik módja annak, hogy ennek az elvégzéséhez.
Aztán észre, ha a felhasználó rákattint egy ilyen
mi válthat befejezése állapotát is.
Amikor a felhasználó rákattint, akkor fordított, hogy ez megtörtént-e vagy sem,
és aztán majd dolgozza át azt.
Ez a fajta munka.
Jelenleg ezeket a feladatokat végző saját feladatait,
és ez rendben van.
Van valami, amit tehetne jobban erről, igaz?
Figyeljük meg van ez a 2 globális tömbök.
Ha ez volt a C, és volt 2 tömbök ennyi képviselt
adatokat, amelyeket a fajta bizonyos szempontból kapcsolatban
mit használunk a C, hogy összekapcsolják ezeket 2 mező
valami, hogy magában foglalja mind az információkat?
Akar valaki egy javaslatot?
[Student hallható válasz]
>> Pontosan, így jönne valamilyen struktúra,
és ha úgy gondolja, vissza, mondjuk, Pset 3,
emlékszem, mi volt szótárt, és akkor volt, hogy a szó
volt a szótárban, és minden információt össze
belül bizonyos adatok szerkezetét.
Egy dolgot tudok csinálni ezt a kódot, hogy ne kelljen a 2 különböző tömbök
hasonló információkat, hogy én is össze őket egy JavaScript objektumot.
Vessünk egy pillantást.
Figyeljük Csak egy tömb tetején már
és mit csináltam jelentése, és ez csak a JavaScript szintaxist fajta
ami egy szó szerinti változata egy tárgy,
és Közlemény 2 tulajdonságok, így már a todo,
és ez együtt tartják, hogy ez a teljes vagy hiányos.
Ez nagyon hasonló kódot.
Mi a JavaScript tárgyakat.
Ez a fajta javul dolgokat.
Mint most, mindezeken a területeken a kapcsolódó információk tart össze.
Amikor megyünk nyomtassa ki, akkor érheti el a mezőket.
>> Figyeljük meg, hogy csinálunk todos [i]. Komplett
ahelyett, hogy ellenőrzi a teljes tömb külön
és észrevenni, ha azt akarjuk, hogy a to-do húr mi megy a to-do tulajdon
, hogy a todo, így ez a fajta van értelme, mert
minden egyes elem ezek a belső tulajdonságait is.
Ez egy teendők, és azt, hogy ez a teljes-e vagy sem.
Nem túl sok változás van funkcionálisan, csak hozzá egy kicsit, hogy a kódot.
Ez a javulás néhány fronton, igaz?
Úgy értem, hogy a tervezési tényezőt ki egy kicsit.
Most tárgyak alapvetően magukba az adatokat.
Van még valami, amit tehetne innen tekintve JavaScript?
Tetszik észre, hogy ez a kód itt
szerzés a belső HTML egy div
egy kicsit, azt hiszem, sokáig.
Van document.getElementById ("todos"). InnerHTML.
Az egyik dolog, amit tehetünk, hogy ezt a kódot meg egy kicsit barátságosabb
így nem kell tartani görgetés jobbra és balra, előre-hátra,
, hogy én is használja a könyvtárat, mint a jQuery.
>> Nézzük meg szeminárium 2.
és ez ugyanazt a kódot, de ez történik jQuery.
Lehet, hogy nem is ismeri a jQuery,
de csak tudom, hogy jQuery egyfajta könyvtár JavaScript
amely megkönnyíti a dolgokat, mint a való egyes elemei a DOM.
Itt ahelyett, hogy document.getElementById ("todos"). InnerHTML
Tudom használni a sokkal tisztább módon jQuery,
ami csak használni választók.
Mint látható, ez a kód nem kap egy kicsit tisztább,
funkcionálisan nagyon hasonló, de ez az ötlet.
Láttuk egy-két dolgot eddig,
így kezdődött, csak nyers JavaScript végrehajtására.
Mi hozzáadott új funkciók, és megmutatta, hogyan lehet javítani azt
csak mi van a JavaScript.
>> Van valakinek lát nehézséget a design?
Vagyis azt hiszem, vagy nem feltétlenül nehéz, hanem mondjuk
Nem csináltunk a to-do lista projektet, és holnap úgy döntöttünk,
azt akarta, hogy egy élelmiszerbolt lista, vagy egy bevásárló listát projektet.
Sok ezek közül nagyon hasonló.
Sok dolog, amit szeretnénk, hogy ki a JavaScript nagyon gyakori,
és ez kiemeli annak szükségességét, hogy valamilyen módon
hogy ezt könnyebb megtenni.
Kellett felépíteni mindezt HTML hozzáférés mindez DOM hozzáférést,
mint fogom képviselni a to-do lista ezzel a modellel.
És észre én vagyok a felelős, mint a JavaScript fejlesztő
tartja a HTML és a JavaScript, hogy van szinkronban.
Semmi sem automatikusan, hogy a JavaScript képviselet
vagy a to-do lista kap tolta ki a HTML.
Semmi végre, hogy csak nekem.
Kellett írni a sorsolás to-do lista funkciót.
És ez lehet, hogy nem úgy értem, hogy ésszerű megtenni,
de lehet, hogy unalmas néha.
Ha van egy nagyobb projekt, lehet, hogy nehéz.
>> Keretek, egyik célja a keretek
célja, hogy egyszerűsítse a folyamatot, és a fajta tényező ki
ezek a közös-Azt hiszem, mondhatjuk-tervezési minták
, hogy az emberek általában valamilyen módon képviselni adatok
hogy ez a barát-e ez térképi információk
vagy valamit, vagy a to-do listát.
Vannak, akik általában módon képviselni információk
és általában meg kell tartani, hogy az információ a fajta szinkronban
között, amit a felhasználó lát valamilyen nézetet,
beszélő szempontjából, mint az MVC, amit látott előadás,
majd a modell, amely ebben az esetben ez a JavaScript tömb.
Keretek nekünk egy utat, hogy megoldja ezt a problémát.
Most vessünk egy pillantást a végrehajtásában teendők
A keret nevű angularjs.
Ez az. Figyeld meg, hogy elfér a dián.
Nem kell, hogy lépjen a bal és a jobb.
Ez valószínűleg nem egy jó ok, hogy javasoljuk a keret,
de észre fogok valaha elérése egyes HTML elemek itt?
Fogok valaha is a DOM?
Lát document.getElementById, vagy valami ilyesmi?
Nem, ez elment.
>> Szögletes segít megőrizni a DOM és a JavaScript képviselete valamit
fajta szinkronban, így ha ez nem a js fájlban,
Ha nincs mód a programból hogy az összes, hogy a HTML tartalmat
A JavaScript hogyan fogjuk tartani ezt szinkronban?
Ha nem az. Js fájlt, akkor van, hogy a HTML, igaz?
Ez az új verzió a HTML fájlt,
és észre mi már hozzá egy csomó itt.
Figyeljük meg van az új tulajdonságok, amelyek azt mondják, ng-click és ng-repeat.
Szögletes megközelítése probléma megoldása a nehézségek tervezés
az, hogy a HTML alapvetően sokkal erősebb.
Szögletes egy módja, amely lehetővé teszi, hogy a HTML valamivel kifejezőbb.
Például, azt mondhatom, hogy én fogok kötni, vagy kötelező a szövegdobozba
változó az én Szögletes JavaScript kódot.
Ez az ng-modell nem csak ezt.
Ez lényegében azt jelenti, hogy az elem belsejében a szöveg doboz,
csak társítani, hogy a változó new_todo_description
a JavaScript kódot.
Ez nagyon erős, mert nem kell külön menni
A DOM, hogy ezt az információt.
Nem kell mondanom document.getElementById.
Nem kell használni, mint a jQueries DOM hozzáférést.
Tudom társítani azt a változót, majd amikor változtatni változó
a JavaScript ez szinkronban tartani a HTML,
így leegyszerűsíti a folyamatot, amelynek során az oda-vissza a kettő között.
Van ennek értelme?
>> És észre nincs HTML kódot.
Már most készül HTML erősebb,
és most, például, a dolgok, mint ez,
mint ha rákattint erre, ezt a funkciót körében todos.js,
és mi is csinálni korábban, de vannak más dolgok, mint ez ng-modell
és észre ng-repeat.
Mit gondolsz, ez nem?
Itt a rendezetlen listát előtti.
Megvan a ul címkéket,
de én valaha is teszi a lista belsejében a JavaScript kódot?
Én soha nem kifejezetten teszi ezt a listát.
Hogyan is működik ez?
Nos, ahogy Szögletes véghez ezt ez az úgynevezett ismétlő.
Alapvetően ez azt mondja, hogy a nyomtatni kívánt a HTML
minden todo belső én todos tömb.
Belsejében todos.jr van todos tömb itt,
és ez mond Szögletes megy keresztül tömb, és minden elem látod
Azt akarom, hogy nyomtassa ki ezt a HTML.
Ez a fajta félelmetes, mert én is csak ezt
anélkül, hogy írjon egy for ciklus,
amely a to-do lista, amely csak 30 sornyi kódot
nem lehet a legkedvezőbb dolog,
de ha van egy nagy projekt, ez kap nagyon kényelmes.
>> Ez az egyik megoldás erre a problémára, így a HTML nagyobb teljesítményű,
és amely lehetővé teszi számunkra, hogy a JavaScript és a HTML szinkronban.
Vannak más módon lehet megoldani ezt a problémát,
és nem minden keretet jelent ez.
Nem minden keretében működik az irányban.
Egyes keretek különböző megközelítések
és előfordulhat, hogy örömmel kódolás az egyik keretében a másikkal szemben.
Nézzük meg még egy.
Ez a to-do lista kódolt fel a keretet, az úgynevezett gerinc.
Én megyek át ilyen gyorsan.
Kezdjük a HTML mielőtt ott.
Egy pillanat.
Kezdve a HTML, azt veszi észre, mi HTML nagyon hasonló
hogy mi volt korábban, így nem túl sok új, hogy a front.
De a js fájl egy kicsit más.
Backbone fajta van ez a gondolat, vagy arra az elgondolásra épül
hogy sok, amit csinálunk, mondjuk, a JavaScript projektek
hogy gondolni modellek gyűjteménye ezeket a modelleket.
Ez lehet például egy fényképet és gyűjtemények fotó,
vagy az ötlet egy barátja és gyűjteménye barátok.
És sokszor, amikor mi programozás JavaScript alkalmazások
akkor egyfajta jelentik a gondolat, a gyűjtemény baráti
valahogy a JavaScript és a Backbone ad nekünk ez a réteg
tetején JavaScript meglévő tömbök és objektumok
csinálni erősebb dolgokat, hogy könnyebben.
>> Itt már meg a to-do modell
és nem kell aggódnod túlságosan a szintaxis,
de észrevettem, hogy mi az egyik tulajdonságait?
Ez egy alapértelmezett területen.
Backbone lehetővé teszi számomra, hogy meghatározza már kapásból
az új teendők, hogy hozzon létre megy, hogy ezeket az alapértékeket.
Most már tudom szabni, de hogy képes megadni az alapértelmezett
szép, és ez a fajta kényelmes, mert ez nem olyan dolog, mint
rejlő JavaScript, és most már nem kell kifejezetten
azt mondják, hogy a todos hiányosak.
Azt lehet mondani, rögtön a denevér, hogy todos fognak megjelölni hiányos.
Figyeljük meg, akkor mi ez?
Most van egy to-do lista, és ez a gyűjtemény.
Figyeljük meg a mezőt társított mondja modell todo.
Ez az én lehet megmondani, hogy a gerinc
Fogok gondolni gyűjteménye ezeknek az egyedi todos.
Ez alapvetően a szerkezeti modell a programom.
Itt van ez a gondolat a gyűjtemény,
és alapvetően az elemeket tartalmazza, hogy a behajtási mind lesz ezeknek todos,
és ez nagyon természetes ebben az értelemben
mert nekem van todos, és én azokat a gyűjtemény.
>> Nézzük meg egy kicsit erre.
Itt van egy gerinc kilátás.
A másik dolog, ami azt mondja, hogy a gerinc
sok a modell, amit te gondolsz, vagy akár gyűjtemények
lesz szüksége, hogy valamilyen módon jelenik meg.
Meg kell, hogy tegyék, hogy a to-do lista,
és nem lenne jó, ha tudnánk biztosítani az egyes típusokra
vagy társult minden modell ezt a nézetet
, amely lehetővé teszi számunkra, hogy azt hiszem, csatlakoztatni a kettő együtt?
Míg korábban kellett használni a ciklus, amely végigmenni
minden a mi todo listában, majd nyomtassa ki itt
akkor alapvetően csatlakoztatni ezzel a modellel.
Ez a to-do view.
Ez együtt jár a teendők találtunk korábban.
Most minden todo nem megjeleníthető vagy renderelhetünk
ez a to-do view.
Figyeljük meg néhány területen.
Mit gondolsz, ez tagName is, tagName: li?
Emlékszel a korábban, amikor akartunk teszi a todo
mi lett volna kifejezetten párosítani a todos ezzel li tag.
Most azt mondja, hogy ha ez a todo fog élni
lesz benne egy li tag.
És most is tömörítő események a todos.
>> Minden todo ez az egy esemény.
Ha rákattint nagyjából váltógombot, ez az, amit mondok ott,
akkor alapvetően jelölje a teendők, mint az ellenkezője annak, amit előtte volt
majd újra tehetik az alkalmazást.
Ez a fajta hasonlít a kód előtt.
Emlékszel, amikor megjelölt, mint akár a másik, vagy-
és aztán újra tették.
De észre már ezt az eseményt használják, hogy legyen valami, ami a HTML.
Úgy ült ott.
A gomb volt a kattintással.
Ha rákattint a gombra, ez a fajta nem a dolog, hogy
létre, hogy a teendők, hogy nem teljes.
Itt már jár az esetben az, hogy a kattintás váltógomb
és visszafordítása hogy ez be vagy ki ezzel az állásponttal.
>> Ez egy jó módja létrehozásának ez az esemény, hogy ez nagyon szorosan kötődik
hogy ezt a nézetet, és így észre még egy.
Én ezt a render módszert, és nem kell, hogy menjen át a részleteket.
Elég hasonló ahhoz, amit korábban,
de észre én nem átkötése semmit.
Én nem nyomtat, hogy ul tag ez a fajta azt fogom kinyomtatni az összes elemet.
Én biztosító funkciókat teszi ezt, hogy a teendő elemhez.
Ez egy nagyon erős koncepció, mert alapvetően
a to-do lista áll, ezek todos, és ha akkor alapvetően meg
az utat, hogy az egyik ilyen tehetik todos
akkor mi lehet az erős gerinc önmagában teszi minden todos
hívja a Render módszert az egyes todos.
Ez egy olyan fogalom, amely hasznos itt.
Most egy jó kérdés, hogy hogyan van ez az alkalmazás is össze?
Mivel megvan a képessége, hogy tegyék egy todo,
de hogyan az ötlet több todos?
>> Vessünk egy pillantást.
Ez az utolsó rész.
Figyeljük meg, hogy van egy to-do lista view itt,
és észre ez is egy nézet.
És, hogy menjen át egy-két dolgot,
ez initialize módszer kerül meghívásra, amikor először hozza létre ezt a to-do listát.
Mint látható, ez olyan, mint ami a to-do listát, és társítja azt ezzel az állásponttal.
Aztán hozzátette, a funkciók itt, így tulajdonképpen, ha hozzá egy elemet,
ez hasonló a AddItem módszerrel láttuk korábban,
Megyek, hogy hozzon létre egy új objektumot teendők, és vegyük észre, én tényleg hívás
Az új todo módszer, így ez biztosítja Backbone,
és én is átadni az ingatlanok itt.
És most minden todo hogy tudok létrehozni ezzel lesz az a funkció, amit korábban láttunk.
Figyeljük Én elszámolási ki a szöveg doboz előtt-a kis apró részlet,
majd én hozzá ebben a gyűjteményben.
>> Ez szinte fura, mert mielőtt még csak meg kellett csinálni todos.push,
aztán végeztünk, és ez úgy tűnik, sokkal bonyolultabb, mert az adott projekt
és előfordulhat, hogy gerinc vagy szögletes, vagy más keretek
nem elégíti ki adott projekt, de azt hiszem, fontos, hogy gondolkodni
hogy ez mit jelent a nagyobb méretű a nagyobb projektek,
mert ha volt egy nagyobb projekt, ahol képviselte
néhány igazán komplex gyűjtemény, valami mélyebb, mint a to-do lista,
mondjuk a barátok listájából vagy valami ilyesmi, ez is jól jöhet
mert tudta szervezni a kódot nagyon kényelmesen,
oly módon, hogy lehetővé tenné, hogy valaki más
aki akarta, hogy vegye fel a projektet építeni.
Láthatjuk, hogy ez ad egy csomó struktúra.
Aztán hívom teszik ezt AddItem.
Render, mint látod, és nem kell megragadni ezt a teljes szintaxis,
de alapvetően minden modell fogja hívni az egyes render módszer.
Ez az a fajta, ahol ez származik.
Nézzük csak meg, hogy hogyan teszi az egyes todos,
és akkor hadd ragasztó őket az egész.
De ez egy módja annak, absztrakció,
mert nem tudtam változtatni, ahogy én úgy dönt, hogy tegye az egyes todos,
és én nem kell változtatni sem a kódot.
Ez elég jó.
>> Van valakinek bármilyen kérdése van a JavaScript keretrendszerek?
[Student hallható kérdés]
Persze, ez egy jó kérdés.
A kérdés az volt, hogyan tettem közé a keretek?
A legtöbb JavaScript keretrendszerek alapvetően csak js fájlokat
hogy akkor is a tetején a kód.
Figyeljük meg a fejét része a HTML már ezeket a script tag-ek,
és a végső script tag az a kód, amit írtam.
És akkor a 3 keret kódok csak is script címkéket.
Én többek között azokat az úgynevezett a CDN,
amely lehetővé teszi számomra, hogy ez a valaki ezen a ponton
de minden keretrendszer this-akkor nagyjából megtalálják a tartalmat
egy adott JavaScript könyvtár csak egyes CDN, vagy valami ilyesmi,
és akkor ezeket a script tag-ek.
Van ennek értelme?
Cool.
>> Ezek 2 különböző megközelítéseket.
Ezek nem csak a megközelítések a probléma megoldására.
Sok különböző dolog, hogy
valaki meg tudja tenni, és a sok keretek odakinn.
Szögletes, Backbone nem mondják el a teljes történetet.
Sok sikert az utolsó projekteket, és köszönöm szépen.
[CS50.TV]