[Powered by Google Translate] [Seminar] [JavaScript Frameworks: waarom en hoe?]
[Kevin Schmid] [Harvard University]
[Dit is CS50.] [CS50.TV]
>> Hallo, allemaal. Welkom op de webbrowser Frameworks seminar.
Mijn naam is Kevin, en vandaag ga ik het hebben over JavaScript-frameworks,
en het doel van dit seminar is niet om u te zeggen, meester een bepaald raamwerk per se
maar om u een brede introductie te geven aan een paar kaders
en laten zien waarom we ooit zouden willen een kader te gebruiken.
>> Voordat ik dat doe, zal ik zorgen voor een beetje achtergrond in JavaScript,
en dan zullen we het vanaf daar.
We gaan beginnen met de implementatie van een to-do lijst.
Hier is onze lijst taak voor vandaag.
Het is wel grappig. We moeten een to-do lijst in JavaScript te implementeren.
Dit is wat het gaat uitzien, dus dat is ons eerste doel.
We gaan niet om een ​​kader te gebruiken om dat te doen.
We gaan naar code JavaScript en krijgen de to-do lijst te werken.
Dan gaan we naar het ontwerp te verbeteren zonder gebruik van een raamwerk.
We gaan naar de verschillende dingen die we kunnen doen met slechts JavaScript alleen bespreken
om onze make to-do lijst een beetje meer goed ontworpen.
Dan gaan we gooien in een aantal jQuery,
en dan gaan we kijken naar hetzelfde to-do lijst,
net geïmplementeerd in verschillende kaders, en we zullen bespreken
de voor-en nadelen langs de weg.
>> Laten we beginnen met de uitvoering die to-do lijst.
Laten we zeggen dat we gaven deze HTML.
Ik ga het een beetje kleiner te maken.
Zoals je kunt zien, heb ik een beetje header die Todo zegt
en een klein doosje waar ik een beschrijving van een todo kunt invoeren
en vervolgens een nieuwe knop punt, dus laten we proberen om een ​​nieuwe todo invoeren om deze lijst.
Geef een JavaScript-frameworks seminar,
en ik ben naar nieuw item te raken.
Ik krijg deze JavaScript waarschuwing die zegt implementeren me.
We hebben om het te implementeren.
Laten we eens kijken op de code voor dit, zowel de HTML en JavaScript.
Hier is onze HTML.
Zoals je hier kunt zien, is hier onze kleine Todos header.
Dat was dat vet ding aan de top,
en dan hebben we het invoerveld met de tijdelijke aanduiding,
en dan is er een bepaalde eigenschap van deze toets aan dat deze functie addtodo noemt.
Heeft iemand willen raden wat dat op klik wordt betekenende?
[Student onverstaanbaar antwoord]
Goed, het op click is een beetje als een gebeurtenis,
net als met de muis is gewoon een evenement, en wat we doen
is wij binden de gebeurtenis van het klikken op deze knop om die functie uit te voeren.
Addtodo is dit event handler voor het klikken op die knop.
>> Zoals je kunt zien, wanneer ik klik op de nieuwe knop artikel
de op gebeurtenis click wordt ontslagen, en deze functie wordt aangeroepen.
Laten we eens kijken naar de functie.
Zoals je kunt zien, hier is mijn JavaScript-code tot nu toe.
Wat heb ik aan de top is een wereldwijde datastructuur voor mijn to-do lijst.
Het ziet eruit als een array. Het is gewoon een lege array.
En dan heb ik het addtodo functie die we eerder zagen,
en de enige regel code is er deze waarschuwing.
Het waarschuwt implementeren mij, en dan heb ik 2 taken bij de hand.
Ik moet de todo toe te voegen aan dat de wereldwijde data structuur,
en dan wil ik te trekken uit de to-do lijst.
Niets te fancy gewoon nog niet, maar JavaScript kunt u niet vertrouwd zijn met,
dus ik ga te langzaam gaan en bekijk de fundamenten van JavaScript op die manier.
>> Laten we geven deze een schot.
Laten we zeggen dat de gebruiker iets in dit veld betreedt.
Ik heb gewoon iets in hier, tekst getypt.
Hoe krijg ik soort van toegang die tekst via JavaScript?
Onthoud dat JavaScript, een van de fundamentele kenmerken ervan is dat het ons geeft
deze programmatische toegang tot de DOM.
Het stelt ons in staat om toegang te krijgen tot elementen en hun eigenschappen van deze eigenlijke HTML.
De manier waarop we dat doen met kale botten JavaScript
is kunnen we eigenlijk een functie in JavaScript genaamd getElementById gebruiken.
Ik wil de tekst die er in sommige variabele is getypt slaan,
dus ik ga zeggen een nieuwe variabele genaamd new_todo,
en ik ga dat element te krijgen.
Dit is een functie. GetElementById.
En nu ben ik steeds een element van ID, dus ik moet de ID van dat tekstvak,
dus ik heb het gezien de ID new_todo_description.
Dat is hoe ik ga een element te krijgen.
Dat is mijn argument om deze functie aan te geven welke ID te krijgen.
En dat is dus een element in HTML, en heeft eigenschappen.
Je hebt gezien deze. Ze zijn attributen.
Het kenmerk van het tekstelement dat invoer van de gebruiker opslaat heet waarde.
Ik redde de waarde van dat tekstvak nu in deze variabele genaamd new_todo.
Nu heb ik programmatische toegang tot deze variabele, dat is wel cool
want nu wat ik kan doen is dat ik het kan toevoegen aan mijn to-do lijst.
>> De manier waarop we zouden dit doen in JavaScript-en maak je niet als je niet bekend mee bent,
maar gewoon door het todos.push
want dat is de naam van mijn globale datastructuur hier,
en ik ga new_todo duwen.
Dit is geweldig, want nu heb ik het toegevoegd aan mijn webbrowser
vertegenwoordiging van die to-do lijst.
Maar nu hoe krijg ik het terug naar de HTML?
Ik moet een manier vinden om een ​​soort van duw hem terug te vinden.
Met andere woorden, I soort moet deze tekenen.
Wat we gaan doen is gaan we de to-do lijst te trekken.
Ik moet aan andere HTML werken op die pagina,
en zoals je kunt zien, heb ik deze kleine container hier linksaf,
Deze verdeler van de pagina waarvan de ID is todos,
en ik ga naar de takenlijst daar te zetten.
Eerst ga ik het duidelijk uit omdat, zeggen, er was een oude takenlijst daar.
Ik krijg dat element door ID weer,
en ik ben de toegang tot de innerlijke HTML van dat element,
en ik ga duidelijk dat.
Als we vertrokken deze code zo is, zouden we een blanco daar niets te zien,
en nu wil ik beginnen renderen mijn nieuwe to-do lijst.
Ik ben in principe gaat om het afschaffen van mijn to-do lijst.
>> Nu de binnenste HTML binnenkant van dat todos div is volledig helder,
en nu moet ik beginnen met het toevoegen van mijn lijst.
Het eerste wat ik wil terug toe te voegen is de ongeordende lijst-tag,
die in feite geeft aan dat dit het begin is van een ongeordende lijst.
Nu voor elk element in mijn todos scala ik wil het uitprinten binnenkant van dat HTML.
Ik wil het toevoegen aan de onderkant van deze lijst.
Net als in C, kan ik gebruik maken van een lus, en ik ga om te beginnen bij het begin van mijn lijst
bij element 0, en ik ga helemaal naar de lengte van de lijst gaan.
We kunnen eigenlijk de lengte van een array in JavaScript met de eigenschap length.
In principe ga ik iets vergelijkbaars doen binnenkant van hier
om uit te printen dat element.
Ik kan weer toegang krijgen tot de todos div, de binnenste HTML eigenschap van dat,
en ik ga te voegen op dit nieuwe item in de lijst, en dat gaat worden omringd door
deze li-tag, en ik ga samenvoegen met de operator +,
en dat is de ide element van mijn todos array,
en dan ga ik naar die tag te sluiten.
Nu voor elk element zullen we een nieuw item in de lijst toe te voegen.
En dan alles wat we echt moeten doen is af te sluiten die tag.
Ik moet alleen af ​​te sluiten die lijst tag ongeordend.
>> Heb je een gevoel voor hoe dat werkt te krijgen?
Dit opent de hele lijst.
Dit voegt de afzonderlijke elementen uit de todos lijst aan de lijst,
en dan dat de hele lijst gesloten, en dit is mijn addtodo functie.
Ik in principe beginnen met het verkrijgen van de todo van het tekstvak.
Ik voeg dat toe aan de todos array, en dan moet ik opnieuw maken de to-do lijst.
Nu kan ik items toevoegen aan mijn lijst.
Dit is een soort van spannend want in slechts een paar regels code
we hebben in principe gemaakt van een to-do lijst waar we items kunnen toevoegen.
Geweldig.
Dat is een soort van een basiscursus JavaScript.
Niet te veel zorgen te maken over de syntaxis voor nu,
maar na te denken over dit conceptueel.
We hadden een aantal HTML.
We hadden een tekstvak op de pagina dat in principe toegestaan ​​gebruikers om input een taakitem te voegen.
En dan gebruikten we JavaScript om dat todo halen uit dat tekstvak.
We opgeslagen dat in een JavaScript-array, die in feite als
onze programmatische representatie van die to-do lijst,
en vervolgens afgedrukt we het uit.
Dit is todos.js.
>> Dit is wel cool, maar hoe kunnen we dit verder gaan?
Nou, zoals je kunt zien, is dit niet als een volledige takenlijst.
Bijvoorbeeld, kan ik niet markeren een van deze items als een onvolledige,
graag als ik wilde de items Herinrichten of items te verwijderen.
Dat is oke, maar kunnen we dit verder gaan.
Ik ga niet te veel praten over het toevoegen van extra functies,
maar we konden dat verder brengen.
Laten we praten over het toevoegen van een extra functie om deze to-do lijst,
die zal worden in staat om een ​​individu te-doen post te controleren
en hebben het te worden doorgehaald, dus eigenlijk te zeggen ik heb dit gedaan.
Laten we eens kijken naar enkele code die zou kunnen volbrengen.
Let op wat ik heb gedaan op de top is die ik heb toegevoegd
een nieuwe globale array genaamd compleet.
Ik ben in principe met behulp van deze op te slaan of de items op de to-do list
compleet of niet.
Dit is een manier om dit te doen.
Als ik kijk naar de uitvoering van deze, het scherm,
eigenlijk als ik een todo en ik druk op deze schakelknop
het kruist, dus elk item op deze lijst heeft ofwel een volledige
of onvolledige staat, en ik ben met behulp van een andere array te vertegenwoordigen dat.
>> In principe voor elke todo in die todos matrix
er is een item in de volledige array die eigenlijk aangeeft
of die volledig is of niet.
Ik moest vrij minimale wijzigingen aan te brengen in deze code,
dus hier is onze addtodo functie.
Merk op dat hier ben ik het op de array te duwen,
en dan ben ik het duwen van een 0 naar die volledige array,
in principe parallel met die nieuwe todo push te zeggen
Ik voeg dit artikel, en het is gekoppeld aan deze waarde,
wat betekent dat het onvolledig.
En dan ben ik opnieuw tekenen van de to-do lijst.
Nu, merk ik heb dit drawTodoList functie toegevoegd.
Dit neemt een groot deel van de code die we hadden eerder,
principe ruimt de doos en trekt vervolgens de nieuwe to-do lijst.
, Maar merkt dat de binnenkant van deze for-lus we een beetje meer nu doet.
We zijn eigenlijk te controleren of het item dat overeenkomt met de i-todo hier
is voltooid, en we zijn verschillend gedragen in deze 2 omstandigheden.
Als het voltooid is, voegen we deze del tag,
die in feite is de manier waarop je kunt die staking krijgen door middel van effect
doorhaling van de to-do lijst als het voltooid is,
en als het niet, we zijn niet met inbegrip van het.
En zo dat soort zorgt dat,
>> en dat is een manier om dit te bereiken.
En dan merken wanneer de gebruiker een van deze klikt
We schakelen de voltooiing status van het.
Wanneer de gebruiker klikt, zullen we omkeren of het nu dan niet is voltooid,
en dan zullen we opnieuw te tekenen het.
Dit soort van werken.
We hebben deze functies die hun eigen taken uit te voeren,
en dat is oke.
Is er iets wat we beter kunnen doen over dit, hoewel?
Merken hebben we deze 2 globale arrays.
Als dit was C, en we hadden 2 arrays dat soort vertegenwoordigde
gegevens dat soort gerelateerd was op een bepaalde manier
wat zouden we gebruiken in C om deze 2 velden combineren
in iets dat beide stukken informatie kapselt?
Wil er iemand een suggestie doen?
[Student onverstaanbaar antwoord]
>> Precies, dus we konden een soort van structuur te gebruiken,
en als je terugdenkt aan, zeg, PSET 3,
herinner me dat we hadden woordenboek, en toen moesten we of het woord
was in het woordenboek, en al die informatie werd samengesteld
binnenkant van bepaalde datastructuur.
Een ding dat ik kan doen met deze code om te voorkomen dat deze 2 verschillende arrays
voor soortgelijke stukjes informatie is kan ik deze combineren in een JavaScript-object.
Laten we eens een kijkje nemen op die.
Let op, ik heb slechts een matrix aan de top nu
en wat ik heb gedaan is-en dit is slechts de JavaScript syntax voor soort
creating een letterlijke versie van een object,
en merken dat er 2 woningen, dus we hebben de todo,
en het is samen met de vraag of het volledig of onvolledig bewaard.
Dit is zeer vergelijkbaar code.
We zijn met behulp van de JavaScript-objecten.
Dit soort dingen verbetert.
Zoals nu, zijn al deze terreinen van verwante informatie bij elkaar gehouden.
Wanneer gaan we uit te printen, kunnen we toegang krijgen tot de velden.
>> Merk op hoe we todos [i] doen. Compleet
plaats van afzonderlijk controleren van de volledige array,
en merken wanneer we willen de to-do reeks krijgen we de woning aan-doen krijgen
van die todo, dus dit soort is logisch, want
elk item heeft deze intrinsieke eigenschappen over.
Het heeft een todo, en het heeft of het compleet of niet.
Niet te veel veranderingen zijn er functioneel, maar voegde wat meer aan de code.
Dit is een verbetering op sommige fronten, toch?
Ik bedoel, we meegenomen uit het ontwerp een beetje.
Nu hebben we objecten in principe kapselen deze gegevens.
Is er iets meer we kunnen doen vanaf hier in termen van JavaScript?
Willen merken dat deze code hier
voor het verkrijgen van de innerlijke HTML van een div
is een beetje, denk ik, lang.
Er is document.getElementById ("todos"). InnerHTML.
Een ding dat we kunnen doen om deze code ziet er een beetje vriendelijker
dus ik zou niet hoeven te scrollen naar links en rechts te houden, heen en weer,
is kon ik een library zoals jQuery gebruiken.
>> Laten we eens kijken op Seminar 2,
en dit is dezelfde code, maar het is gedaan met jQuery.
Je mag niet te vertrouwd met jQuery,
maar weet gewoon dat jQuery is een soort van een bibliotheek voor JavaScript
dat maakt het gemakkelijker om zaken als toegang afzonderlijke elementen van de DOM te doen.
Hier in plaats van te zeggen document.getElementById ("todos"). InnerHTML
Ik kan het veel schonere manier te gebruiken in jQuery,
dat is gewoon te selectors gebruiken.
Zoals je kunt zien, deze code heb een beetje schoner,
zeer vergelijkbaar functioneel, maar dat is het idee.
We tot nu toe gezien een paar dingen,
dus we begonnen met alleen rauwe implementatie webbrowser.
We nieuwe functies toegevoegd en liet zien hoe we het kunnen verbeteren met
net wat we hebben in JavaScript.
>> Heeft iemand zie geen problemen met dit ontwerp?
Namelijk, ik denk dat-al dan niet per se problemen, maar laten we zeggen
we waren niet bezig met een to-do lijst-project, en morgen hebben we besloten
we wilden een boodschappenlijstje of een boodschappenlijstje project te maken.
Veel van deze functies zijn zeer vergelijkbaar.
Veel van de dingen die we willen om eruit te komen van de webbrowser zijn zeer vaak,
en dat onderstreept de noodzaak van een soort manier van
waardoor deze gemakkelijker te doen zijn.
Ik moest opbouwen dit alles HTML toegang, dit alles DOM toegang,
alsof ik ga naar de to-do lijst te vertegenwoordigen met dit model.
En let op ik ben verantwoordelijk als de JavaScript-ontwikkelaar
voor het houden van de HTML en JavaScript die ik heb in sync.
Niets automatisch gemaakt dat JavaScript vertegenwoordiging
of de to-do lijst krijgen geduwd naar HTML.
Niets afgedwongen dat, behalve voor mij.
Ik moest de loting takenlijst functie te schrijven.
En dat kan niet, ik bedoel, het is redelijk om dat te doen,
maar het kan soms vervelend.
Als u een groter project, dat moeilijk kan zijn.
>> Kaders, een van de doelen van de kaders
is om dat proces en de soort van factor vereenvoudigen out
deze gemeenschappelijke-ik denk dat je kon zeggen-design patterns
die mensen hebben over het algemeen een soort manier te vertegenwoordigen gegevens,
of dat nu een lijst met vrienden, of dat nu kaartinformatie
of iets of een to-do lijst.
Sommige mensen hebben over het algemeen een manier van representatie van informatie,
en ze moeten in het algemeen te houden dat informatie soort in sync
tussen wat de gebruiker ziet in een soort gezien,
spreken in termen van, zoals het model view controller die je zag in collegezaal,
en vervolgens het, in dit geval is dit toestaat array.
Kaders geven ons een manier om dat probleem op te lossen.
Laten we nu eens een kijkje nemen op de uitvoering van deze to-do lijst
in een kader genaamd angularjs.
Dit is het. Merkt het past op een dia.
Ik heb niet om naar links en rechts te scrollen.
Dat is waarschijnlijk niet een goede reden om aan te bevelen het gebruik van een raamwerk,
maar merken ben ik ooit toegang afzonderlijke HTML-elementen hier?
Ben ik ooit gaan in de DOM?
Ken je alle document.getElementById of iets dergelijks te zien?
Nee, dat is gegaan.
>> Hoekige helpt ons houden de DOM en onze JavaScript representatie van iets
soort in sync, dus als het niet in het js bestand,
als er geen manier om programmatisch krijgen om al dat HTML-inhoud
van de JavaScript hoe houden we deze in sync?
Als het niet in het. Js-bestand, dan moet het zijn in HTML, toch?
Dit is de nieuwe versie van het HTML-bestand,
en merken we hebben hier veel toegevoegd.
Merkt dat er deze nieuwe attributen die ng-klik en ng-repeat zeggen.
Hoekige's aanpak voor het oplossen van dit probleem van de problemen bij het ontwerp
is om in principe te maken HTML veel krachtiger.
Hoekige is een manier waardoor je HTML wat expressiever te maken.
Bijvoorbeeld, kan ik zeggen dat ik ga dit tekstvak binden of te binden
aan een variabele binnen mijn hoekige JavaScript-code.
Dit ng-model doet precies dat.
Dat in principe zegt dat het item binnenkant van dit tekstvak,
gewoon associëren dat met de variabele new_todo_description
binnen de JavaScript-code.
Dat is erg krachtig omdat ik niet te expliciet naar
de DOM om die informatie te krijgen.
Ik hoef niet te document.getElementById zeggen.
Ik hoef niet te jQueries zoals DOM toegang te gebruiken.
Ik kan het associëren met een variabele, en toen ik dat veranderen variabele
binnen JavaScript het wordt bewaard in sync met de HTML,
zodat het proces met heen en weer tussen de twee vereenvoudigt.
Is dat zinvol?
>> En merkt dat er geen HTML toegangscode.
We hebben net HTML krachtiger gemaakt,
en nu, bijvoorbeeld, kunnen we dingen doen als dit,
zoals wanneer je hierop klikt, noemen deze functie binnen de reikwijdte van todos.js,
en we konden dat doen vóór, maar er zijn andere dingen, zoals deze ng-model,
en merken dit ng-repeat.
Wat denk je dat dit doet?
Hier is onze ongeordende lijst van voor.
We hebben de ul-tags,
maar ben ik ooit renderen die lijst binnenkant van de JavaScript-code?
Ik ben niet altijd expliciet renderen die lijst.
Hoe werkt dit?
Nou, de manier waarop Hoekige verwezenlijkt dit is dit is een repeater genoemd.
In principe is deze zegt dat ik wil deze HTML drukken
voor elke todo binnenkant van mijn todos array.
Binnenkant van todos.jr er een todos scala hier,
en dit zal Hoekige gaan vertellen door middel van de matrix, en voor elk element zie je
Ik wil dat je dit HTML drukken.
Dit is een soort van geweldig want ik kan gewoon doen
zonder een te schrijven voor lus,
die voor een to-do lijst die was slechts 30 regels code
kan de meest gunstige zaak zijn,
maar als je een groot project, kan dit erg handig.
>> Dit is een oplossing voor dit probleem, waardoor HTML krachtiger,
en dat ons toelaat om JavaScript en HTML synchroon te houden.
Er zijn andere manieren om dit probleem op te lossen,
en niet elke kader doet dit.
Niet elke kader werkt langs deze lijnen.
Sommige kaders hebben verschillende benaderingen,
en u kunt vinden dat u geniet van codering in een kader over de andere.
Laten we eens kijken naar een meer.
Dit is de to-do lijst up gecodeerd in een kader genaamd Backbone.
Ik ga snel door dit.
Ik zal beginnen met de HTML voordat we er heen gaan.
Een seconde.
Te beginnen met de HTML, zoals u merkt, onze HTML is zeer vergelijkbaar
tot wat het vroeger was, dus niet te veel nieuwe op dat front.
Maar onze js-bestand is een beetje anders.
Backbone soort heeft dit idee, of bouwt voort op het idee
dat veel van wat we doen, laten we zeggen, onze webbrowser projecten
is na te denken over modellen en collecties van deze modellen.
Dit kan bijvoorbeeld een foto en fotocollecties,
of het idee van een vriend en collecties van vrienden.
En vaak als we het programmeren van JavaScript-toepassingen
we zullen sorteren van vertegenwoordigen het idee van een verzameling van vrienden
een of andere manier in JavaScript en Backbone geeft ons deze laag
op de top van JavaScript's bestaande arrays en objecten
om meer krachtige dingen makkelijker doen met die.
>> Hier heb ik een to-do-model gedefinieerd,
en je hoeft niet te veel zorgen over de syntaxis,
maar merken dat wat is een van de eigenschappen van deze?
Het heeft een standaard veld.
Backbone kan ik opgeven reeds uit de vleermuis
elke nieuwe te-doen die ik maak gaat deze standaardinstellingen hebben.
Nu kan ik dit aanpassen, maar de mogelijkheid om de standaardinstellingen te specificeren
is mooi, en het is een soort van handige want dit is niet iets dat is net
inherent aan JavaScript, en nu heb ik niet te expliciet
zeggen dat de todos onvolledig.
Ik kan zeggen dat recht uit de vleermuis dat todos zullen worden gemarkeerd als onvolledig.
Let op wat is dit?
Nu heb ik een to-do lijst, en dat is een verzameling.
Let op het veld in verband met dat model todo zegt.
Dit is mijn manier om te vertellen dat Backbone
Ik ga te denken over een verzameling van deze individuele todos.
Dit is eigenlijk de modelstructuur voor mijn programma.
Hier heb ik dit idee van een verzameling,
en eigenlijk de items in die collectie zijn allemaal gaat worden deze todos,
en dat is heel natuurlijk in deze zin
want ik heb wel todos, en ik heb ze in een collectie.
>> Laten we eens kijken naar een beetje meer van dit.
Hier is een Backbone uitzicht.
Het andere ding dat Backbone zegt is dat
veel van de modellen die je denkt over of zelfs verzamelingen
gaat nodig hebben om een ​​manier worden weergegeven hebben.
We moeten maken dat de to-do lijst,
en zou het niet mooi zijn als we zouden kunnen bieden voor elk model
of associëren met elk model deze visie
die ons in staat stelt om te raden Ik sluit de twee samen?
Terwijl voordat we moesten een gebruiken voor lus die door zou lopen
elke todo in onze lijst en dan print het uit hier
kunnen we in principe aansluiten bij dit model.
Dit is een to-do-view.
Dit wordt geassocieerd met de todo we eerder gevonden.
Nu elke todo is toonbare of renderable
door deze to-do view.
Opvallen dat sommige van de velden.
Wat denk je dat dit tagName is, tagName: li?
Herinneren van vroeger toen we wilden een todo maken
we zouden moeten expliciet koppelen onze todos met deze li-tag.
Nu we zeggen dat wanneer dit todo gaat wonen
gaat worden binnen van een li-tag.
En nu zijn we ook associëren evenementen met onze todos.
>> Elke todo heeft dit evenement.
Als je vrij veel op de schakelknop, dat is wat ik daar zeg,
dan is in principe markeer de todo als het tegenovergestelde van wat het vroeger was
en vervolgens opnieuw maken van de applicatie.
Dit soort gelijk aan de code voor.
Weet je nog toen we gemerkt dat als ofwel het tegenovergestelde of-
en dan zijn we opnieuw gerenderd het.
Maar let nu deze gebeurtenis gebruikt om iets dat was in de HTML worden.
Het zat daar.
De toets had een op te klikken.
Wanneer u klikt op de knop, het soort doet het spul aan
opgezet dat todo onvolledig te zijn.
Hier hebben we die gebeurtenis van het klikken op die knop toggle gekoppeld
en het omkeren of het nu aan of uit met deze visie.
>> Dit is een leuke manier van het opzetten van dit evenement, zodat het zeer stevig gebonden
deze visie, en dus merken dit een meer.
Ik heb deze render methode, en we hoeven niet te gaan door de details.
Het is een beetje vergelijkbaar met wat we hadden eerder,
maar merk dat ik ben niet doorlussen niets.
Ik ben niet afdrukt dat ul-tag die is een soort van te zeggen ik ga alle elementen af ​​te drukken.
Ik ben het verstrekken van de functionaliteit voor het renderen van deze ene taakitem.
Dit is een zeer krachtig concept omdat het in principe
onze to-do lijst bestaat uit al deze todos, en als we in principe kunnen specificeren
de weg naar een van die todos maken
dan kunnen we onze krachtige backbone per se moeten maken alle van de todos
door te bellen naar de render methode op individuele todos.
Dit is een concept dat is nuttig hier.
Nu is een goede vraag is hoe wordt deze toepassing wordt in elkaar gezet?
Want we hebben de mogelijkheid om een ​​todo maken,
maar hoe krijgen we het idee van meervoudige todos?
>> Laten we eens een kijkje nemen op die.
Dit is het laatste deel.
Merken we een to-do list view hier,
en merken dat het ook een uitzicht.
En te gaan over een paar dingen,
Dit initialize methode wordt aangeroepen wanneer we voor het eerst dit aan-do lijst te maken.
Zoals je kunt zien, het is net als het maken van de to-do lijst en associëren het met deze zienswijze.
En toen voegde ik de functies hier dus in principe wanneer u een item toevoegen-
Dit is vergelijkbaar met de werkwijze addItem zagen eerder
Ik ga een nieuwe todo object te maken, en merk ik eigenlijk bellen
Deze nieuwe todo methode, dus dit wordt verzorgd door Backbone,
en ik kan hier passeren in mijn eigenschappen.
En nu elke todo dat ik creëert met dit zal die functionaliteit die we eerder zagen komen.
Let op, ik ben het opruimen van het tekstvak voordat-een klein klein detail-
en dan ben ik het toevoegen van deze collectie.
>> Dit lijkt bijna raar want voordat we moesten dat todos.push doen,
en toen we klaar waren, en dit lijkt ingewikkelder voor dit specifieke project,
en je kan dat Backbone of zelfs hoekige of enig ander kader te vinden
niet past bij uw specifieke project, maar ik denk dat het belangrijk is om na te denken over
wat dit betekent op grotere schaal voor grotere projecten,
want als we hadden een groter project waar we vertegenwoordigen
sommige echt complexe verzameling, iets dieper dan alleen maar een to-do lijst,
laten we zeggen een lijst met vrienden of iets dergelijks, kan dit van pas komen
want we konden onze code te organiseren in een heel handige manier,
op een manier die het voor iemand anders zou
die wilden halen een project te bouwen op.
Je kunt zien dat dit biedt veel structuur.
En toen ik bel maken op deze addItem.
Maken, zoals je kunt zien, en je hoeft niet om deze volledige syntax te begrijpen,
maar in principe voor elk model het gaat om de individuele render methode noemen.
Dat is een soort waar dit vandaan komt.
Laten we gewoon opgeven hoe de individuele todos maken,
en laten we dan lijm ze aan elkaar als een geheel.
Maar dit is een manier van abstractie,
want ik kon de manier waarop ik besluit om de individuele todos maken wijzigen,
en ik zou niet aan een van deze code te wijzigen.
Dat is wel cool.
>> Heeft iemand nog vragen hebben over JavaScript-frameworks?
[Student onhoorbare vraag]
Oh, zeker, dat is een grote vraag.
De vraag was hoe heb ik onder meer de kaders?
De meeste JavaScript-frameworks zijn eigenlijk gewoon js bestanden
die u kunt opnemen op de top van je code.
Merk op dat in het hoofd gedeelte van mijn HTML Ik heb al deze script-tags,
en het uiteindelijke script-tag is de code die we hebben geschreven.
En dan de 3 kader codes zijn ook script-tags.
Ik ben ze op te nemen van wat een CDN genoemd,
die me in staat stelt om het te krijgen van iemand anders op dit punt
maar elke kader heeft dit-u kan de inhoud vrij veel vinden
voor een bepaalde JavaScript-bibliotheek beschikbaar op sommige CDN of iets dergelijks,
en dan kun je die script-tags.
Is dat zinvol?
Cool.
>> Dat zijn 2 verschillende benaderingen.
Dit zijn niet de enige benadering voor dit probleem.
Er zijn veel verschillende dingen die
iemand kon doen, en er zijn vele kaders die er zijn.
Hoekig en Backbone vertellen niet het hele verhaal.
Veel succes met je laatste projecten, en heel erg bedankt.
[CS50.TV]