Duomenų įrišimo supratimas „Knockout.js“

Duomenų įrišimas tai ne kas kita, kaip dinaminių duomenų, esančių tekste arba HTML, sujungimas įvairiose medžio dalyse SAULĖ mūsų dokumento, kuriame veikia „Knockout.js“, tai leidžia mums sukurti dinamišką turinį iš peržiūrų ir modelių.
Šią koncepciją galima rasti daugelyje kūrimo sistemų „JavaScript“ kadangi tai yra labai veiksmingas būdas išreikšti vystymosi logiką, todėl gyvybiškai svarbu, kad mes suprastume, kaip tai veikia ir kaip tai gali palengvinti mūsų gyvenimą, kai darome savo programas.
ReikalavimaiPagrindinis reikalavimas yra sugebėti vykdyti Knockout.js ar mes jį atsisiuntėme, ar įtraukėme iš a CDN. Mums taip pat reikės stiliaus serverio Apache aptarnauti mūsų puslapį, ir teksto redaktorius, pvz Aukščiausias tekstas arba „NotePad ++“, kad sukurtumėte dokumentus, kuriuos turės mūsų programos.
Geriausias būdas pamatyti Duomenų įrišimas yra su pavyzdžiu, pažiūrėkime toliau pateiktame kode, kaip sukūrėme dokumentą HTML kur mes įtraukiame Knockout.js, tada savo kūne sukūrėme etiketę H1 jame darome a susieti duomenis apie HTML, tai reiškia, kad laukia HTML kodo.
Dalis „JavaScript“ tiesiog tai, ką mes padarėme, buvo sukurti a vaizdas-modelis ir jame apibrėžti kai kuriuos atributus, kad būtų galima su juo dirbti. Įdomu tai, kad tai leidžia mums perduoti duomenis iš mūsų vaizdas-modelis į dalį HTML. Pažiūrėkime, kaip atrodo mūsų kodas:

 Duomenų įrišimas knockout.js 

Skambindami mūsų dokumentui iš savo naršyklės, gauname tokį rezultatą:

Čia matome, kaip sukūrėme metodą, kuris grąžina pavadinimą ir šiek tiek HTML suteikti stilių, tai reiškia, kad galime turėti begalę galimybių, tačiau galbūt labiausiai išsiskiria tai, kad galime pritaikyti duomenų įrišimas prie beveik bet kokio daikto. Taigi galime siųsti tekstą, HTML ir kt.
Tačiau ne tik tai, kas leidžia mums, yra spausdinti tekstą vartotojui, bet ir galime įtraukti CSS, klases ir atributus į savo etiketes HTML, leidžia mums valdyti beveik visus mūsų puslapio aspektus, nenustatant statinių verčių.
Toliau pateiktame pavyzdyje pažiūrėkime, kaip etiketei suteikiame ypatingą klasę HTML, idėja yra ta, kad galime sukurti dinaminius stilius, nereikalaudami įsikišti, kai turime programą, kuri ieško šrifto POILSISTačiau šiuo atveju, norėdami supaprastinti, dinamiškai įkeliame tik vieną komponentą:

 Duomenų įrišimas knockout.js 
 

Tada mes pastebime, kaip galime perduoti komponentą stilius kuris apibrėš teksto išvaizdą, mes taip pat galėtume pridėti klasę ir galiausiai vadiname savo tekstą iš modelio, taip pat pastebime, kad visa tai darome tuo pačiu duomenų įrišimas, tik atskiriant skirtingus elementus kableliais.
Jei vykdysime naują pavyzdį, mūsų naršyklės rezultatas bus toks:

DIDELIS

Atkreipkime ypatingą dėmesį į dalį derintojas apie HTML naršyklės, čia matome, kur yra duomenų įrišimas jie buvo veiksmingai perkelti į etiketę.
Yra ir kitų funkcijų, kurias galime naudoti su duomenų įrišimas, vienas iš jų yra sąlyginis, tai yra, mes galime įdėti vieną ar kitą elementą į savo etiketes HTML atsižvelgiant į skirtingas mūsų modelio savybes. Pažiūrėkime šį kodą, kuriame naudojame šio stiliaus pavyzdį:

 Sąlyginis duomenų įrišimas 
 

