[Powered by Google Translate] [Seminario] [JavaScript kadroj: Kial kaj Kiel?]
[Kevin Schmid] [Universitato Harvard]
[Ĉi tiu estas CS50.] [CS50.TV]
>> Saluton, ĉiuj. Bonvenon al la JavaScript kadroj seminario.
Mia nomo estas Kevin, kaj hodiaŭ mi tuj parolos pri JavaScript kadroj,
kaj la celo de tiu seminario estas ne atingi vin, diru, majstri aparta kadro per si mem
sed por doni al vi ampleksan enkonduko al paro de kadroj
kaj montri kial ni devus iam volas uzi kadro.
>> Antaŭ ol mi faros tion, mi havigas iom fono en JavaScript,
kaj tiam ni prenos ĝin de tie.
Ni tuj komencu per apliko de a al-do list.
Jen nia taskaro hodiaŭ.
Estas speco de amuza. Ni devas apliki to-do list en JavaScript.
Ĉi tio estas kio okazas al aspektas tiel, ke estas nia unua celo.
Ni ne tuj uzi kadro por fari tion.
Ni tuj kodo JavaScript kaj akiri la to-do list labori.
Tiam ni iras por plibonigi la dezajno sen uzi kadro.
Ni tuj diskuti diversajn aferojn, kiujn ni povas fari kun nur JavaScript sola
fari nian to-do listigi iom pli bone desegnita.
Tiam ni iras por ĵeti en iuj jQuery,
kaj poste ni iras al rigardi la sama to-do list,
nur implementado en malsamaj kadroj, kaj ni diskutos
la avantaĝoj kaj malavantaĝoj dum la vojo.
>> Komencu apliki ke to-do list.
Diru ni donas ĉi HTML.
Mi tuj faros ĉi iom pli malgranda.
Kiel vi povas vidi, mi havas malmultan header kiu diras Ĉiun
kaj iom skatolo, kie mi povas eniri priskribo de ĉiu
kaj tiam nova ero butonon, do ni provu enmeti novajn todo al ĉi tiu listo.
Donu JavaScript kadroj seminario,
kaj mi estas bati novan eron.
Mi alvenas ĉi JavaScript garde kiu diras apliki mi.
Ni devas apliki ĝin.
Ni kontrolu la kodon por tiu, tiel la HTML kaj la JavaScript.
Jen nia HTML.
Kiel vi povas vidi ĉi tie, jen nia eta Ĉiuj kaploko.
Tio estis tiu aŭdaca afero ĉe la supro,
kaj tiam ni havas la eniga kesto kun la lokokupilo,
kaj tiam ekzistas iu atributo de tiu butono kiu nomas tiun funkcion addTodo.
Ĉu iu volas diveni ke sur klako estas aludo?
[Studenta inaudibles respondon]
Bone, la sur klako estas speco de kiel evento,
kiel klakante la muso estas nur evento, kaj kion ni faras
estas ni ligante la evento de alklakante tiun butonon por ekzekuti tiu funkcio.
AddTodo estas ĉi eventa traktilo por klakante ke butonon.
>> Kiel vi povas vidi, kiam mi premas la novan eron butono
la sur klako okazaĵo gets pafis, kaj ĉi tiu funkcio prenas nomata.
Ni rigardu funkcio.
Kiel vi povas vidi, jen mia kodo JavaScript ĝis nun.
Kion mi havas en la pinto estas tutmonda datumstrukturo por mia to-do list.
Ĝi aspektas kiel tabelo. Estas nur malplenan tabelo.
Kaj tiam mi havas la addTodo funkcio, kiun ni vidis antaŭe,
kaj la sola linio de kodo en ekzistas ĉi tiu garde.
Garde apliki mi, kaj tiam mi havas 2 taskoj alproksimiĝis.
Mi devas adicii la todo al tiu tutmonda datumstrukturo,
kaj tiam mi volas elsxovas la por-do list.
Nenio tro sxajnas simple ankoraŭ, sed JavaScript vi estu ne konas,
do mi tuj iros malrapida kaj revizii la fundamentojn de JavaScript en tiu vojo.
>> Ni donu tiun ŝoton.
Diru la uzanto enigas ion en tiu skatolo.
Mi ĵus tajpis ion en ĉi tie, tekston.
Kjel mi ordigi de aliro kiu teksto per JavaScript?
Memoru ke JavaScript, unu el liaj fundamentaj trajtoj estas kiu donas al ni
ĉi programita aliro al la DOM.
Ĝi permesas al ni aliri elementoj kaj iliaj propraĵoj de ĉi tiu reala HTML.
La maniero ni faras tion kun nudaj ostoj JavaScript
estas ni povas efektive uzi funkcio en JavaScript nomata getElementByID.
Mi volas konservi la teksto kiu estas tajpita tie en iu variablo,
do mi tuj diros nova variablo nomata new_todo,
kaj mi tuj atingi tiun elementon.
Tiu estas funkcio,. GetElementByID.
Kaj nun mi ricevas elementon de ID, do mi bezonas la ID de tiu teksto skatolo,
tial mi donis al ĝi la ID new_todo_description.
Tiel estas kiel mi iros akiri elemento.
Tiu estas mia argumento por ĉi tiu funkcio, specifi kiujn ID akiri.
Kaj tiel tio estas ero en HTML, kaj ĝi havas ecojn.
Vi vidis tiujn. Ili estas atributoj.
La atributo de la teksto elemento kiu stokas la uzanto enigo nomas valoro.
Mi savis la valoro de tiu teksto skatolo nun en ĉi tiu variablo nomata new_todo.
Nun mi havas programita aliron al ĉi tiu variablo, kiu estas speco de malvarmeta
ĉar nun kion mi povas fari estas mi povas aldoni ĝin al mia to-do list.
>> La maniero ni devus fari tion en JavaScript-kaj ne maltrankviliĝu se vi ne konas tion,
sed ĝuste iras tra ĝi estas todos.push
ĉar tio estas la nomo de mia tutmonda datumstrukturo ĝis ĉi tie,
kaj mi tuj puŝi new_todo.
Ĉi tio estas granda ĉar nun mi aldonis ĝin al mia JavaScript
reprezento de tiu to-do list.
Sed nun how do I get it reen al la HTML?
Mi devas trovi metodon por ordigi de puŝi ĝin reen.
Alivorte, mi specon de devos desegni ĉi.
Kion ni faros estas ni iras al desegni la to-do list.
Mi bezonas ĝisdatigi aliaj HTML sur tiu paĝo,
kaj kiel vi povas vidi, kiujn mi lasis tiun malgrandan ujon tie,
ĉi dividanton de la paĝo kies ID estas todos,
kaj mi tuj metis la to-do list tie.
Unue mi iros por liberigi ĝin ĉar, ekzemple, tie estis malnova to-do list tie.
Mi ricevas tiu elemento per ID denove,
kaj mi konsentas la interna HTML de tiu elemento,
kaj mi tuj certe ke.
Se ni forlasis tiun kodon kiel estas, ni vidus malplenan nenio tie,
kaj nun mi volas komenci farante mian novan to-do list.
Mi esence tuj forviŝi mia to-do list.
>> Nun la interna HTML ene de tiu todos div estas tute klara,
kaj nun mi bezonas komenci aldonante mia listo.
La unua afero, kiun mi volas aldoni dorso estas la ordigita listo etikedo,
kiu esence signifas ke ĉi tiu estas la komenco de neordigitan liston.
Nun por ĉiu elemento en mia todos tabelo Mi volas presi ĝin ene de tiu HTML.
Mi volas postglui ĝin sur la malsupro de tiu ĉi listo.
Same kiel en C, mi povas uzi por ciklo, kaj mi tuj komencos je la komenco de mia listo
ĉe elemento 0, kaj Mi tuj iros tuta vojo al la longo de la listo.
Ni povas vere akiri la longo de tabelo en JavaScript uzante la longo proprieto.
Esence mi faros iun tre simila ene de ĉi tie
por presi tiu elemento.
Mi povas denove atingi la todos div, la interna HTML posedaĵo de tiu,
kaj mi tuj aldonu sur ĉi nova listeron, kaj tio tuj estos ĉirkaŭita de
ĉi span etikedo, kaj mi tuj concatenate kun la + operatoro,
kaj tio estas la th,-a ero de mia todos tabelo,
kaj tiam Mi tuj fermos tiu etikedo.
Nun por ĉiu elemento ni aldoni novan liston eniro.
Kaj tiam ĉiuj ni vere bezonas fari estas fermi tiu etikedo.
Mi nur bezonas fermi ke Neordigita listo etikedo.
>> Ĉu vi ricevas emo al kiel tiu funkcias?
Ĉi tio malfermas la tuta listo.
Ĉi tio aldonas individuaj elementoj de la todos liston al la listo,
kaj tiam kiu fermas la tutan liston, kaj tiu estas mia addTodo funkcio.
Mi esence komenci per atingi la todo el la teksta kadro.
Mi aldonu, ke la todos tabelo, kaj tiam mi re-redonu la to-do list.
Nun mi povas aldoni elementojn al mia listo.
Ĉi tiu estas speco de ekscita ĉar en nur kelkaj linioj de kodo
ni esence faris to-do list kie ni povas aldoni erojn.
Granda.
Tio estas speco de baza enkonduko al JavaScript.
Ne tro maltrankviliĝu pri la sintakso por la momento,
sed pensas pri tiu koncepte.
Ni havis iom da HTML.
Ni havis teksto skatolon sur la paĝo kiu esence permesis uzantoj input a al-do ero por aldoni.
Kaj tiam ni uzas JavaScript por venigi ke ĉiu el tiu teksto skatolo.
Ni stokas ke ene de JavaScript tabelo, kiu estas esence kiel
nia programita reprezento de tiu to-do list,
kaj poste ni presas ĝin.
Ĉi tiu estas todos.js.
>> Ĉi tiu estas speco de cool, sed kiel ni povas utiligi ĉi tiun pli?
Nu, kiel vi povas vidi, ĉi tio ne estas kiel kompleta to-do list.
Ekzemple, mi ne povas marki neniun el tiuj artikoloj kiel nekompleta,
kiel se mi volis reprioritize la artikoloj aŭ forigi erojn.
Ĉi tio estas bone, sed ni povas utiligi ĉi tiun fojon.
Mi ne tuj tro parolas pri aldonante ekstrajn funkciojn,
sed ni povus preni tiun fojon.
Ni parolos pri aldonante pli karakteriza por tiu al-do list,
kiu tuj estos povi kontroli individuo to-do ero
kaj oni forstrekis, do esence dirante mi faris tion.
Ni rigardu kelkajn kodo kiu povus plenumi tion.
Rimarku kion mi faris ĉe la pinto estas mi aldonis
nova tutmonda tabelo nomita kompleta.
Mi esence uzante ĉi stoki ĉu la artikoloj en la por-do list
estas kompletaj aŭ ne.
Tiu estas unu maniero por fari tion.
Se mi rigardas la efektivigo de ĉi tio, la montro,
esence, se mi eniras en todo kaj mi min pelas ĉi ebligi butono
ĝi transiras, do cxiu menuero en tiu listo havas ĉu kompleta
aŭ nekompleta stato, kaj Mi uzas alian tabelo por reprezenti tion.
>> Esence por ĉiu todo en tiu todos tabelo
ne estas ero en la kompleta tabelo kiu esence indikas
ĉu tio estas kompletaj aŭ ne.
Mi devis fari belan minimuma ŝanĝoj al tiu kodo,
tial jen nia addTodo funkcio.
Rimarku, ke ĉi tie mi puŝas ĝin sur la tabelo,
kaj poste mi pelante 0 al tiu kompleta tabelo,
esence en paralela kun tiu nova todo puŝo diri
Mi aldonas tiun eron, kaj ĝi estas kunigita kun tiu valoro,
kio signifas ke ĝi estas nekompleta.
Kaj poste mi redrawing la por-do list.
Nun, rimarki Mi aldonis ĉi drawTodoList funkcio.
Tio postulas multan de la kodo kiun ni havis antaŭ,
esence liberigas el la skatolo kaj poste tiras la novaj to-do list.
Sed rimarki, ke ene de ĉi por buklo ni faras iom pli nun.
Ni esence kontrolanta ĉu la ero responda al la th,-a todo tie
estas kompleta, kaj ni kondutas malsame en tiuj 2 cirkonstancoj.
Se ĝi estas kompleta, ni aldonas ĉi del etikedo,
kiu estas esence la vojo vi povas atingi tiun fendas efekto
transirante el la to-do list se estas kompleta,
kaj se ĝi ne estas, ni ne inkludante ĝin.
Kaj por ke ia prizorgas tion,
>> kaj tio estas unu maniero por atingi tion.
Kaj tiam rimarkos kiam la uzanto clic unu el tiuj
ni Baskuligi la finaĵon statuson de ĝi.
Kiam la uzanto klakas, ni retroirigi ĉu ĝi estas kompletigis aŭ ne,
kaj poste ni redesegni ĝin.
Tiu speco de verkoj.
Ni havas ĉi tiujn funkciojn kiuj portas siajn taskojn,
kaj tio estas bone.
Ĉu estas io ni povus pli bone fari pri tio, kvankam?
Rimarku ni havas tiujn 2 tutmonda arrays.
Se tiu estis C, kaj ni havis 2 arrays tian reprezentis
datumoj kiuj estis ia rilatas iel
kion ni uzas en C por kombini tiujn 2 kampoj
en iu kiu encapsula ambaŭ pecoj de informo?
Iu volas fari sugeston?
[Studenta inaudibles respondon]
>> Precize, do ni povus uzi ian struct,
kaj se vi pensas reen al, ni diru, pset 3,
Memoru ni havis vortaron, kaj tiam ni havis, ĉu la vorto
estis en la vortaro, kaj cxio, kion informo estis kunmetita
ene de kelkaj datumstrukturo.
Unu aferon mi povas fari kun tiu kodo eviti havi tiujn 2 malsamaj arrays
por similaj pecoj de informo estas mi povas kombini ilin en JavaScript objekto.
Ni rigardu tion.
Rimarku ke mi havas nur unu tabelo supre nun
kaj kion mi faris estas-kaj ĉi tiu estas nur la JavaScript sintakson por ia
kreante laŭvorta versio de objekto,
kaj rimarkos estas 2 propraĵoj, do ni havas la todo,
kaj ĝin subtenis kune kun ĉu ĝi estas kompletaj aŭ nekompletaj.
Ĉi tio estas tre simila kodo.
Ni uzas la JavaScript celoj.
Tiu speco de plibonigas aĵoj.
Kiel nun, ĉiuj ĉi tiuj kampoj de rilataj informoj estas tenis kune.
Kiam ni iros por presi ĝin, ni povas konsenti la kampoj.
>> Rimarku kiel ni faras todos [i]. Kompleta
anstataŭ kontrolanta la kompleta tabelo izolite,
kaj rimarkos, kiam ni volas akiri la al-do string ni atingi la por-do proprieto
de tiu ĉiu, do tian havas sencon ĉar
cxiu menuero havas tiujn apriora propraĵoj pri ĝi.
Ĝi havas ĉiu, kaj ĝi havas ĉu ĝi estas kompletaj aŭ ne.
Ne tro multajn ŝanĝojn tie funkcie, simple aldonis iujn pli al la kodo.
Tiu estas plibonigo de iuj frontoj, ĉu ne?
Mi volas diri, ni faktorita el la dezajno iom.
Nun ni havas celojn esence encapsulan tiun datumoj.
Ĉu estas io pli ni povus fari el ĉi tie en terminoj de JavaScript?
Kiel rimarkas ke tiu kodo ĝuste ĉi tie
por atingi la interna HTML de div
Estas iom, mi supozas, longa.
Ekzistas document.getElementByID ("ĉiuj"). InnerHTML.
Unu afero, kiun ni povus fari por tiu kodo aspektas iom pli amikaj
do mi ne devus subteni movo maldekstra kaj dekstra, tien kaj reen,
estas mi povus uzi biblioteko kiel jQuery.
>> Ni kontrolu Seminario 2,
kaj ĉi tiu estas la sama kodo, sed ĝi estas farita kun jQuery.
Vi ne rajtas esti tro familiara kun jQuery,
sed nur scias ke jQuery estas speco de biblioteko por JavaScript
ke faciligante fari aferojn kiel aliro individuaj elementoj de la DOM.
Jen anstataŭ diri document.getElementByID ("ĉiuj"). InnerHTML
Mi povas uzi la multe pli pura formo en jQuery,
kio estas ĝuste uzi selectores.
Kiel vi povas vidi, ĉi tiu kodo ne ricevas iom pli pura,
tre simila funkcie, sed jen la ideo.
Ni vidis paron de aĵoj ĝis nun,
tial ni komencis kun nur krudan JavaScript efektivigo.
Ni aldonis novajn funkciojn kaj montris kiel oni povas plibonigi ĝin per
nur kion ni havas en JavaScript.
>> Ĉu iu vidas ian malfacilaĵoj kun ĉi dezajno?
Nome, mi supozas-aŭ ne nepre malfacilaĵoj sed diru
ni ne faras por-do list projekto, kaj morgaŭ ni decidis
ni volis fari nutraĵvendejo listo aŭ komerca listo projekto.
Multaj el tiuj karakterizaĵoj estas tre similaj.
Multaj de la aĵoj kiujn ni volas eliri de JavaScript estas tre komuna,
kaj tio substrekas la bezonon por ia maniero de
farante ĉi tiu pli facile fari.
Mi devis konstrui ĉio ĉi HTML-aliro, ĉiuj ĉi DOM aliro,
kiel mi iros al prezenti la por-do list kun tiu modelo.
Kaj rimarkos mi respondecas pro la JavaScript developer
por teni la HTML kaj JavaScript kiun mi havas en sync.
Nenio aŭtomate ke JavaScript reprezento
aŭ la por-do list get elpelus al HTML.
Nenio deviga ke krom mi.
Mi devis skribi la egaleco to-do list funkcio.
Kaj tio ne povas esti-Mi volas diri, estas racie fari tion,
sed ĝi povas esti teda kelkfoje.
Se vi havas pli grandan projekton, kiu povus esti malfacila.
>> Kadroj, unu el la celoj de kadroj
estas faciligi tiun procezon kaj varo de faktoro ekster
ĉi tiuj komunaj-Mi supozas ke vi povus diri-dezajno ŝablonoj
ke homoj ĝenerale havas ia maniero reprezenti datumojn,
ĉu tio estas amikoj listo, ĉu tio estas mapo informoj
aŭ io aŭ to-do list.
Kelkaj homoj havas ĝenerale maniero reprezenti informojn,
kaj ili ĝenerale bezonas teni tiun informon ia sinkronigita
inter kio la uzanto vidas en ia vido,
parolante en terminoj de kiel la modelo view regilo kiun vi vidis en prelego,
kaj tiam la modelo, kiu en ĉi tiu kazo estas tiu de JavaScript tabelo.
Kadrojn al ni vojon por solvi tiun problemon.
Nun ni rigardu la efektivigo de ĉi to-do list
en kadro alvokis angularjs.
Jen ĝi. Rimarku ĝi persvadas sur tobogano.
Mi ne devas rulumi al la maldekstra kaj dekstra.
Tio verŝajne ne estas granda kialo rekomendi uzante kadro,
sed avizo mi iam aliri individuaj HTML elementoj tie?
Ĉu mi iam eniri en la DOM?
Ĉu vi vidas ian document.getElementByID aŭ io simila?
Ne, tio estas for.
>> Angula helpas nin subteni la DOM kaj nia JavaScript reprezento de io
speco de sinkronigita, do se ĝi ne estas en la js-dosiero,
se estas neniu vojo de programmatically alveni al ĉiuj, ke HTML-enhavon
de la JavaScript kiel ni subtenas tiun sinkronigita?
Se ĝi ne estas en la. Js-dosiero, ĝi estas alvenis al esti en HTML, ĉu ne?
Tiu estas la nova versio de la HTML-dosiero,
kaj rimarki ni aldonis multe ĉi tie.
Rimarku ke estas tiuj novaj ecoj kiuj diras ng-klaku kaj ng-ripeto.
Angula La alproksimiĝo al solvi ĉi tiu problemo de malfacilaĵoj en dezajno
estas esence fari HTML multe pli potenca.
Angula estas maniero de permesante fari HTML iom pli esprima.
Ekzemple, mi povas diri ke mi iros por ligi aŭ ligos tiun tekston skatolo
al variablo en mia Angula Javascript-kodo.
Ĉi ng-modelo faras ĝuste tion.
Kiu esence diras ke la elemento ene de tiu teksto skatolo,
nur asocii ke kun la variablo new_todo_description
ene de la Javascript-kodo.
Tio estas tre potenca ĉar mi ne devas eksplicite iri al
la DOM atingi tiun informon.
Mi ne devas diri document.getElementByID.
Mi ne devas uzi jQueries kiel DOM aliron.
Mi povas asocii ĝin kun ŝanĝiĝema, kaj poste, kiam mi ŝanĝas tiu variablo
ene Javascript ĝi estas tenata en sync kun la HTML,
por ke simpligas la procezo de devi iri tien kaj reen inter la du.
Ĉu tio havas sencon?
>> Kaj rimarki mankas HTML-kodo de aliro.
Ni ĵus faris HTML pli potencaj,
kaj nun, ekzemple, ni povas fari tion kiel oriento,
kiel kiam vi klakos sur ĉi tio, nomas tiun funkcion en la kadro de todos.js,
kaj ni povus fari tion antaŭe, sed estas aliaj aferoj, kiel ĉi ng-modelo,
kaj rimarkas ĉi ng-ripeto.
Kion vi pensas ĉi tio?
Jen nia Neordigita listo de antaŭe.
Ni havas la ul etikedoj,
sed mi iam farante tiu listo ene de la kodo JavaScript?
Mi neniam eksplicite repagantaj tiu listo.
Kiel tio funkcias?
Nu, la maniero Angula plenumas ĉi estas ĉi nomiĝas ripetilo.
Esence tiu diras ke mi volas presi ĉi HTML
por ĉiu todo ene de mia todos tabelo.
Ene de todos.jr estas todos tabelo ĝuste ĉi tie,
kaj ĉi diros Angula iras tra tiu tabelo, kaj por ĉiu ero vi vidas
Mi volas ke vi presi ĉi HTML.
Ĉi tiu estas speco de timinda ĉar mi povas nur fari tion
sen devi skribi por ciklo,
kiu por to-do list kiu estis nur 30 linioj de kodo
eble ne estas la plej utila afero,
sed se vi havas grandan projekton, tio povus akiri tre oportuna.
>> Ĉi tio estas unu solvo al tiu problemo, farante HTML pli potencaj,
kaj kiu nin permesas konservi JavaScript kaj HTML sinkronigita.
Estas aliaj eblaj manieroj al solvi ĉi tiu problemo,
kaj ne ĉiu kadro tion faras.
Ne ĉiu kadro laboras kune ĉi tiuj linioj.
Kelkaj kadroj havas diversajn alirojn,
kaj eble vi trovos ke vi ĝuas kodigo en unu kadro super la alia.
Ni rigardu unu pli.
Ĉi tiu estas la to-do list koditaj en kadro alvokis Backbone.
Mi tuj iros tra tiu rapide.
Mi komencos per la HTML antaŭ ol ni iros tien.
Unu sekundo.
Komencante kun la HTML, kiel vi rimarkos, nia HTML estas tre simila
al kio estis antaŭe, do ne tro da novaj sur tiu fronto.
Sed nia js-dosiero estas iom malsamaj.
Backbone ia havas tiun ideon, aŭ agas sur la ideo
ke multaj kion ni faru pri, ekzemple, nia JavaScript projektoj
Estas pensi modeloj kaj kolektoj de tiuj modeloj.
Tio povus esti, ekzemple, foto kaj kolektoj de fotoj,
aŭ la ideo de amiko kaj kolektoj de amikoj.
Kaj ofte, kiam ni programado JavaScript aplikoj
ni ordigi de reprezentas la ideon de havi kolekton de amikoj
iel en JavaScript, kaj Backbone donas al ni tiu tavolo
sur supro de JavaScript la ekzistantaj tabeloj kaj celoj
fari pli potenca aĵoj kun kiuj pli facile.
>> Ĉi tie mi difinis al-do modelo,
kaj vi ne devas zorgi tro multe pri la sintakso,
sed rimarki ke kio estas unu el la ecoj de tiu?
Ĝi havas defaŭlta kampo.
Backbone min permesas specifi jam ekstere de la batilo
iu nova al-do, ke mi kreas tuj havos tiujn implicite.
Nun mi povas personecigi ĉi, sed povante specifi la defaŭltoj
estas agrabla, kaj ĝi estas speco de oportuna ĉar ĉi tio ne estas iu kiu estas kiel
imanenta en JavaScript, kaj nun mi ne devas eksplicite
diri ke la todos estas nekompleta.
Mi povas diri rajton super la batilon kiun todos tuj estos markita kiel nekompleta.
Rimarku tiam kio estas tio?
Nun mi havas por-do listo, kaj tio estas kolekto.
Rimarku la kampo asociita kun kiu diras modelo ĉiu.
Jen mia maniero de rakonti Backbone ke
Mi tuj pensi pri kolekto de tiuj individuaj todos.
Tio estas esence la modelo strukturo por mia programo.
Jen mi havas ideon de kolekto,
kaj esence la artikoloj enhavitaj en tiu kolekto estas ĉiuj tuj estos tiuj todos,
kaj kiu estas tre natura en tiu senco
ĉar mi ja havas todos, kaj mi havas ilin en kolekto.
>> Ni rigardu iom pli da ĉi tiu.
Jen Backbone vido.
La alia afero ke Backbone diras estas, ke
amaso de la modeloj vi pensadas pri aŭ eĉ kolektoj
tuj bezonas havi iun manieron de esti montrata.
Ni bezonas por repagi, ke to-do list,
kaj ĉu ne estus bone se ni povus havigi por ĉiu modelo
aŭ asocias kun ĉiu modelo tiu vidpunkto
kiu nin permesas mi supozas konekti la du kune?
Dum antaŭ ol ni devis uzi por buklo kiu kuras tra
ĉiun todo en nia listo kaj poste presas ĝin ĉi tie
ni povas esence konekti ĝin kun ĉi tiu modelo.
Tio estas por-do vido.
Tiu estas asociita kun la todo ni trovis antaŭe.
Nun ĉiu todo estas displayable aŭ renderable
per ĉi to-do vido.
Rimarku kelkaj el la kampoj.
Kion vi pensas ĉi tagName estas, tagName: p?
Memoru el antaux kiam ni volis Redonu todo
ni devus eksplicite paro nia todos kun ĉi span etikedo.
Nun ni diras ke kie ĉi todo tuj vivi
tuj estos ene de span etikedo.
Kaj nun ni ankaŭ asocii okazaĵoj kun niaj todos.
>> Ĉiu todo havas ĉi tiu okazaĵo.
Se vi klakas preskaux la ebligi butonon, jen kion mi diras tie,
tiam esence marki la todo kiel la malo de kio estis antaŭe
kaj tiam re-redonu la apliko.
Ĉi tiu estas speco de simila al la kodo antaŭe.
Memoru kiam ni markis ĝin kiel ĉu la malo aŭ-
kaj poste ni re-sendadis ĝin.
Sed nun rimarkas tiun okazaĵon kutimis esti iu kiu estis en la HTML.
Ĝi sidis tie.
La butono havis sur klako.
Kiam vi klakas la butonon, ĝin speco de faras la uzatajxojn, por
starigi ke todo esti nekompleta.
Ĉi tie ni asocias ke evento de klakante ke ebligi butono
kaj dorsflankanta ĉu ĝi estas sur aŭ for kun tiu vidpunkto.
>> Tiu estas bela maniero starigi ĉi tiun okazaĵon por ke ĝi estas tre forte ligitaj
ĉi tiu vidpunkto, kaj tiel rimarkos ĉi tiu pli.
Mi havas ĉi render metodo, kaj ni ne devas iri tra la detalojn.
Estas speco de simila al kio ni havis antaŭe,
sed rimarkis mi ne looping tra nenion.
Mi ne videbligi ke ul etikedo tio estas ia dirante Mi tuj presi ĉiuj de la elementoj.
Mi provizanta la funkciojn por prunti ĉi tiu al-do elementon.
Tio estas tre potenca koncepto ĉar esence
nia to-do list konsistas de ĉiuj tiuj todos, kaj se ni povas esence specifi
la vojo por repagi unu el tiuj todos
tiam ni povas havi nian potencan spino per si redonu ĉiujn todos
nomante la render metodo en la individua todos.
Tiu estas koncepto kiu estas utila tie.
Nun bona demando por demandi estas kiel estas tiu apliko esti kunmetita?
Ĉar ni havas la kapablon por repagi unu todo,
sed kiel ni atingos la ideo de multnombraj todos?
>> Ni rigardu tion.
Ĉi tiu estas la lasta parto.
Rimarku ni havas to-do list view tie,
kaj rimarki ĝi estas ankaŭ vidon.
Kaj iri super kelkaj aferoj,
ĉi pravalorizi metodo nomos kiam ni unue krei ĉi por-do list.
Kiel vi povas vidi, estas kiel krei la to-do list kaj asociante ĝin kun ĉi tiu opinio.
Kaj poste mi aldonis la funkcioj tie tiel esence kiam vi aldonas eron-
ĉi tiu estas simila al la addItem metodo ni vidis antaŭ-
Mi tuj krei novajn todo objekto, kaj rimarki ke mi reale nomante
tiu nova todo metodo, do tiu estas provizita per Backbone,
kaj mi povas pasi en miaj propraĵoj tie.
Kaj nun ĉiu todo ke mi krei uzante ĉi akiros ke funkciojn, kiun ni vidis antaŭe.
Rimarku Mi liberigante el la teksta kadro antaŭ-malgrandan iom detale-
kaj tiam Mi aldonas tiun kolekton.
>> Ĉi preskaŭ ŝajnas stranga ĉar antaŭ ni simple devis fari tion todos.push,
kaj poste ni estis farita, kaj ĉi eble ŝajnas pli komplika por tiu ĉi aparta projekto,
kaj eble vi trovos ke Backbone aŭ eĉ Angula aŭ ajna alia kadro
ne konvenas al via aparta projekto, sed mi kredas ke estas grave pensi
kion tio signifas en pli granda skalo por pli grandaj projektoj,
ĉar se ni havis pli grandan projekton, kie ni estis reprezentantoj
iuj vere kompleksa kolekto, io pli profunda ol nur to-do list,
diru al amiko-listo aŭ ion similan, tiu povis veni en oportuna
ĉar ni povus organizi niajn kodo en vere konvena maniero,
en maniero kiu farus ĝin pli facila por iu alia
kiu volis repreni projekto por konstrui sur.
Vi povas vidi ke tiu havigas multajn strukturo.
Kaj poste mi vokas repagi sur ĉi addItem.
Redonu, kiel vi povas vidi, kaj vi ne devas kompreni tiun plenan sintakso,
sed esence por ĉiu modelo tuj voki la individuo render metodo.
Tio estas speco de kie ĉi tiu devenas.
Ni simple specifas kiel por repagi la individuo todos,
kaj poste ni glui ilin kune kiel tuto.
Sed ĉi provizas manieron de abstraktado,
ĉar mi povis ŝanĝi la manieron mi decidas por repagi la individuo todos,
kaj mi ne devus ŝanĝi iun el ĉi tiu kodo.
Tio estas speco de malvarmeta.
>> Ĉu iu havas demandojn pri JavaScript kadroj?
[Studenta inaudibles demando]
Ho, certe, tiu estas granda demando.
La demando estis kiamaniere mi inkluzivas la kadroj?
Plej JavaScript kadroj estas esence nur js dosieroj
ke vi povas inkludi ĉe la supro de via kodo.
Rimarku en la kapo posedajxo de mia HTML Mi havas ĉiujn tiujn skripto etikedoj,
kaj la fina skripto etikedo estas la kodo kiun ni skribis.
Kaj tiam la 3 kadro kodoj estas ĝuste ankaŭ skripto etikedoj.
Mi inkludante ilin el kio nomiĝas CDN,
kiu min permesas akiri ĝin de iu alia en ĉi tiu punkto
sed ĉiu kadro havas ĉi-vi povas sufiĉe multe trovi la enhavo
por aparta JavaScript biblioteko disponebla en iuj CDN aŭ ion similan,
kaj tiam vi povas inkludi tiujn skripto etikedoj.
Ĉu tio havas sencon?
Cool.
>> Tiuj estas 2 malsamaj aliroj.
Tiuj ne estas la solaj manieroj, proksimiĝoj al solvi ĉi tiu problemo.
Estas multaj malsamaj aĵoj kiuj
iu povis fari, kaj estas multaj kadroj tie.
Angula kaj Backbone ne diras la tutan historion.
Bonŝancon kun via fina projektoj, kaj dankas vin tre multe.
[CS50.TV]