[Powered by Google Translate] [Seminaari] [Javascript puitteissa: miksi ja miten?]
[Kevin Schmid] [Harvardin yliopisto]
[Tämä on CS50.] [CS50.TV]
>> Hei, kaikki. Tervetuloa JavaScript Runkorakenteet seminaarissa.
Nimeni on Kevin, ja tänään aion puhua JavaScript puitteet,
ja tavoitteena seminaari ei saada sinut vaikkapa hallita erityisesti puitteet sinänsä
mutta antaa sinulle laajan johdannon pari kehysten
ja osoittaa, miksi emme koskaan halua käyttää kehyksen.
>> Ennen minä, että minä antaa hieman taustatietoa JavaScript,
ja sitten otamme sen sieltä.
Aiomme aloittaa toteuttamalla tehtävälista.
Tässä meidän tehtävälistan tänään.
Se on tavallaan hauska. Meidän on pantava täytäntöön tehtävälista JavaScript.
Tämä on mitä se tulee näyttämään, niin se on meidän ensimmäisen maalin.
Emme aio käyttää puitteet tehdä.
Aiomme koodin JavaScript ja saada tehtävälista töihin.
Sitten aiomme parantaa suunnittelua ilman kehystä.
Aiomme keskustella eri asioita voimme tehdä vain JavaScript yksin
jotta meidän tehtävälista hieman hyvin suunniteltu.
Sitten aiomme heittää noin jQuery,
ja sitten olemme menossa katsomaan samaa tehtävälistan,
vain toteutettu eri viitekehyksiä, ja kerromme mielellämme
plussat ja miinukset matkan varrella.
>> Aloitetaan täytäntöön panemiseksi tehtävälista.
Sanotaan meille annetaan tämän HTML.
Aion tehdä tästä hieman pienempi.
Kuten näette, minulla on pieni otsikko, joka kertoo Todo
ja pieni laatikko, jossa voin kirjoittaa kuvauksen todo
ja sitten uusi kohde-painiketta, niin yritetään syöttää uuden todo tähän luetteloon.
Anna JavaScript puitteet seminaarin,
ja olen lyödä uuden kohteen.
Saan tämän JavaScript ilmoitus, joka kertoo toteuttaa minua.
Meidän täytyy toteuttaa se.
Katsotaan Tutustu koodi tähän, niin HTML ja JavaScript.
Tässä on meidän HTML.
Kuten näette täällä, tässä meidän pikku Todos otsikkoa.
Se oli rohkea asia huipulla,
ja sitten meillä on tulo laatikko paikanvaraajassa
ja sitten on tietty ominaisuus tätä painiketta, joka kutsuu tätä toimintoa addTodo.
Haluaako joku arvata mitä se on napsahdus merkitsee?
[Student äänetön vastaus]
Hyvä, on click on eräänlainen kuten tapahtuman
kuten hiirellä on vain tapahtuma, ja mitä teemme
on me sitominen tapauksessa klikkaamalla tätä painiketta suorittaa kyseistä tehtävää.
AddTodo on tämän tapahtuman käsittelijä klikkaamalla tätä nappia.
>> Kuten näette, kun napsautan uusi kohde-painiketta
on napsautuksen saa potkut, ja tämä toiminto saa kutsutaan.
Katsotaanpa toiminto.
Kuten näette, tässä on minun JavaScript-koodia toistaiseksi.
Mitä olen huipulla on globaali tietorakenne minun tehtävälista.
Se näyttää array. Se on vain tyhjä joukko.
Ja sitten minulla on addTodo toiminto että näimme aiemmin,
ja vain rivi koodia on tämä hälytys.
Se hälyttää toteuttaa minua, ja sitten minulla on 2 tehtäviä käsillä.
Minun täytyy lisätä todo kuin globaali data rakenne,
ja sitten haluan vetää pois tehtävälista.
Ei mitään liian fancy ihan vielä, mutta JavaScript saatat olla tunne,
joten aion mennä hitaasti ja tarkistaa perusteet JavaScript tällä tavalla.
>> Annetaan tämän laukaus.
Sanotaan käyttäjä kirjoittaa jotain tähän ruutuun.
Olen juuri kirjoittanut jotain täällä, tekstiä.
Miten lajitella tutustua tämän tekstin kautta JavaScript?
Muista, että JavaScript, yksi sen peruspiirteitä on, että se antaa meille
Tämän ohjelmallisen DOM.
Se antaa meille mahdollisuuden käyttää elementtejä ja niiden ominaisuuksia tämän varsinainen HTML.
Tapamme tehdä paljain luut JavaScript
on voimme itse käyttää toimintoa JavaScript kutsutaan getElementByID.
Haluan tallentaa tekstin, joka on kirjoitettu siellä joitakin muuttuja,
joten aion sanoa uusi muuttuja nimeltä new_todo,
ja aion saada, että elementti.
Tämä on toiminto,. GetElementByID.
Ja nyt Saan elementin ID, joten minun täytyy ID kyseisen tekstikenttään
joten olen antanut sen tunnus new_todo_description.
Niin aion saada elementti.
Se on minun argumentti tätä toimintoa, määrittää, mitkä ID päästä.
Ja niin se on osa HTML, ja sillä on ominaisuuksia.
Olet nähnyt näitä. He ominaisuuksia.
Ominaisuus tekstin elementti, joka tallentaa käyttäjän tulo on nimeltään arvoa.
Säästin arvo, joka tekstikenttään nyt tässä muuttuja nimeltä new_todo.
Nyt minulla on ohjelmallisen tämä muuttuja, joka on eräänlainen jäähtyä
koska nyt, mitä voin tehdä, on voin lisätä sen minun tehtävälista.
>> Tavalla voisimme tehdä tämän JavaScript-ja älä huolestu, jos et tunne tätä,
mutta juuri menossa läpi se on todos.push
koska se on nimi minun globaalin tietorakenteen tänne,
ja aion työntää new_todo.
Tämä on suuri, koska nyt olen lisännyt sen minun JavaScript
edustus että tehtävälista.
Mutta nyt miten saan sen takaisin HTML?
Minun täytyy löytää tapa tavallaan työntää sen takaisin.
Toisin sanoen, olen sellainen täytyy tehdä tämä.
Mitä aiomme tehdä, on aiomme tehdä tehtävälista.
Minun täytyy päivittää muita HTML sillä sivulla,
ja kuten näette, olen jättänyt tämän pienen astian täällä,
Tämän jakajan sivu, jonka tunnus on todos,
ja aion laittaa tehtävälistan siellä.
Ensinnäkin aion selvittää sitä, koska sanovat, oli vanha tehtävälista siellä.
Saan, että elementin ID jälleen
ja olen päästä sisäinen HTML kyseistä tekijää,
ja aion selväksi, että.
Jos jättäisimme tämän koodin on, näkisimme tyhjä mitään siellä,
ja nyt haluan aloittaa tekee minun uusi tehtävälista.
Olen periaatteessa aio tuhota minun tehtävälista.
>> Nyt sisäinen HTML sisällä että todos div on täysin selvää,
ja nyt minun täytyy aloittaa lisäämällä listallani.
Ensimmäinen asia, jonka haluan lisätä takaisin on Järjestämätön lista tag,
joka pohjimmiltaan tarkoittaa, että tämä on alku Järjestämätön lista.
Nyt jokaisen osa minun todos array haluan tulostaa sen sisällä että HTML.
Haluan liittää sen pohjaan tämän listan.
Aivan kuten C, voin käyttää silmukan, ja aion aloittaa alusta listallani
alkioon 0 ja aion mennä aina listan pituus.
Voimme itse saada pituutta array JavaScript käyttäen pituus omaisuutta.
Periaatteessa aion tehdä jotain hyvin samanlaista sisällä täällä
tulostaa, että elementti.
Voin taas käyttää todos div, sisäinen HTML omaisuutta, että
ja aion lisätä tämän uuden luettelon kohtaan, ja että menee ympärilleen
Tämän li tag, ja aion liität kanssa + operaattori,
ja se on i: s osa minun todos array,
ja sitten aion lähellä, että tag.
Nyt jokaisen elementin me lisäämme uuden luettelon kohtaa.
Ja sitten kaikki me todella tarvitsee vain sulkea pois, että tag.
Minun täytyy vain sulkea pois, että Järjestämätön lista tag.
>> Saatko tuntumaa miten se toimii?
Tämä avaa koko lista.
Tämä lisää yksittäisiä elementtejä todos luettelosta listalle
ja sitten joka sulkee koko luettelon, ja tämä on minun addTodo toiminto.
Olen periaatteessa aloittaa saamalla todo alkaen tekstikenttään.
Lisään, että todos jono, ja sitten uudelleen tehdä tehtävälista.
Nyt voin lisätä kohteita listallani.
Tämä on tavallaan jännittävää, koska vain muutaman rivin koodia
olemme pohjimmiltaan tehty tehtävälista, jossa voimme lisätä kohteita.
Suuri.
Sellainen johdantona JavaScript.
Älä murehdi liikaa syntaksin nyt
mutta ajattele tätä käsitteellisesti.
Meillä oli joitakin HTML.
Meillä oli tekstikenttään sivulle että pohjimmiltaan käyttäjät saattoivat tulo-do lisättävä tieto.
Ja sitten käytimme JavaScript noutaa tämän todo tästä tekstikenttään.
Olemme tallennettu, että sisällä JavaScript array, joka on pohjimmiltaan kuin
meidän ohjelmallinen edustus, että to-do lista,
ja sitten tulostaa sen ulos.
Tämä on todos.js.
>> Tämä on eräänlainen jäähtyä, mutta miten voimme ottaa tämän lisäksi?
No, kuten näette, tämä ei ole kuin täydellinen tehtävälista.
En esimerkiksi voi merkitä joku näistä epätäydellisenä
kuten jos halusin reprioritize kohteita tai poistaa kohteita.
Tämä on ihan ok, mutta voimme ottaa tämän pidemmälle.
En aio puhua liikaa lisäämällä ylimääräisiä ominaisuuksia,
mutta voisimme ottaa tämän pidemmälle.
Puhutaanpa lisäämällä yksi ominaisuus tämän tehtävälistan,
joka aiotaan pysty tarkistaa yksilön-do erä
ja on se on yliviivattu, joten periaatteessa sanoen olen tehnyt tämän.
Katsotaanpa joitakin koodi, joka voisi tehdä sen.
Huomaa, mitä olen tehnyt yläosassa on Olen lisännyt
uusi globaali array nimeltään täydellinen.
Olen periaatteessa käyttää tätä tallettaa, onko kohteet tehtävälista
valmiit tai eivät.
Tämä on yksi tapa tehdä tämä.
Jos katson täytäntöönpanoa, näyttö,
Periaatteessa jos astun todo ja painan tätä Vaihtopainike
se ylittää pois, niin jokaisen kohteen listalta on joko täydellinen
tai puutteellinen valtion, ja käytän jotain toista array edustaa tätä.
>> Periaatteessa jokaisen todo että todos array
siellä kohteen täydellinen valikoima, joka pohjimmiltaan osoittaa
onko tämä valmis vai ei.
Olen joutunut tekemään melko minimaalinen muutoksia tämän koodin,
joten tässä on meidän addTodo toiminto.
Huomaa, että täällä olen työntämällä se kiinni array,
ja sitten olen työntää 0 että täydellinen valikoima,
periaatteessa samaan tapaan kuin uuden todo push sanoa
Olen lisäämällä tämän kohteen, ja se yhdistettynä tämän arvon,
mikä tarkoittaa, että se on puutteellinen.
Ja sitten olen uudelleenvetämisestä tehtävälista.
Nyt, huomaa Olen lisännyt tämän drawTodoList toimintoa.
Tämä vie paljon koodia meillä oli ennen,
pohjimmiltaan tyhjentää ulos laatikosta ja piirtää sitten uusi tehtävälista.
Mutta huomaa, että sisällä tämän silmukan teemme hieman nyt.
Olemme periaatteessa tarkistaa, onko tuote vastaa nteen todo täällä
on valmis, ja olemme käyttäytyy eri tavalla nämä 2 olosuhteissa.
Jos se on valmis, me lisäämällä tämä del tag,
joka on pohjimmiltaan tapa voit saada, että lakko kautta vaikutus
ylittäessään ulos tehtävälista, jos se on valmis,
ja jos se ei ole, emme kuten se.
Ja niin tuollainen huolehtii, että
>> ja se on yksi tapa saavuttaa tämä.
Ja sitten huomaa, kun käyttäjä napsauttaa yksi näistä
me vaihtaa loppuun tila sitä.
Kun käyttäjä napsauttaa, me kääntää onko se tehty vai ei,
ja sitten me piirtää sen.
Tällainen teoksia.
Meillä on näitä toimintoja, jotka suorittavat omat tehtävänsä,
ja tämä on kunnossa.
Onko jotain voisimme tehdä paremmin tästä, vaikka?
Huomaa meillä on nämä 2 maailmanlaajuista paneelit.
Jos tämä oli C, ja meillä oli 2 paneelit sellainen edustettuina
tiedot, jotka tavallaan liittyvät jollain tavalla
mitä käytämme C yhdistää nämä 2 kenttää
jotain, joka kattaa sekä paloja tiedot?
Joku haluaa tehdä ehdotuksen?
[Student äänetön vastaus]
>> Täsmälleen, jotta voisimme käyttää jonkinlaista struct,
ja jos muistelen vaikkapa PSET 3,
Muistan meillä oli sanakirja, ja sitten meillä oli, onko sana
oli sanakirja, ja kaikki tiedot on koonnut
sisällä Joidenkin tietojen rakenteen.
Yhden asian voin tehdä tämän koodin välttää nämä 2 eri paneelit
vastaavia paloja tiedot on voin yhdistää ne JavaScript esine.
Katsotaanpa katsomaan sitä.
Huomaa Minulla on vain yksi joukko yläreunassa nyt
ja mitä olen tehnyt on-ja tämä on vain JavaScript syntaksi eräänlainen
luoda kirjaimellinen versio esineen,
ja huomaa siellä on 2 kiinteistöä, joten meillä on todo,
ja se pidetään yhdessä, onko se täydellinen tai epätäydellinen.
Tämä on hyvin samanlaista koodi.
Käytämme JavaScript esineitä.
Tällainen paranee asioita.
Kuten nyt, kaikki nämä alat liittyvät tiedot pidetään yhdessä.
Kun menemme tulostaa sen, voimme käyttää kentät.
>> Huomaa kuinka teemme todos [i]. Täydellinen
sijaan tarkkailun täydellinen valikoima erikseen,
ja huomaa, kun haluamme saada tehtävälistan string saamme to-do omaisuutta
Tämän todo, joten tällainen on järkevää, koska
jokainen erä on nämä luontaiset ominaisuudet siitä.
Se on todo, ja se on, onko se valmis vai ei.
Ei liikaa muutoksia on toiminnallisesti, vain lisäsin enemmän koodia.
Tämä on parannus joitakin rintamalla, eikö?
Tarkoitan, me pois laskusta suunnittelu hieman.
Nyt meillä on vastustaa periaatteessa kiteyttää asian tietoja.
Onko mitään voisimme tehdä täältä kannalta JavaScript?
Kuten huomaa, että tämä koodi täällä
saada sisäinen HTML div
on pieni, luulisin, pitkä.
On document.getElementById ("todos"). InnerHTML.
Yksi asia voisimme tehdä, jotta tämä koodi näyttää hieman ystävällisempi
joten en tarvitse pitää siirtymällä vasemmalle ja oikealle, edestakaisin,
on voisin käyttää kirjaston kuten jQuery.
>> Katsotaan Tutustu Seminar 2,
ja tämä on sama koodi, mutta se on tehty jQuery.
Et voi olla liian tuttu jQuery,
mutta vain tietää, että jQuery on eräänlainen kirjasto JavaScript
että on helpompi tehdä asioita, kuten pääsy yksittäisiä osia DOM.
Täällä sen sijaan sanoa document.getElementById ("todos"). InnerHTML
Voin käyttää paljon puhtaampaa miten jQuery,
joka on vain käyttää valitsimia.
Kuten näette, tämä koodi ei saada hieman puhtaampi,
hyvin samankaltainen toiminnallisesti, mutta se idea.
Olemme nähneet pari asiaa niin pitkälle,
Aloimme vain raaka JavaScript toteutuksesta.
Lisäsimme uusia ominaisuuksia ja osoitti, kuinka voimme parantaa sitä
mitä meillä on JavaScript.
>> Ei kukaan näe mitään vaikeuksia tällä grafiikalla?
Nimittäin, kai-tai ei välttämättä vaikeuksia, mutta sanotaanko
emme olleet tekemässä tehtävälistan projekti, ja huomenna päätimme
halusimme tehdä päivittäistavarakaupan luettelo tai ostoslistan projekti.
Monet näistä ominaisuuksista ovat hyvin samankaltaisia.
Paljon asioita haluamme päästä pois JavaScript ovat hyvin yleisiä,
ja tämä korostaa tarvetta jonkinlainen tapa
joten tämä helpompi tehdä.
Jouduin rakentaa kaiken tämän HTML-yhteys, tämä kaikki DOM-yhteys,
kuten aion edustaa tehtävälistan tätä mallia.
Ja huomaa olen vastuussa, koska JavaScript kehittäjä
pitää HTML-ja JavaScript, että minulla on synkassa.
Mikään ei automaattisesti tehdä, että JavaScript edustus
tai tehtävälista saada työnnetään ulos HTML.
Mikään täytäntöön, että paitsi minä.
Jouduin kirjoittamaan piirtää tehtävälista toiminto.
Ja se ei voi olla-Tarkoitan, on järkevää tehdä,
mutta se voi olla ikävä joskus.
Jos sinulla on laajempaa hanketta, joka voisi olla vaikeaa.
>> Viitekehyksiä, yksi tarkoitetaan kehysten
on yksinkertaistaa tätä prosessia ja tavallaan tekijä ulos
Näiden yhteisten-kai voisi sanoa-suunnittelumalleja
että ihmiset yleensä on jonkinlainen tapa esittää tietoja,
onko se kaverilista, onko se karttatietoja
tai jotain tai tehtävälista.
Jotkut ihmiset ovat yleensä tapa esittää tietoa,
ja ne yleensä täytyy pitää, että tietojen tavallaan synkassa
välillä, mitä käyttäjä näkee jonkinlainen näkymä,
puhuu kannalta, kuten mallin View Controller että näit luento,
ja sitten malli, joka tässä tapauksessa on tämä JavaScript array.
Kehykset antavat meille tapa ratkaista tämä ongelma.
Nyt katsomaan täytäntöönpanon tehtävälista
in puitteissa kutsutaan angularjs.
Tämä on se. Huomaa se mahtuu liukumäki.
Minulla ei tarvitse siirtyä vasemmalle ja oikealle.
Se luultavasti ei ole hyvä syy kannattaa käyttää kehyksen,
mutta huomaa olen koskaan päästä yksittäisiä HTML-elementtejä täällä?
Olenko koskaan menee DOM?
Näetkö mitään document.getElementById tai jotain?
Ei, se on mennyt.
>> Kulmikas auttaa meitä pitämään DOM ja JavaScript-edustus jotain
Tällainen synkassa, joten jos se ei ole js-tiedoston,
jos ei ole mitään tapaa ohjelmallisesti saada kaikki HTML-sisältöä
alkaen JavaScript miten me pitää tämä sync?
Jos se ei ole. Js-tiedoston, se täytyy olla HTML, eikö?
Tämä on uusi versio HTML-tiedoston,
ja huomaat olemme lisänneet paljon täällä.
Huomaa siellä on näitä uusia ominaisuuksia, jotka sanovat ng-click ja ng-toista.
Kulmikas lähestymistapa ongelman ratkaisemiseen vaikeuksia suunnittelu
on periaatteessa tehdä HTML paljon tehokkaampia.
Kulmikas on tapa, jonka avulla voit tehdä HTML hieman ilmeikäs.
Esimerkiksi voin sanoa, että aion sitoa tai sitoa tähän tekstikenttään
muuttujaan sisällä Kulmikas JavaScript-koodia.
Tämä ng-malli tekee juuri sen.
Että pohjimmiltaan sanoo, että kohteen sisällä tämän tekstikenttään
vain liittää että muuttujan new_todo_description
sisällä JavaScript-koodia.
Se on erittäin tehokas, koska minulla ei ole nimenomaisesti mennä
DOM saada nämä tiedot.
Minulla ei ole sanottavaa document.getElementById.
Minulla ei ole käyttää jQueries kuin DOM-yhteys.
Voin yhdistää sen vaihteleva, ja sitten kun muutan, että muuttuja
kuluessa JavaScript se pitää synkronoituna HTML,
jotta yksinkertaistaa tarvitse mennä edestakaisin kahden.
Onko järkeä?
>> Ja huomaa ei ole HTML-koodin.
Olemme juuri tehneet HTML tehokkaampia,
ja nyt esimerkiksi, voimme tehdä asioita, kuten tämä,
kuten silloin, kun klikkaat tätä, kutsuvat tätä toimintoa puitteissa todos.js,
ja voisimme tehdä, että ennen, mutta on muitakin asioita, kuten tämä ng-malli,
ja huomata tämän ng-toista.
Mitä mieltä olet tästä tekee?
Tässä meidän Järjestämätön lista entuudestaan.
Meillä on ul tunnisteet,
mutta olen koskaan tekee luetteloon sisällä JavaScript-koodin?
En koskaan nimenomaisesti tekee luetteloon.
Miten tämä toimii?
No, miten Kulmikas tekee tämän on tätä kutsutaan toistin.
Pohjimmiltaan tämä sanoo, että haluan tulostaa tämän HTML
jokaista todo sisällä minun todos array.
Sisällä todos.jr on todos array täällä,
ja tämä kertoo Kulmikas käydä läpi että jono, ja jokaisen elementin näet
Haluan tulostaa tämän HTML.
Tämä on tavallaan mahtava, koska en voi vain tehdä tämän
ilman kirjoittaa silmukka,
joka on to-do lista, joka oli vain 30 riviä koodia
ei voi olla eniten hyötyä asia,
mutta jos sinulla on suuri projekti, tämä voisi saada erittäin kätevä.
>> Tämä on yksi ratkaisu ongelmaan, jolloin HTML tehokkaampia,
ja jonka avulla voimme säilyttää JavaScript ja HTML synkassa.
On muitakin mahdollisia tapoja ratkaista tämä ongelma,
eikä jokainen puitteissa tämä.
Ei jokainen puitteissa toimii näiden linjojen.
Jotkut puitteita on erilaisia ​​lähestymistapoja,
ja saatat huomata, että nautit koodaus yhdessä puitteissa yli muiden.
Katsotaanpa yksi.
Tämä on tehtävälista koodattu ylös puitteissa kutsutaan selkäranka.
Aion käydä tämä läpi nopeasti.
Aloitan HTML ennen kuin menemme sinne.
Yksi toinen.
Alkaen HTML, kuten huomaat, meidän HTML on hyvin samankaltainen
mitä se oli ennen, niin ei liikaa uutta tällä rintamalla.
Mutta meidän js tiedosto on hieman erilainen.
Selkäranka sellainen on tämä idea, tai perustuu ajatukseen
että paljon siitä, mitä me teemme, sano, JavaScript-hankkeita
on miettiä malleja ja kokoelmat näistä malleista.
Tämä voisi olla esimerkiksi valokuva ja kokoelmien kuvia,
tai ajatus ystävä ja kokoelmia ystäviä.
Ja usein kun olemme ohjelmointi JavaScript sovelluksia
me tavallaan edustaa ajatus ottaa kokoelma ystäviä
jotenkin JavaScript, ja selkäranka antaa meille tämän kerroksen
päälle JavaScript n nykyiset taulukot ja esineet
tehdä tehokkaampia asioita, jotka helpommin.
>> Täällä olen määritellyt to-do mallin
ja sinun ei tarvitse huolehtia liikaa syntaksin,
mutta huomaa, että mitä yksi ominaisuuksia tämän?
Se on oletuksena kentän.
Selkäranka avulla voin määrittää jo pois bat
tahansa uuden tehtävän, että luon joutuu nämä oletukset.
Nyt voin muokata tätä, mutta se voi määrittää oletusarvot
on mukavaa, ja se on eräänlainen kätevä, koska tämä ei ole jotain, joka on kuin
luonnostaan ​​JavaScript, ja nyt minulla ei ole nimenomaisesti
sanoa, että todos ovat puutteellisia.
Voin sanoa suoralta kädeltä, että todos aiotaan merkitä puutteellisia.
Huomaa, niin mitä tämä on?
Nyt minulla on to-do lista, ja se on kokoelma.
Huomaa kentän liittyy joka kertoo mallin todo.
Tämä on minun tapani kertoa Backbone, että
Aion miettiä kokoelma näitä yksittäisiä todos.
Tämä on periaatteessa mallin rakenne minun ohjelma.
Täällä minulla on tämä ajatus kokoelma,
ja periaatteessa erille, että kokoelma on kaikki olemaan näiden todos,
ja se on hyvin luonnollista tässä mielessä
koska minulla on todos, ja minulla on ne kokoelma.
>> Katsotaanpa hieman tätä.
Tässä on Backbone näkymä.
Toinen asia, joka Backbone sanoo, että
paljon malleja, jotka olet ajatellut tai edes kokoelmista
menossa täytyy olla jokin keino näytössä.
Meidän täytyy tehdä, että to-do lista,
ja eikö olisi hienoa, jos voisimme tarjota kunkin mallin
tai liittävät kunkin mallin mieltä
jonka avulla voimme kai yhdistää kaksi yhdessä?
Kun ennen meidän täytyi käyttää silmukka, joka kulkisi läpi
joka todo listalta ja sitten tulostaa sen täältä
Voimme periaatteessa liittää sen tämän mallin.
Tämä on tehtävänäkymän.
Tämä liittyy todo löysimme aikaisemmin.
Nyt jokainen todo on näytettävissä tai renderable
Tämän tehtävänäkymän.
Huomaa joitakin kenttiä.
Mitä luulette tämän tagname on, tagname: li?
Muistan ennen kun halusimme tehdä todo
meidän olisi nimenomaisesti yhdistää meidän todos tämän li tag.
Nyt sanomme, että jos tämä todo aiomme elää
tulee olemaan sisällä li tag.
Ja nyt olemme myös liittämällä tapahtumia meidän todos.
>> Jokainen todo on tämä yksi tapahtuma.
Jos valitset melko paljon toggle, että mitä sanon siellä,
Sitten periaatteessa merkitä todo vastakohdaksi, mitä se oli ennen
ja sitten uudelleen, hakemus.
Tämä on tavallaan samanlainen koodin ennen.
Muistatko, kun vietimme sitä joko vastakkain tai-
ja sitten uudelleen sulatettu sitä.
Mutta huomaa nyt tämän tapahtuman käytetään olla jotain, joka oli HTML.
Se istui siellä.
Painike oli päällä napsautuksella.
Kun klikkaat painiketta, se tavallaan tekee juttuja
perustettu että todo olevan puutteellinen.
Täällä olemme liittyy, että jos napsauttaa Vaihtopainike
ja peruutettaessa onko se päälle tai pois päältä mieltä.
>> Tämä on mukava tapa perustaa tämän tapahtuman niin, että se on hyvin tiukasti sidoksissa
Tämän näkemyksen, ja niin huomaa tämä yksi.
Minulla on se synnytä menetelmää, ja meidän ei tarvitse käydä läpi yksityiskohtia.
Se on tavallaan samanlainen kuin mitä meillä oli ennen,
mutta huomaa En silmukoiden läpi mitään.
En tulostamista ul tunniste, joka on tavallaan sanonta aion tulostaa kaikki elementit.
Olen tarjota toiminnallisuus tekee tämä yksi tehtävälistan kohde.
Tämä on hyvin voimakas käsite, koska periaatteessa
meidän to-do lista koostuu kaikista näistä todos, ja jos voimme periaatteessa määrittää
tapa tehdä yksi niistä todos
Sitten voimme olla meidän voimakas selkäranka sinänsä tehdä kaikki todos
soittamalla renderöinti menetelmää yksittäisten todos.
Tämä on käsite, joka on hyödyksi.
Nyt hyvä kysymys on, miten tämä sovellus koottavaa?
Koska meillä on kyky tehdä yhden todo,
mutta miten saamme käsityksen useita todos?
>> Katsotaanpa katsomaan sitä.
Tämä on viimeinen osa.
Huomaa meillä tehtävälistan näkymä täällä,
ja huomaa se on myös näkymä.
Ja mennä yli pari asiaa,
Tämän alustaa menetelmää kutsutaan kun ensin luoda tämän tehtävälista.
Kuten näette, se on kuin luoda tehtävälistan ja liittänyt sen tähän näkemykseen.
Ja sitten lisäsin rakenteista joten periaatteessa kun lisäät kohde-
tämä on samanlainen addItem menetelmän näimme ennen-
Aion luoda uuden todo esine, ja huomaa Olen oikeastaan ​​soittamalla
Tämän uuden todo menetelmä, joten tästä on selkäranka,
ja voin kulkea minun ominaisuudet täällä.
Ja nyt jokainen todo että luon käyttämällä tätä ja saada sen toiminnallisuutta, että näimme ennen.
Huomaa Olen tyhjentämistä tekstikenttään ennen-pienen pieni yksityiskohta-
ja sitten olen lisäämällä tämä kokoelma.
>> Tämä melkein siltä outoa, koska ennen meillä oli vain tehdä todos.push,
ja sitten me tehtiin, ja tämä saattaa tuntua monimutkaisempaa tähän hankkeeseen,
ja saatat huomata, että selkäranka tai jopa Kulmikas tai muita puitteita
ei sovi tiettyyn hankkeeseen, mutta mielestäni on tärkeää miettiä
mitä tämä tarkoittaa laajemmassa mittakaavassa suurempia hankkeita
koska jos meillä olisi laajempaa hanketta, jossa olimme edustavat
joitakin todella monimutkainen kokoelma, jotain syvempää kuin vain tehtävälista,
sanokaamme kaveriluetteloon tai jotain, tämä voisi olla hyötyä
koska voisimme organisoida koodi todella kätevä tapa,
tavalla, joka helpottaisi joku muu
joka halusi poimia projekti rakentuu.
Voit nähdä, että tämä tarjoaa paljon rakenne.
Ja sitten soitan tehdä tästä addItem.
Tehdä, kuten näette, ja sinun ei tarvitse ymmärtää tämän täysin syntaksin,
mutta pohjimmiltaan kunkin mallin se tulee soittaa yksittäisiä renderöinti menetelmällä.
Se on tavallaan, jos tästä tulee.
Katsotaanpa vain määrittää miten tehdä yksittäisiä todos,
ja sitten nyt liimaa ne yhteen koko.
Mutta tämä tarjoaa tavan abstraktio,
koska en voi mullistaa päätän tehdä yksittäisiä todos,
enkä ole muuttanut tätä koodia.
Se on aika siistiä.
>> Onko kellään mitään kysyttävää JavaScript puitteet?
[Student äänetön kysymys]
Tietysti, se on hyvä kysymys.
Kysymys oli, miten minä myös kehysten?
Useimmat JavaScript puitteet ovat pohjimmiltaan vain js-tiedostojen
että voit sisällyttää yläreunassa koodin.
Ilmoituksen pääosan minun HTML minulla on kaikki nämä koodit,
ja lopullinen komentosarjatunnus on koodi, että olemme kirjoittaneet.
Ja sitten 3 puitteet koodit ovat vain myös koodit.
Olen myös ne mitä kutsutaan CDN,
jossa voin saada sen joku muu tässä vaiheessa
mutta jokainen kehys on tämä-voit melko paljon löytää sisältöä
Tietyn JavaScript-kirjaston käytettävissä joissakin CDN tai jotain,
ja sitten voit sisällyttää nämä koodit.
Onko järkeä?
Cool.
>> Ne ovat 2 eri lähestymistapoja.
Nämä eivät ole vain lähestymistapoja ongelman ratkaisuun.
On olemassa monia eri asioita, jotka
joku voisi tehdä, ja on olemassa monia järjestelmiä siellä.
Kulma-ja selkäranka eivät kerro koko totuutta.
Onnea opinnäytetöissä, ja kiitos paljon.
[CS50.TV]