Rad s obrascima u Knockout.js

Obrasci su sastavni dio svake aplikacije ili web stranice, budući da su jedno od sredstava koja nam omogućuju izvorno dobivanje korisničkih podataka, pa njihovu obradu čini vrlo uobičajenim zadatkom.
Knockout.js omogućuje nam rad s vašim objektom vezanje podataka svi elementi koji mogu činiti oblik, dajući tako mogućnost potvrđivanja, pokretanja događaja, dodjeljivanja opažanja itd. To čini obradu obrazaca na strani klijenta izvedivom, pa dodajemo dodatni sloj provjere valjanosti prije nego što dosegne poslužitelja.
ZahtjeviMorat ćemo samo imati Knockout.js u našem sustavu i pristupačnim aplikacijama koje ćemo stvoriti, dopuštenjima za pisanje datoteka, internetskom vezom za dobivanje knjižnica ako ih nemamo i uređivačem teksta, kao što je Uzvišen tekst ili NotePad ++. Za pokretanje aplikacija potrebna nam je vrsta web poslužitelja Apač ili Nginx u našem okruženju za testiranje.
Prije nego pređemo na primjere sa slučajevima koje možemo primijeniti, vrlo je važno znati veže podatke koji mogu funkcionirati s elementima obrasca naše aplikacije, na ovaj način možemo steći predodžbu o tome što možemo, a što ne možemo postići, osobito na načine na koje možemo postići rezultate koji su nam potrebni za ispravno funkcioniranje naše aplikacije:
Vrijednost vezana za podatkeTo se koristi u vrijednostima ili elementima unosa za odabir, mogu biti ulazni, tekstualni ili odabrani elementi, s tim možemo zabilježiti vrijednost elementa u trenutku kada ga trebamo koristiti.
TextInput za podatkeIstočno obvezujući se koristi s elementima ulaza i tekstualnog područja, njegova funkcija je slična vrijednost Međutim, ako mu dodijelimo promatrano, možemo zabilježiti vrijednosti tijekom interakcije korisnika s elementom, za razliku od vrijednosti koja nam daje vrijednost kada se element promijeni, na primjer kada izgubi fokus.
Provjera vezanosti podatakaKoristi se s elementima tipa potvrdni okvir Y radio tipkeKao što mu naziv govori, omogućuje nam da ustanovimo ili znamo je li element odabran u strukturi koja koristi spomenute elemente.
Opcije povezivanja podatakaKoristeći ovo obvezujući Odabrani element možemo ispuniti opcijama koje će prikazati u obliku, savršen je kada želimo dinamički napraviti katalog opcija.
Veza podataka Odabrane opcijeTakođer isključivo za element select, koristi se kada moramo postaviti odabrane opcije prilikom postavljanja svojstva multi, budući da moramo birati više opcija odjednomz.
Omogućivanje / onemogućavanje povezivanja podatakaOmogućuje nam omogućiti ili onemogućiti bilo koji od različitih elemenata obrasca, s tim možemo ukloniti element ako ga nije potrebno koristiti u tijeku aplikacije pod bilo kojim posebnim uvjetom, gdje omogućiti služi za omogućavanje i onemogućiti onemogućiti, u slučaju da ne znamo značenje svake riječi.
Najzanimljiviji od njih veže podatke je da oni rade na dva načina, to jest, kada dođe do promjene elementa, možemo ga primiti u naš prikaz modela i po potrebi izvršiti neku obradu, ali i ako imamo uočljivo i želimo učiniti nešto iz aplikacije obliku također možemo bez ikakvih problema, sve dok koristimo vezanje podataka pogodan za vrstu elementa obrasca, budući da Knockout.js neće tumačiti pogrešne upute kako bi to mogao učiniti preglednik s kodom HTML.
Pogledajmo sada praktični primjer kako možemo koristiti sve koncepte o kojima smo govorili u prethodnom odjeljku ovog vodiča, stvorit ćemo element tipa tekstualno područje da će prihvatiti samo 140 znakova, budući da ovo ograničenje postoji, moramo obavijestiti korisnika koliko mu je znakova preostalo dok piše.
Logika koju ćemo koristiti je vrlo jednostavna, mi ćemo uključiti data-vezanje textInput u tekstualnom elementu našeg obrasca, tada ćemo ga u našem prikazu modela postaviti kao promatrano, pa možemo početi snimati znakove dok korisnik upisuje. Na kraju koristimo element izračunati Da bismo stvorili složeno promatrano s ukupnim brojem preostalih znakova, u ovom trenutku nećemo prisiliti korisnika da piše manje, samo ih obaviještavamo o znakovima. Pogledajmo kod za naš primjer:

 Obrasci u knockout.js
