Darbas su formomis „Knockout.js“

Formos yra neatskiriama bet kurios programos ar tinklalapio dalis, nes tai yra viena iš priemonių, leidžiančių mums iš pradžių gauti vartotojo duomenis, todėl jų apdorojimas yra labai dažna užduotis.
Knockout.js leidžia mums dirbti su jūsų objektu susieti duomenis visus elementus, kurie gali sudaryti formą, taip suteikiant galimybę patvirtinti, sukelti įvykius, priskirti stebimus objektus ir pan. Dėl to kliento pusės formų apdorojimas yra veiksmingas, todėl pridedame papildomą patvirtinimo sluoksnį, kol jis pasiekia serverio pusę.
ReikalavimaiMums reikės tik turėti Knockout.js mūsų sistemoje ir yra prieinamos programoms, kurias ketiname kurti, leidimai rašyti failus, interneto ryšys bibliotekoms gauti, jei jų neturime, ir teksto redaktorius, pvz. Aukščiausias tekstas arba NotePad ++. Norėdami paleisti programas, mums reikia žiniatinklio serverio tipo Apache arba Nginx mūsų bandymų aplinkoje.
Prieš pereinant prie pavyzdžių su atvejais, kuriuos galime taikyti, labai svarbu žinoti suriša duomenis kurie gali dirbti su mūsų paraiškos formos elementais, tokiu būdu mes galime pradėti suprasti, ką galime ir ko negalime pasiekti, ypač tai, kaip galime pasiekti rezultatų, kurių reikia, kad mūsų programa tinkamai veiktų:
Duomenų susiejimo vertėTai naudojama reikšmėms ar pasirinkimo įvesties elementams, jie gali būti įvesties, tekstūros ar pasirinkimo elementai, todėl galime užfiksuoti elemento vertę tuo metu, kai mums reikia jį naudoti.
Duomenų susiejimas textInputRytai privalomas yra naudojamas su įvesties ir tekstūros srities elementais, jo funkcija panaši į vertės Tačiau jei jam priskiriame stebimą objektą, mes galime užfiksuoti vertes, kai vartotojas sąveikauja su elementu, skirtingai nuo vertės, kuri suteikia mums vertę, kai elementas keičiasi, pavyzdžiui, kai praranda dėmesį.
Patikrintas duomenų susiejimasJis naudojamas su tokio tipo elementais žymimasis langelis Y radijo mygtukaiKaip rodo jo pavadinimas, tai leidžia mums nustatyti ar žinoti, ar elementas yra pasirinktas struktūroje, kurioje naudojami minėti elementai.
Duomenų surišimo parinktysNaudojant tai privalomas Pasirinktą elementą galime užpildyti pasirinktimis, kurios bus rodomos formoje, jis puikiai tinka, kai norime dinamiškai sudaryti parinkčių katalogą.
Duomenų susiejimas Pasirinktos parinktysJis taip pat yra išskirtinis pasirinkimo elementui, jis naudojamas, kai nustatydami ypatybę turime nustatyti pasirinktas parinktis multi, nes vienu metu turime pasirinkti daugiau nei vieną variantąz.
Duomenų surišimo įjungimas / išjungimasTai leidžia mums įjungti arba išjungti bet kokius skirtingus formos elementus, todėl galime pašalinti elementą, jei nebūtina jo naudoti taikomųjų programų sraute esant tam tikroms sąlygoms, kai įgalinti tarnauja įgalinti ir išjungti išjungti, jei nežinome kiekvieno žodžio reikšmės.
Įdomiausias iš jų suriša duomenis yra tai, kad jie veikia dviem būdais, tai yra, kai pasikeičia elementas, mes galime jį gauti savo modelio rodinyje ir prireikus šiek tiek apdoroti, bet taip pat, jei turime pastebimą ir norime ką nors padaryti iš programos į formą, kurią taip pat galime išspręsti be jokių problemų, jei naudojame susieti duomenis tinka formos elemento tipui, nes Knockout.js jis klaidingų nurodymų neinterpretuos, kaip tai galėtų padaryti naršyklė su kodu HTML.
Dabar pažiūrėkime praktinį pavyzdį, kaip galime naudoti visas sąvokas, apie kurias kalbėjome ankstesniame šios pamokos skyriuje, mes sukursime tipo elementą tekstūra kad jis priims tik 140 simbolių, nes šis apribojimas egzistuoja, rašydami privalome informuoti vartotoją, kiek simbolių jam liko.
Logika, kurią naudosime, yra labai paprasta, mes įtraukiame data-bind textInput mūsų formos tekstinės srities elemente, tada savo modelio vaizde mes jį nustatysime kaip stebimą, ir tada galėsime pradėti fiksuoti simbolius vartotojui rašant. Galiausiai mes naudojame elementą apskaičiuotas Norėdami sukurti kompoziciją, kurią būtų galima stebėti su visais likusiais simboliais, šiuo metu mes nepriversime vartotojo rašyti mažiau, mes tik informuojame juos apie simbolius. Pažvelkime į mūsų pavyzdžio kodą:

 Formos knockout.js
