Welkom terug.
In deze video zullen we de laatste grote overgebleven stuk van de functionaliteit die de creatie van nieuwe te doen aan te pakken.
Dus hier op de voltooide versie alleen maar om je geheugen te joggen op de manier waarop het werkt is dat ik kan typen om u en dan druk op enter.
Dus er is geen knop te klikken.
Ik raakte gewoon in te voeren en dat zal dan dienen en maak me een nieuwe te doen hier beneden die ik uit kan controleren of te verwijderen.
Dus laten we beginnen.
Het eerste wat we moeten doen is het toevoegen van een luisteraar aan de tekstinvoer dat afgaat wanneer we de enter-toets in te drukken.
Om dat te doen moeten we een paar opties.
We kunnen druk op een toets te gebruiken of we kunnen gebruiken op die we nodig hebben om te beginnen door de input te selecteren en dan laat het gewoon als ingang.
Ik ga meer specifiek te zijn en zeggen: input type is gelijk aan de tekst.
Dus dit zal invloed hebben op alle ingangen of het type is gelijk aan de tekst, net als dat en dan zal onze DOT toe te voegen en ik zal druk op de toets te gebruiken hier input type noemt tekst druk op de toets.
Hier is de callback functie die we zullen gewoon beginnen met een constante alt log en deze constante log zal draaien op een willekeurige toets drukt niet alleen de Enter-toets.
Dus gewoon om druk te houden en op te slaan en terug te gaan naar de browser en verfrissen en we zullen dit hier open te stellen.
En zoals ik op de toets zie je dat ik druk op de toets.
Dus ik zal een andere toets in te drukken en dat houdt omhoog gaan.
Dus we willen niet echt om iets te doen totdat de gebruiker de enter-toets raakt.
Dus moeten we uw code te veranderen een beetje in de video, waar introduceerden we de druk op de toets methode.
Ik heb ook gesproken over de die woning op de toetsaanslag object en dat overeenkomt met de toets die werd ingedrukt of het karakter code van de sleutel.
Dus gaan we dat hier te gebruiken en we gaan om te controleren of het karakter code is 13, dat is de code voor de Enter-toets.
Dus moeten we aan de slag met het evenement object eens te meer dat kan wat we willen worden opgeroepen en dan gaan we lopen als gebeurtenis die triple gelijk aan het aantal 13 dat is hoe we controleren op de enter-toets elk personage heeft zijn eigen code en de Enter-toets is 13 dan zullen we gewoon een constante log.
U druk op enter en bespaart ga hier terug.
Nu ben ik het typen van een bos sleutels die niet worden betreden.
En nu ga ik druk op enter.
U kunt zien we gesprekken over log.
U druk op enter.
OK.
Dus in plaats van alleen maar te annuleren log in als we druk op enter wat we moeten doen is de tekst hier weg te nemen Pak het maken van een nieuwe bondgenoot die we vervolgens toevoegen nadat deze ene en dan willen we op deze ingang te wissen zodat de tekst verdwijnt.
Dus we beginnen met de waarde uit te extraheren en dat men vrij eenvoudig.
We zullen de Val methode te gebruiken.
Daarom willen we de waarde van de input die we kunnen doen met een simpele deze gelofte.
Dus laten we het doen van een agent.
meld dit Darvell herinneren dat dit verwijst naar de input die de druk op de toets zich in refresh.
Typ iets dat niet in te voeren.
Niks gebeurt.
Nu als ik druk op enter een console die de waarde logs zoals je kunt zien ik typ talo en ik druk op enter.
Dus laten we redden dat voor een variabele.
Laten we het doen tekst is gelijk aan de start klinker.
Dus dat is de nieuwe tekst van input grijpen.
En dan wat we willen nu doen is het creëren van een nieuwe bondgenoot en toe te voegen aan je goed om dat te doen.
Ik ga een nieuwe methode genaamd voegen van de manier waarop de werken te voegen, is dat we voor het eerst een element te voegen om te selecteren te introduceren.
Dus we gaan het toevoegen van onze dingen te doen.
Dus zullen we het toevoegen van onze contributie aan de U.N. op de pagina.
Dus dit zult u en het zal toevoegen van bondgenoten dat ook.
Dus als ik je zal toevoegen en ik kan het geven van een reeks van h t m l.
Dus als ik toe te voegen in bondgenoot hier en ik hardcoded iets in start.
Dus dit is een nieuwe bondgenoot die we als bijlage bij dit UL net als dat ik selecteert u de UL en selecteert dit eigenlijk al het andere.
We hebben slechts één en dan lopen we uit pennen.
En het zal deze string te nemen en toe te voegen aan de alsmede iedere Chimo binnenkant als je wil.
Dus ik zal je laten zien dat als we druk op enter hier het maakt niet uit wat we typen, omdat we het niet gebruikt.
Het voegt een nieuwe bondgenoot.
En elke keer als ik druk op enter zal dat doen en als ik inspecteer je kunt zien dat het een element dat in de put net als deze zijn net als elementen toegevoegd.
Dus wat we willen nu doen is echter daadwerkelijk gebruik maken van het doen tekstvariabele.
Alles wat we moeten doen is gebruik het plusteken om die variabele in te voegen.
Dus zullen we twee aparte opening lijn labels en sluiten tags en we zullen een plusteken te gebruiken en toe te voegen aan om tekst te doen en dit zal eindigen met een grote string die onze do tekst heeft, die is wat de gebruiker heeft ingevoerd in de input plus het openen en sluiten bondgenoot en we verzenden die aan u zal lopen hond verfrissen en ik druk op enter en krijgen we een nieuwe bondgenoot hier.
Dus er zijn twee grote problemen.
Eén we willen om duidelijk uit deze ingang en twee hebben we niet de overspanning.
Laten we beginnen met het opruimen van de input.
Alles wat we moeten doen is lopen dollarteken deze gelofte en geef het een lege string, waar het fungeert als een setter in plaats van alleen een getter.
En dat moet nu ons een lege ingang wanneer ik typ een nieuwe te doen elke gaan op te doen wordt toegevoegd en dit wordt gewist.
Volgende laten we de overspanning om een ​​back-up te laten zien.
Dus alles wat we moeten doen is er de binnenkant van onze bondgenoot we zullen voegen in een overspanning stack en dat zal worden toegevoegd.
En we hoeven alleen maar om ervoor te zorgen dat we de X daar en de ruimte gewoon zo dat de X heeft een ruimte tussen haar en beroven om tekst te doen.
En als we besparen we nu het toevoegen van een nieuwe string met een bondgenoot met een overspanning binnenkant van het.
Zo voeden de hond en we eindigen met de overspanning en de nieuwe bondgenoot.
Toch hebben we een probleem met deze code die is wanneer ik het toevoegen van nieuwe to do's als voeding kat en ik probeer en afvinken van de nieuwe.
Ze eigenlijk niet afvinken, noch zij schrappen de oude nog steeds doen.
Dus de live-evenement is nog steeds afvuren.
Deze overspanning evenement nog steeds branden, maar de nieuwe tatoeages die zijn dynamisch gemaakte degenen die er niet zijn wanneer de pagina wordt geladen werken niet.
Dit is wat ik het over had toen ik je deze dia liet zien en het zei in de meeste gevallen snel en op Quake we zowel de klus te klaren.
Er is echter één belangrijk verschil.
Snel zal alleen luisteraars toe te voegen voor de bestaande elementen op zullen luisteraars toe te voegen voor alle potentiële toekomstige elementen.
En dat is wat we nodig hebben om hier te doen is te gebruiken op, want we willen dat die luisteraars te luisteren op alle potentiële bondgenoten.
Dus open aanbod dat ik hier ben en ik zal laten zien hoe we kunnen gebruiken op een snelle plaats van alleen snel.
Dus het is niet een kwestie van gewoon omwisselen van aan te staan.
Dus als ik alleen deze te wijzigen in een bondgenoot op klik, net als dat te zijn en ik laat het zo.
Eigenlijk is het precies hetzelfde, behalve met aan in plaats van snel.
En als ik ga terug en de werken op de oorspronkelijke elementen te vernieuwen en als ik nieuwe toe te voegen werkt het niet.
Dus het is niet een kwestie van gewoon omwisselen snel en snel.
Nou we eigenlijk moeten doen is iets te veranderen onze code.
Dus ik ga u eerst tonen de verandering en dan zal ik uitleggen.
Dus wat ik deed is schreef ik u goed op een snelle komma.
Waarom.
De reden dat ik dit moest doen is dat we alleen een luisteraar kan toevoegen met j query op elementen die bestaan ​​wanneer deze code de eerste keer wordt uitgevoerd.
En wanneer deze code de eerste keer wordt uitgevoerd we niet alle bondgenoten.
We hebben slechts drie, dus als we snel een luisteraar toe te voegen aan bondgenoten het zal alleen maar toe te voegen aan deze drie.
Dus wat we doen in plaats daarvan is het toevoegen van een luisteraar om de hele UL ouder.
Dus wanneer we op dat u deze luisteraar zal bij brand.
Behalve voegen we deze tweede argument.
En wat deze code doet is het zegt wanneer een bondgenoot wordt geklikt binnenkant van een vindt u deze code uitvoert.
Dus een listener toegevoegd we een element dat bestaat wanneer de pagina wordt geladen.
Maar we zijn eigenlijk alleen te luisteren naar de leugens die binnenkant van die worden geklikt.
Dus laat me nu bewijzen dit.
Ik zal vernieuwen en laten we voeg wat nieuwe in hier.
De oude nog steeds werken en de nieuwe kan worden afgevinkt als goed.
Maar de delete werkt niet.
Dus moeten we terug te gaan en exact dezelfde verandering.
Dus we gaan op een gebeurtenis die optreedt wanneer de pagina wordt geladen met aan en klik vervolgens op, maar we willen alleen deze code kan worden uitgevoerd wanneer een overspanning binnenkant van een put wordt geklikt om te luisteren.
En als we het daarbij laten we goed om te gaan zou moeten zijn.
Laten we nu eens testen het uit.
We kunnen de oude en de nieuwe te verwijderen en we kunnen allebei wegstrepen ook.
Oké dus laten we samen te vatten enkele van de nieuwe materiaal hier.
Het eerste wat is de append methode die een string van HMO kan nemen en het zal dan voegt die elementen aan wat we gekozen.
En het tweede ding werd met behulp van op de plaats van snel en het toevoegen in dit UL op een snelle.
En het tweede argument dat bondgenoten die al dan niet op de pagina toen het binnenkant van het goed, dat was zeker op de pagina wanneer de pagina geladen geladen specificeert.
Dus we voegen event luisteraars de elementen die bestaan ​​als pagina wordt geladen, zodat we kunnen goed zijn voor elementen die er nog niet.
Dat is het voor ons de basisfunctionaliteit.
We hebben een complete takenlijst.
Wat zullen we focussen op in de volgende video is de styling.
En we hebben zeker een manieren om er te gaan.