Mūsų modelio rodinyje mes apibrėžėme atributą, pavadintą id, ir nustatėme jį į 0, tada į mūsų HTML skyriuje susieti duomenys Mes apibrėžėme trejopą operatorių, kuriame nurodome, jei modelio rodinio ID yra 0, jis atspausdina „Labas“, kitaip - „Sudie“.
Paleiskite pavyzdį naršyklėje, kad pamatytumėte jo rezultatą:

Įdomus pratimas būtų, jei galėtumėte pakeisti ID į kitą reikšmę, kad patvirtintumėte operaciją, todėl mes paliekame tai kaip užduotį.
Į labai svarbų dalyką, į kurį turime atsižvelgti, yra mūsų elementų kontekstas, nes Knockout.js naudoja hierarchinę struktūrą Tėvas sūnus tvarkyti įvairias savybes, kurias gauname iš modelio rodinių.
Tai reiškia, kad mes visada dirbame remdamiesi tėvais ir taip galime naudotis jo savybėmis, taip sukurdami vaiko savybes, kurios skiriasi nuo kitų to paties lygio vaikų, todėl galime įtraukti skirtingas vertybes.
Kadangi viskas yra susijusi su kontekstu, matome, kad ankstesniuose pavyzdžiuose galėtume naudoti duomenų susiejimo tekstas nereikia nurodyti, kam jis priklauso, nes kai tai atsitinka, Knockout.js ji iš karto prisiima dabartinio vaiko kontekstą. Toliau pažiūrėkime, kokio tipo kontekstą galime tvarkyti savo programoje:
$ šaknisTai yra pagrindinis kontekstas, iš kur kildinamas mūsų modelio požiūris, kai jis naudojamas iš bet kurios mūsų programos dalies, jis visada ieškos hierarchiškiausio ir aukščiausio prioriteto santykio mūsų struktūroje, jis ypatingas, kai turime daug vaikų ir mes norime kažko iš vyresniojo tėvo.
$ tėvasJis veikia panašiai kaip $ šaknis, tik tuo atveju, kai jis nurodo tik mūsų elemento pirminį tėvą, todėl jo taikymo sritis apsiriboja, jis plačiai naudojamas dirbant su ciklais kiekvienam pagimdyti daug vaikų.
$ tėvaiPrie šio konteksto pridėjus daugiskaitą, mums sakoma, kad mes sukuriame tam tikrą išdėstymą ar masyvą, kuriame yra rodyklė kiekvienam vaiko tėvui, iš kur mes jį vadiname, kaip šis $ tėvai [0] yra tiesioginis tėvas, $ tėvai [1] yra tiesioginio tėvo tėvas ir pan.
$ duomenysTai leidžia mums pasiekti konteksto, kuriame esame, duomenis, jis paprastai naudojamas, kai dirbame su turiniu, kuris yra kintamasis, ir turime pasiekti savo modelio rodinio ypatybes.
$ indeksasJis pasiekiamas tik tada, kai dirbame su kilpomis kiekvienam ir tai leidžia mums pasiekti skirtingas mūsų elemento pozicijas.
Kai reikia kartoti kelis elementus, tai yra momentas, kai turime naudoti kilpą kiekvienam, tai peržiūrės masyvą ar elementų sąrašą ir tokiu būdu galime sudaryti savo sąrašą dokumente HTML.
Šiame pavyzdyje mes turėsime nuosavybę, vadinamą knygomis, mūsų modelio rodinyje ir tada pereisime ją naudodami kiekvienam pasinaudojant vienu iš konteksto kintamųjų, šiuo atveju $ duomenys, Pažiūrėkime:

 Duomenų įrišimas

Jei pamatysime naršyklės rezultatą, pastebėsime operaciją, atsirandančią atsižvelgus į visas sąvokas, kurių mokėmės pamokos metu.

Baigę šią pamoką, sužinojome ir su ja turėjome išsamesnį ryšį Knockout.js, svarbu labai giliai ir tvirtai suprasti sąvokas, kas yra duomenų įrišimas, jau yra būdas, kuriuo naudosime modelio rodinių duomenis, atributus ir ypatybes. Mes taip pat galėjome suprasti labai svarbią sąvoką, pvz., Kontekstą, dabar galime suprasti, kaip skirtingi elementai skiriasi ir kodėl Knockout.js ji žino, kada gauti tam tikrus duomenis, o ne todėl, kad visada žino mūsų elementų kontekstą.