Unesite tekst

Preostali likovi: 

Valja napomenuti da ne koristimo vrijednost vezana za podatke jer nam je potrebna promjena količine preostalih znakova u trenutku kada korisnik upiše, jer ako ne, mogli bismo samo naznačiti količinu u trenutku kada prelazi u drugi element, a to ne bi bilo optimalno za ono što ciljamo kada koristimo Knockout.jsMeđutim, bit će slučajeva u kojima je takva vrsta ponašanja nužna, sve ovisi o tome što našoj aplikaciji treba. Pa da vidimo kako izgleda naš primjer kada ga pokrenemo u pregledniku:

Naravno, ovdje ne možemo dinamički vidjeti kako se naš brojač spušta, ali kada zapisujemo brojač preostalih znakova, on se ažurira onako kako je zapisano u tekstualnom elementu oblika:

Drugi aspekt koji nam je često potreban u našim aplikacijama pri radu s obrascima su događaji, jer pomoću njih možemo pokrenuti radnje kada korisnik učini nešto posebno, poput klika, ili zadrži pokazivač miša iznad određenog dijela našeg HTML. Pogledajmo neke događaje koje možemo upotrijebiti u svojim oblicima:
Predaj događajOvaj se događaj može koristiti samo u elementu oblik, a aktivira se upravo kada korisnik pošalje obrazac poslužitelju bilo putem slanja unosa ili nekim drugim načinom.
Kliknite događajOvaj je događaj stari poznanik, jer njegovo ime ukazuje da se aktivira kada kliknete na element unutar naše aplikacije.
Događaj HasFocusOvaj događaj se aktivira kada korisnik općenito unese element, tekstualno područje ili odabir i u tom je trenutku aktivan.
Postoji i mogućnost korištenja drugih događaja koji su dostupni u SUNCE na primjer prelazak mišem, pritiskom na tipku kako bismo proširili funkcionalnost našeg prikaza modela na te razine.
U sljedećoj vježbi ćemo primijeniti znanje o događajima koje smo stekli, stvorit ćemo mali obrazac u kojem ćemo imati popis, a svaki put kad zadržite pokazivač miša iznad opcije, slika će biti prikazano, naravno da će ovo biti demonstrativna implementacija i nije prikladna za proizvodnju, međutim pomaže nam da shvatimo na čemu smo radili.
U ovom slučaju će nam dodatno trebati Knockout.js knjižnica jQuery koristiti neke efekte u našoj aplikaciji, pa je idealno preuzeti je i spremiti u istu mapu ili direktorij u kojem imamo Knockout.js, ili ga možda koristiti iz svog CDN službeno. Pogledajmo onda potreban kod:

 Obrasci u knockout.js

Ovdje smo jednostavno napravili popis stvari s opisom i slikom, ta slika aplikaciji može biti dostupna bilo gdje, u ovom slučaju odabrali smo njezin korijenski direktorij, zatim stvaramo funkciju koja dodaje sliku u selektor sa jQuery tako da možemo prikazati isto u SUNCE.
U dijelu HTML vidimo da smo stvorili popis s elementima koji pripadaju popisu stvari i na kraju ukazujemo da je događaj prelazak mišem i funkciju za izvršavanje kada se dogodi ovaj događaj. Pogledajmo kako naša aplikacija izgleda kada je pokrenemo u pregledniku:

Ako pomaknemo pokazivač miša na neki od tekstova, učitat će se odgovarajuća slika i možemo vidjeti funkcionalnost našeg primjera:

Naravno, kako se radi o dinamičkoj promjeni, ne možemo cijeniti promjenu, ali ako pokazivač pomaknemo na gornji element, slika će se promijeniti. Ovime smo završili ovaj vodič s kojim smo zašli u rad obrazaca s Knockout.js, dajući nam alate za poboljšanje hvatanja i provjere valjanosti podataka koji dolaze od naših korisnika.