Darbs ar veidlapām vietnē Knockout.js

Veidlapas ir jebkuras lietojumprogrammas vai tīmekļa lapas neatņemama sastāvdaļa, jo tas ir viens no līdzekļiem, kas ļauj mums dabiski iegūt lietotāju datus, tāpēc to apstrāde ir ļoti izplatīts uzdevums.
Knockout.js ļauj mums strādāt ar jūsu objektu datu saistīšana visi elementi, kas var veidot veidlapu, tādējādi dodot iespēju apstiprināt, izraisīt notikumus, piešķirt novērojamus utt. Tas padara klienta puses veidlapu apstrādi funkcionējošu, un tāpēc mēs pievienojam papildu validācijas slāni, pirms tas sasniedz servera pusi.
PrasībasMums būs tikai jābūt Knockout.js mūsu sistēmā un ir pieejamas lietojumprogrammām, kuras mēs izveidosim, atļaujas rakstīt failus, interneta savienojums, lai iegūtu bibliotēkas, ja mums to nav, un teksta redaktors, piemēram, Cildens teksts vai NotePad ++. Lai palaistu lietojumprogrammas, mums ir nepieciešams tīmekļa servera tips Apache vai Nginx mūsu testēšanas vidē.
Pirms pārejam pie piemēriem ar gadījumiem, kurus varam piemērot, ir ļoti svarīgi zināt datu saistīšana kas var strādāt ar mūsu lietojumprogrammas formas elementiem, tādā veidā mēs varam sākt gūt priekšstatu par to, ko mēs varam un ko nevaram sasniegt, jo īpaši par veidiem, kā mēs varam iegūt rezultātus, kas nepieciešami, lai mūsu lietojumprogramma darbotos pareizi:
Datu saistīšanas vērtībaTo izmanto vērtībās vai atlases ievades elementos, tie var būt ievades, teksta apgabals vai atlasītie elementi, ar to mēs varam uztvert elementa vērtību brīdī, kad tas ir jāizmanto.
Datu saistīšanas teksta ievadeAustrumi saistošs tiek izmantots kopā ar ievades un tekstarejas elementiem, tā funkcija ir līdzīga vērtību Tomēr, ja mēs tam piešķiram novērojamu, mēs varam uztvert vērtības, kad lietotājs mijiedarbojas ar elementu, atšķirībā no vērtības, kas dod mums vērtību, mainoties elementam, piemēram, kad tas zaudē fokusu.
Datu saistīšana pārbaudītaTo lieto kopā ar šāda veida elementiem izvēles rūtiņu Y radio pogasKā norāda nosaukums, tas ļauj mums noteikt vai zināt, vai elements ir atlasīts struktūrā, kurā tiek izmantoti minētie elementi.
Datu saistīšanas iespējasIzmantojot šo saistošs Mēs varam aizpildīt atlasīto elementu ar opcijām, kuras tas parādīs formā, tas ir ideāli piemērots, ja vēlamies dinamiski izveidot opciju katalogu.
Datu saistīšana atlasītās iespējasArī ekskluzīvi atlasītajam elementam tas tiek izmantots, ja, iestatot īpašumu, mums ir jāiestata atlasītās opcijas multi, jo mums vienlaikus jāizvēlas vairāk nekā viena iespējaz.
Datu saistīšanas iespējošana / atspējošanaTas ļauj mums iespējot vai atspējot dažādus veidlapas elementus, ar to mēs varam noņemt elementu, ja tas nav jāizmanto lietojumprogrammu plūsmā saskaņā ar konkrētiem nosacījumiem, ja iespējot kalpo, lai iespējotu un atspējot atspējot, ja mēs nezinām katra vārda nozīmi.
Interesantākais no šiem datu saistīšana ir tas, ka tie darbojas divos veidos, tas ir, ja notiek izmaiņas kādā elementā, mēs to varam saņemt mūsu modeļa skatā un vajadzības gadījumā veikt kādu apstrādi, bet arī tad, ja mums ir novērojams un mēs vēlamies kaut ko darīt no lietojumprogrammas veidlapā mēs varam arī bez jebkādām problēmām, ja vien mēs izmantojam datu saistīšana piemērots veidlapas elementa veidam, jo Knockout.js tas neinterpretēs kļūdainus norādījumus, kā to varētu darīt pārlūkprogramma ar kodu HTML.
Tagad apskatīsim praktisku piemēru tam, kā mēs varam izmantot visus jēdzienus, par kuriem mēs runājām šīs apmācības iepriekšējā sadaļā, mēs izveidosim tipa elementu tekstūra ka tas pieņems tikai 140 rakstzīmes, jo šis ierobežojums pastāv, mums rakstot jāinformē lietotājs, cik rakstzīmju viņam ir palicis.
Loģika, kuru mēs izmantosim, ir ļoti vienkārša, mēs tajā iekļausim data-bind textInput mūsu veidlapas tekstarejas elementā, tad mūsu modeļa skatījumā mēs to iestatīsim kā novērojamu, un tādējādi mēs varam sākt tvert rakstzīmes, kad lietotājs raksta. Visbeidzot, mēs izmantojam elementu aprēķināts Lai izveidotu salikumu, kas būtu novērojams kopā ar atlikušajām rakstzīmēm, šobrīd mēs nepiespiedīsim lietotāju rakstīt mazāk, mēs tikai informēsim viņus par rakstzīmēm. Apskatīsim mūsu piemēra kodu:

 Veidlapas vietnē knockout.js