Įveskite tekstą

Liko simboliai: 

Reikėtų pažymėti, kad mes nenaudojame duomenų susiejimo reikšmė nes mums reikia pakeisti likusių simbolių kiekį tuo metu, kai vartotojas įveda tekstą, nes jei ne, mes galėtume nurodyti tik sumą tuo metu, kai ji perduodama kitam elementui, ir tai nebūtų optimalu pagal tai, į ką mes taikome Knockout.jsTačiau bus atvejų, kai toks elgesys yra būtinas, viskas priklauso nuo to, ko reikia mūsų programai. Taigi pažiūrėkime, kaip atrodo mūsų pavyzdys, kai jį paleidžiame naršyklėje:

Žinoma, čia mes negalime dinamiškai matyti, kaip krinta mūsų skaitiklis, tačiau kai rašome likusių simbolių skaitiklį, jis atnaujinamas taip, kaip parašyta formos teksto srities elemente:

Kitas aspektas, kurio mums dažnai reikia programose dirbant su formomis, yra įvykiai, nes su jais galime suaktyvinti veiksmus, kai vartotojas daro kažką konkretaus, pvz., Spustelėja, arba užveskite pelę virš konkrečios mūsų skilties HTML. Pažvelkime į kai kuriuos įvykius, kuriuos galime panaudoti savo formose:
Pateikti įvykįŠis įvykis gali būti naudojamas tik elemente forma, ir jis suaktyvinamas tik tada, kai vartotojas pateikia formą serveriui, naudodamas įvestį arba kitu būdu.
Spustelėkite įvykįŠis įvykis yra senas pažįstamas, nes jo pavadinimas rodo, kad jis suaktyvinamas spustelėjus mūsų programos elementą.
HasFocus renginysŠis įvykis suaktyvinamas, kai elementas paprastai įvedamas, teksto zona arba pasirenkamas yra pasirinktas vartotojo ir tuo metu yra aktyvus.
Taip pat yra galimybė naudoti kitus įvykius, esančius skiltyje SAULĖ pavyzdžiui pelės žymeklis, mygtuko paspaudimas siekiant išplėsti mūsų modelio rodinio funkcionalumą iki šių lygių.
Atlikdami šį pratimą, pritaikysime žinias apie įgytus įvykius, sukursime nedidelę formą, kurioje turėsime sąrašą, ir kiekvieną kartą užvedus pelės žymeklį ant parinkties, bus rodomas vaizdas žinoma, tai bus parodomasis įgyvendinimas ir netinka gamybai, tačiau padeda suprasti, ką dirbome.
Šiuo atveju mums reikės papildomai Knockout.js biblioteka „jQuery“ kad mūsų programoje būtų naudojami tam tikri efektai, todėl idealu būtų jį atsisiųsti ir išsaugoti tame pačiame aplanke ar kataloge, kuriame mes Knockout.js, o gal naudoti iš savo CDN pareigūnas. Tada pažiūrėkime kodą, kurio mums reikia:

 Formos knockout.js

Čia mes tiesiog sukūrėme dalykų sąrašą su aprašymu ir vaizdu; šis vaizdas gali būti bet kur pasiekiamas programoje, šiuo atveju mes pasirinkome jo šakninį katalogą, tada sukuriame funkciją, kuri prideda vaizdą prie selektorius su „jQuery“ kad galėtume tą patį parodyti SAULĖ.
Toje dalyje HTML matome, kad sukūrėme sąrašą su sąrašui priklausančiais elementais daiktai ir galiausiai nurodome, kad įvykis yra pelės žymeklis ir funkcija, kurią reikia atlikti įvykus šiam įvykiui. Pažiūrėkime, kaip atrodo mūsų programa, kai ją paleidžiame savo naršyklėje:

Tada, jei perkelsime pelės žymeklį į kai kuriuos tekstus, bus įkeltas atitinkamas vaizdas ir pamatysime mūsų pavyzdžio funkcionalumą:

Žinoma, kadangi tai yra dinamiškas pokytis, mes negalime to įvertinti, tačiau jei perkelsime žymeklį į viršutinį elementą, vaizdas pasikeis. Tuo baigėme šią pamoką, su kuria įsigilinome į formų darbą Knockout.js, suteikdami mums įrankių, skirtų pagerinti mūsų naudotojų gaunamų duomenų surinkimą ir patvirtinimą.