Tvarkymo funkcijos „To-do“ sąrašams su JavaScript

Atėjo laikas pridėti reikiamą funkcionalumą tavo To-do sąrašo užduočių redagavimui. Šiame vadove sužinosi, kaip sukurti ir sukonfigūruoti redagavimo puslapį (Edit Task Page), kad efektyviai pritaikytum egzistuojančias užduotis. Pradėsi nuo esamos HTML struktūros ir pritaikysi ją, kad sukurtum tinkamą aplinką redagavimui.

Svarbiausi atradimai

• Redagavimo puslapis (Edit Task Page) iš esmės pagrįstas naujos užduoties puslapiu (New Task Page) su keliais svarbiais pakeitimais.
• Svarbu naudoti ID unikalioms kiekvienos užduoties identifikacijoms.
• Naudojama Hide-and-Show technika, kad būtų galima naršyti tarp puslapių ir skirtingų funkcionalumų.

Žingsnis po žingsnio vadovas

1. Redagavimo puslapio (Edit Task Page) kūrimas

Pirma, turime sukurti redagavimo puslapį savo programoje. Gali kopijuoti HTML kodą iš naujos užduoties puslapio (New Task Page) ir atitinkamai pritaikyti. Antraštė lieka ta pati, tačiau mygtukai turi pakeisti savo pavadinimus. Vietoj "cancel new task Button" jis turi būti "cancel edit task Button".

Dabar pritaikyk antrąjį mygtuką. Pakeisk pavadinimą į "edit task save button", kuris išsaugos užduotį. Ši nauja funkcija turėtų leisti vartotojui išsaugoti redaguojamą užduotį.

2. Turinys (Content) nustatymas

Tavo naujo redagavimo puslapio turinys (Content) bus nustatomas naudojant specialią redagavimo užduoties formą (edit Task Form). Vietoj "add Task Form" naudosi "edit Task Form". Tai reiškia, kad turi atitinkamai pakeisti ID ir etiketės (labels). Naudok "edit task name" ir "edit task description" vietoj ankstesnių formų pavadinimų.

Naudodamas ID, galėsi tiesiogiai pasiekti svarbius DOM elementus. Tai ypač svarbu, kai vėliau redaguosi atskiras užduotis.

3. Naudotojo sąsajos (UI) peržiūra

Norėdamas atnaujinti savo to-do sąrašo UI, dabar turi pridėti funkcijas, kurios leistų UI paskambinti redagavimo puslapiui (Edit Task Page). Tai daroma tavo esamame to-do sąraše. Įsitikink, kad esamos funkcijos kaip "Show Homepage" ir "Init New Task Page" dabar taip pat būtų papildytos redagavimo puslapiui.

Čia pridėk naują funkciją "bind button events". Tai užtikrins, kad teisingi mygtukų įvykiai būtų perduodami.

4. Įterpti išsaugojimo ir atšalimo logiką

Dabar įgyvendinimo logiką redagavimo puslapyje (Edit Task Page). Pradėk nuo "cancel edit task button" tvarkymo. Kai šis mygtukas bus paspaustas, vartotojas turėtų būti nukreiptas atgal į pagrindinį puslapį. Tai gali būti padaryta paprastai, paskambinant funkcijai "Show Homepage".

Tada atėjo laikas išsaugoti atliktus pakeitimus. Tam tau reikia funkcijos, kuri identifikuotų dabartinę užduotį. Tai vykdoma naudojant ID, kurį tu nustatei užduočių sąraše.

5. Klausimų apie atliktus užduotis užklausos

Norėdamas sužinoti, kurią užduotį reikia redaguoti, turi įgyvendinti logiką "get target ID". Kai užduotis yra pasirinkta, ID nustatomas, kad pakeitimai būtų taikomi teisingai.

Ypač svarbu nustatyti, kuris elementas buvo paspaustas DOM struktūroje (Dokumento objekto modelyje). Kai vartotojas paspaudžia užduotį, turi būti rastas atitinkamas sąrašo elementas ir grąžinama jo ID.

6. Užduočių redagavimas ir naikinimas

Paskutinis etapas yra užduočių redagavimas arba, jei reikia, naikinimas. Jei reikia ištrinti užduotį, naudoji ID, kad įsitikintum, jog pašalinama tinkama užduotis iš tavo sąrašo. Čia naudojama užklausa, kad sužinotum, ar "complete task" elementas buvo paspaustas. Jei taip, užduotis ištrinamos.

Priešingu atveju bus atidarytas redagavimo puslapis (Edit Task Page), kad galėtum tęsti pasirinktos užduoties redagavimą.

Santrauka – To-do sąrašo redagavimas: žingsnis po žingsnio vadovas JavaScript ir jQuery

Šiame žingsnis po žingsnio vadove sužinojai, kaip sukurti redagavimo puslapį (Edit Task Page) savo to-do sąraše ir kaip įgyvendinti reikiamas funkcijas, kad užduotis būtų redaguojamos efektyviai. Supratai, kaip svarbu yra ID, kad unikaliai apibrėžtum elementus ir kaip naršyti tarp skirtingų savo programos puslapių.