Cuprins
Legarea datelor nu este altceva decât unirea datelor dinamice fie text, fie HTML în diferitele părți ale arborelui SOARE din documentul nostru în care funcționăm Knockout.js, acest lucru ne permite să generăm conținut dinamic din vizualizări și modele.Acest concept poate fi găsit într-un număr mare de cadre de dezvoltare pentru JavaScript deoarece este un mod foarte eficient de a exprima logica de dezvoltare, deci este de o importanță vitală să înțelegem cum funcționează și cum ne poate ușura viața atunci când ne facem aplicațiile.
CerințePrincipala cerință este să poți executa Knockout.js indiferent dacă l-am descărcat sau l-am inclus de pe un CDN. De asemenea, vom avea nevoie de un server de stil Apache pentru a ne servi pagina și pentru un editor de text Text sublim sau NotePad ++ pentru a crea documentele pe care aplicațiile noastre le vor transporta.
Cel mai bun mod de a vedea Legarea datelor este cu un exemplu, să vedem în următorul cod cum am creat un document HTML unde includem Knockout.js, apoi în corpul nostru am creat o etichetă H1 în ea facem o legare de date de HTML, aceasta înseamnă că așteaptă codul HTML.
În partea JavaScript pur și simplu ceea ce am făcut a fost să creăm un vizualizare-model și în el definiți câteva atribute pentru a putea lucra cu acesta. Interesant este că acest lucru ne permite să transmitem datele de pe site-ul nostru vizualizare-model la o parte din codul HTML. Să vedem cum arată codul nostru:
Legarea datelor în knockout.jsCând apelăm documentul nostru din browserul nostru, obținem următorul rezultat:
Dar nu numai ceea ce ne permite este să imprimăm text utilizatorului, dar putem încorpora CSS, clase și atribute etichetelor noastre HTML, permițându-ne să controlăm aproape fiecare aspect al paginii noastre fără a fi nevoie să setăm valori statice.
Să vedem în exemplul următor cum dăm o clasă specială unei etichete HTML, ideea este că putem genera stiluri dinamice fără a fi nevoie să intervenim atunci când avem o aplicație care caută un font ODIHNĂCu toate acestea, în acest caz, pentru a simplifica, vom încărca dinamic o singură componentă:
Legarea datelor în knockout.jsObservăm apoi cum putem trece o componentă stil care va defini aspectul textului, am putea adăuga și o clasă și, în cele din urmă, apelăm textul nostru din model, observăm, de asemenea, că facem toate acestea la fel legarea datelor, separând doar diferitele elemente cu virgule.
Dacă rulăm noul nostru exemplu, rezultatul în browserul nostru este următorul:
MARI
Există și alte caracteristici pe care le putem folosi cu legarea datelor, unul dintre ele sunt condiționalele, adică putem plasa un element sau altul în etichetele noastre HTML luând în considerare diferitele proprietăți ale modelului nostru. Să vedem următorul cod în care folosim un exemplu al acestui stil:
Legarea condiționată a datelorÎn vizualizarea modelului nostru, am definit un atribut numit id, pe care l-am setat la 0, apoi în HTML în secțiunea din legarea datelor Am definit un operator ternar, unde specificăm dacă id-ul vizualizării modelului este 0, imprimă „Bună ziua”, altfel imprimă „Adio”.
Să rulăm exemplul în browser pentru a vedea rezultatul acestuia:
Ceva foarte important de care trebuie să ținem cont este contextul elementelor noastre, asta pentru că Knockout.js folosește o structură ierarhică a Tată fiu pentru a gestiona diferitele proprietăți pe care le obținem din vizualizările modelului.
Aceasta înseamnă că lucrăm întotdeauna pe baza unui părinte și, astfel, putem accesa proprietățile acestuia, generând astfel proprietăți ale copilului care diferă de ceilalți copii care se află la același nivel, putând astfel încorpora valori diferite.
Deoarece totul este relativ la context, vedem că am putea folosi în exemplele anterioare textul legat de date fără a fi nevoie să indicăm cui aparține, de când se întâmplă acest lucru, Knockout.js își asumă imediat contextul copilului actual. Să vedem mai jos diferitele tipuri de context pe care le putem gestiona în aplicația noastră:
$ rădăcinăEste contextul principal, este de unde derivă viziunea noastră de model, atunci când este invocată din orice parte a aplicației noastre, va căuta întotdeauna relația cea mai ierarhică și cu cea mai înaltă prioritate din structura noastră, este specială atunci când avem mulți copii și vrem ceva de la părintele mai în vârstă.
$ parinteFuncționează similar cu $ rădăcină, cu diferența că se referă doar la părintele imediat al elementului nostru, astfel încât domeniul său de aplicare este limitat la asta, este utilizat pe scară largă atunci când lucrăm cu cicluri pentru fiecare pentru a genera mulți copii.
$ parintiAdăugarea pluralului în acest context ne spune că construim un fel de aranjament sau matrice care conține un index pentru fiecare dintre părinții copilului de unde îl numim, așa $ părinți [0] este tatăl imediat, $ părinți [1] este părintele părintelui imediat și așa mai departe.
$ dateNe permite să accesăm datele din contextul în care suntem poziționați, este folosit în general atunci când lucrăm cu conținuturi variabile și trebuie să accesăm proprietățile vizualizării modelului.
$ indexEste accesibil numai atunci când lucrăm cu bucle pentru fiecare și ne permite să accesăm diferitele poziții ale elementului nostru.
Când trebuie să repetăm o serie de elemente, este momentul în care trebuie să folosim bucla pentru fiecare, aceasta va trece printr-o matrice sau o listă de elemente și în acest fel ne putem construi lista în document HTML.
În exemplul următor vom avea o proprietate numită cărți în vizualizarea modelului nostru și apoi o vom parcurge cu o pentru fiecare folosind una dintre variabilele de context, în acest caz $ date, sa vedem:
Legarea datelor pentru fiecare