Ievadiet tekstu

Atlikušās rakstzīmes: 

Jāatzīmē, ka mēs neizmantojam datu saistīšanas vērtība jo mums ir jāmaina atlikušo rakstzīmju daudzums lietotāja ievadīšanas laikā, jo, ja ne, mēs varētu norādīt tikai summu brīdī, kad tas tiek nodots citam elementam, un tas nebūtu optimāli tam, uz ko mēs mērķējam, izmantojot Knockout.jsTomēr būs gadījumi, kad šāda veida uzvedība ir nepieciešama, viss ir atkarīgs no tā, kas nepieciešams mūsu lietojumprogrammai. Tātad, redzēsim, kā izskatās mūsu piemērs, palaižot to pārlūkprogrammā:

Protams, šeit mēs nevaram dinamiski redzēt, kā mūsu skaitītājs samazinās, bet, rakstot atlikušo rakstzīmju skaitītāju, tas tiek atjaunināts, kā tas ir rakstīts veidlapas tekstarejas elementā:

Vēl viens aspekts, kas mums bieži ir vajadzīgs mūsu lietojumprogrammās, strādājot ar veidlapām, ir notikumi, jo ar tiem mēs varam aktivizēt darbības, kad lietotājs veic kaut ko īpašu, piemēram, noklikšķina, vai novieto peles kursoru virs konkrētas mūsu sadaļas HTML. Apskatīsim dažus notikumus, kurus varam izmantot savās formās:
Iesniegt notikumuŠo notikumu var izmantot tikai elementā veidlapu, un tas tiek aktivizēts tieši tad, kad lietotājs iesniedz veidlapu serverim, izmantojot ievades iesniegšanu vai kādu citu metodi.
Noklikšķiniet uz notikumaŠis notikums ir sena paziņa, jo tā nosaukums norāda, ka tas tiek aktivizēts, noklikšķinot uz kāda elementa mūsu lietojumprogrammā.
HasFocus pasākumsŠis notikums tiek aktivizēts, kad lietotājs ir izvēlējies elementu, kas parasti ievada, izvēlas teksta apgabalu vai izvēlas un ir tajā brīdī aktīvs.
Ir arī iespēja izmantot citus notikumus, kas ir pieejami vietnē SAULE piemēram peles kursors, taustiņu nospiešana lai paplašinātu mūsu modeļa skata funkcionalitāti līdz šiem līmeņiem.
Turpmākajā uzdevumā mēs izmantosim iegūtās zināšanas par notikumiem, izveidosim nelielu veidlapu, kurā mums būs saraksts, un katru reizi, kad novietojam peles kursoru virs opcijas, tiks parādīts attēls parādīts, protams, tā būs demonstrējoša ieviešana un nav piemērota ražošanai, tomēr palīdz mums saprast, pie kā esam strādājuši.
Šajā gadījumā mums būs nepieciešams papildus Knockout.js bibliotēka jQuery lai izmantotu dažus efektus mūsu lietojumprogrammā, tāpēc ideāls ir to lejupielādēt un saglabāt tajā pašā mapē vai direktorijā, kurā esam Knockout.jsvai varbūt izmantojiet to no sava CDN oficiāls. Apskatīsim vajadzīgo kodu:

 Veidlapas vietnē knockout.js

Šeit mēs vienkārši esam izveidojuši lietu sarakstu ar aprakstu un attēlu; šis attēls var būt jebkurā vietā, kur lietojumprogramma var piekļūt, šajā gadījumā mēs esam izvēlējušies tā saknes direktoriju, pēc tam izveidojam funkciju, kas attēlu pievieno selektors ar jQuery lai mēs varētu parādīt to pašu sadaļā SAULE.
Daļā HTML mēs redzam, ka esam izveidojuši sarakstu ar sarakstam piederošajiem elementiem sīkumi un visbeidzot mēs norādām, ka pasākums ir peles kursors un funkcija, kas jāizpilda, kad notiek šis notikums. Apskatīsim, kā izskatās mūsu lietojumprogramma, palaižot to savā pārlūkprogrammā:

Tad, ja mēs pārvietojam peles kursoru uz dažiem tekstiem, tiks ielādēts atbilstošais attēls, un mēs varēsim redzēt mūsu piemēra funkcionalitāti:

Protams, tā kā tās ir dinamiskas izmaiņas, mēs nevaram novērtēt izmaiņas, taču, ja pārvietosim kursoru uz augšējo elementu, attēls mainīsies. Ar to mēs esam pabeiguši šo apmācību, ar kuru esam iedziļinājušies veidlapu darbā Knockout.js, sniedzot mums rīkus, lai uzlabotu mūsu lietotāju iegūto datu uztveršanu un apstiprināšanu.