Ben tornato.
In questo video affronteremo l'ultima grande funzionalità rimanente che è la creazione di nuove cose
da fare.
Quindi qui sopra sulla versione completata solo per far scorrere la memoria nel modo in cui funziona è
possibile scriverlo e quindi premere invio.
Quindi non c'è alcun pulsante per fare clic.
Ho appena premuto invio e questo verrà quindi inviato e mi farà fare un nuovo da fare qui che posso
verificare o eliminare.
Quindi iniziamo.
La prima cosa che dobbiamo fare è aggiungere un ascoltatore all'input di testo che si attiva quando premiamo il tasto Invio.
Per farlo abbiamo alcune opzioni.
Possiamo usare la pressione di un tasto o possiamo usarlo, dobbiamo iniziare selezionando l'input e invece di
lasciarlo come input.
Sarò più specifico e dirò che il tipo di input è uguale al testo.
Quindi questo influenzerà tutti gli input o digiterà il testo uguale a quello e poi aggiungerà il nostro DOT e userò
la pressione di un tasto qui tipo di input chiamate text key press.
Ecco la funzione di callback che inizieremo con un registro alt costante e questo registro costante verrà eseguito su
qualsiasi tasto premuto non solo il tasto Invio.
Quindi, per tenere la stampa e salvare e tornare al browser e aggiornare e apriremo questo qui.
E mentre premo il tasto, vedo che ricevo la pressione di un tasto.
Quindi colpirò un'altra chiave che continua a salire.
Quindi non vogliamo davvero fare nulla finché l'utente non preme il tasto Invio.
Quindi abbiamo bisogno di cambiare un po 'il tuo codice nel video in cui abbiamo introdotto il metodo key press.
dell'oggetto key press e corrisponde al tasto premuto o al codice carattere della chiave.
Ho anche parlato della proprietà
Quindi lo useremo qui e controlleremo se il codice del carattere è 13, che è il
codice per il tasto invio.
Quindi dobbiamo lavorare ancora una volta con l'oggetto evento che può essere chiamato tutto ciò che vogliamo
e poi correremo se l'evento che triplica è uguale al numero 13 che è il modo in cui controlliamo il tasto invio ogni singolo personaggio
ha il suo codice e la chiave di invio è 13 quindi faremo solo un registro costante.
Premi Invio e salverà qui.
Ora sto digitando un mazzo di chiavi che non sono inserite.
E ora ho intenzione di colpire invio.
Puoi vedere che riceviamo chiamate sul registro.
Premi Invio.
OK.
Quindi, piuttosto che cancellare semplicemente il log in quando entriamo in hit, quello che dobbiamo fare
è estrarre il testo da qui, estrarlo, creare un nuovo alleato che aggiungiamo dopo questo e poi vogliamo cancellare questo input in modo
che il testo scompaia.
Quindi inizieremo estraendo il valore e quello è piuttosto semplice.
Useremo il metodo Val.
Quindi vogliamo il valore sull'input che possiamo semplicemente fare con un voto semplice.
Quindi facciamo un poliziotto.
registra questo Darvell ricorda che questo si riferisce all'input che si è verificato durante l'aggiornamento.
Digita tutto ciò che non è inserito.
Non accade nulla.
Ora se premo invio una console che registra il valore come puoi vedere digito talo e premo invio.
Quindi salviamolo su una variabile.
Chiamiamolo per fare il testo è uguale alla vocale iniziale.
Quindi questo è l'acquisizione di nuovo testo dall'input.
E poi quello che vogliamo fare è creare un nuovo alleato e aggiungerti bene per farlo.
Ho intenzione di introdurre un nuovo metodo chiamato append il modo in cui append funziona è che per
prima cosa selezioniamo un elemento da aggiungere a.
Quindi aggiungeremo che le nostre cose devono fare.
Quindi aggiungeremo le nostre quote alla U. N. sulla pagina.
Quindi questo lo farai e gli alleati andranno ad aggiungersi a quel pozzo.
Quindi se lo farai aggiungerai e potrò dargli una stringa di h t m l.
Quindi, se aggiungo alleato qui e ho appena inserito qualcosa di hardcoded.
Quindi questo è un nuovo alleato che abbiamo aggiunto a questo UL proprio come quello che
seleziono l'UL e questo in realtà seleziona tutto il resto.
Ne abbiamo solo uno e poi finiamo le penne.
E prenderà questa corda e la aggiungerà al pozzo come ogni Chimo dentro se vuoi.
Quindi ti mostrerò che quando premiamo invio qui non importa ciò che scriviamo perché
non lo stiamo usando.
Aggiunge in un nuovo alleato.
E ogni volta che premo invio, lo farà e, se guardo, puoi vedere che è un elemento che
è stato aggiunto al pozzo proprio come questi sono come elementi.
Quindi, ciò che vogliamo fare dopo è in realtà utilizzare la variabile di testo do.
Tutto quello che dobbiamo fare è usare il segno più per aggiungere la variabile in.
e useremo un segno più e aggiungiamo per fare testo e questo finirà con una grande stringa
che ha il nostro testo, che è qualsiasi cosa l'utente abbia digitato nell'input più l'alleato di
apertura e di chiusura e noi lo invieremo per aggiornare cane a piedi e io premo invio e otteniamo un nuovo alleato qui.
Quindi avremo due tag di apertura e tag di chiusura separati
Quindi ci sono due grandi problemi.
Uno vogliamo cancellare questo input e due non abbiamo lo span.
Iniziamo cancellando l'input.
Tutto ciò che dobbiamo fare è eseguire il simbolo del dollaro con questo voto e dargli una stringa vuota in cui agisce come un setter piuttosto
che solo un getter.
E questo ora dovrebbe darci un input vuoto quando scrivo un nuovo per fare che ogni cosa da fare sia aggiunta e
questo viene cancellato.
Quindi vediamo lo span per mostrare il backup.
Quindi tutto ciò che dobbiamo fare è all'interno del nostro alleato che aggiungeremo in una pila di span e che verrà aggiunto.
E dobbiamo solo assicurarci di avere la X proprio lì e lo spazio giusto in modo che la X abbia uno spazio tra di essa
e rifiuti di fare testo.
E se salviamo, stiamo aggiungendo una nuova stringa con un alleato con una spanna al suo interno.
Quindi dai da mangiare al cane e finiamo con lo span e il nuovo alleato.
Tuttavia abbiamo un problema con questo codice che è quando aggiungo di nuovo per fare come il feed cat
e cerco di spuntare quelli nuovi.
In realtà non effettuano il check-in né cancellano quelli vecchi ancora.
Quindi l'evento dal vivo sta ancora sparando.
Questo evento span continua a sparare ma i nuovi tatuaggi che creano dinamicamente quelli che non
sono presenti quando la pagina si carica non funzionano.
Questo è quello di cui stavo parlando quando ti ho mostrato questa diapositiva e nella maggior parte dei casi ho detto in fretta e
su Quake che entrambi avremo fatto il lavoro.
Tuttavia c'è una differenza fondamentale.
Quick aggiungerà solo listener per elementi esistenti aggiungendo listener per tutti i potenziali elementi futuri.
E questo è quello che dobbiamo fare qui è usare perché vogliamo che gli ascoltatori ascoltino
tutti i potenziali alleati.
Quindi apri la fornitura Sono qui e dimostrerò come possiamo usarlo in modo rapido e non solo veloce.
Quindi non si tratta solo di scambiare per essere su.
Quindi se lo cambio è un alleato in click proprio così e lo lascio così.
Fondamentalmente è la stessa identica cosa tranne che con on piuttosto che veloce.
E se torno indietro e aggiorni i lavori sugli elementi originali e se ne aggiungo di nuovi non funziona.
Quindi non si tratta solo di scambiare velocemente e velocemente.
Beh, in realtà dobbiamo fare è cambiare leggermente il nostro codice.
Quindi ti mostrerò prima il cambiamento e poi lo spiegherò.
Quindi quello che ho fatto è che ti ho scritto bene con una virgola veloce.
Perché.
Il motivo per cui ho dovuto farlo è che possiamo aggiungere un listener usando jquery sugli elementi che esistono quando questo
codice viene eseguito la prima volta.
E quando questo codice viene eseguito la prima volta non abbiamo tutti gli alleati.
Ne abbiamo solo tre quindi se aggiungiamo un ascoltatore veloce agli alleati si aggiungeranno solo a questi tre.
Quindi ciò che facciamo è aggiungere un listener all'intero genitore UL.
Quindi ogni volta che clicchiamo a questo ascoltatore questo sparerà.
Tranne che aggiungiamo questo secondo argomento.
E ciò che questo codice fa è che quando si fa clic su un alleato all'interno di un codice si eseguirà questo codice.
Quindi abbiamo aggiunto un listener a un elemento esistente al caricamento della pagina.
Ma stiamo solo ascoltando le bugie su cui si fa clic dentro.
Quindi fammi dimostrare questo ora.
Mi aggiornerò e aggiungiamo alcuni nuovi qui.
I vecchi funzionano ancora e anche quelli nuovi possono essere controllati.
Ma l'eliminazione non funziona.
Quindi dobbiamo tornare indietro e fare lo stesso esatto cambiamento.
Quindi ascolteremo un evento che esiste quando la pagina viene caricata con on e quindi fai clic, ma vogliamo solo che questo
codice venga eseguito quando si fa clic su una span all'interno di un pozzo.
E se lo lasciamo, dovremmo essere pronti.
Ora proviamo.
Possiamo cancellare quelli vecchi e nuovi e possiamo anche incrociare entrambi.
Va bene riassumiamo un po 'del nuovo materiale qui.
La prima cosa è il metodo append che può prendere una stringa di HMO e quindi aggiungerà quegli
elementi a qualsiasi cosa abbiamo selezionato.
E la seconda cosa stava usando piuttosto che veloce e aggiungendo in questo UL alla svelta.
E il secondo argomento che specifica gli alleati che potrebbero essere o non essere stati nella pagina quando è stato caricato
all'interno del pozzo che era sicuramente nella pagina quando la pagina è stata caricata.
Quindi stiamo aggiungendo listener di eventi agli elementi esistenti al momento del caricamento della pagina in modo che possiamo tenere conto
di elementi che non esistono ancora.
Questo è tutto per la nostra funzionalità di base.
Abbiamo una lista completa delle cose da fare.
Quello su cui ci concentreremo nel prossimo video è lo styling.
E sicuramente abbiamo un modo per andare lì.