Izpratne par datu saistīšanu vietnē Knockout.js

Datu iesiešana tas nav nekas cits kā dinamisko datu apvienošana vai nu teksts, vai HTML dažādās koka daļās SAULE no mūsu dokumenta, kurā darbojas Knockout.js, tas ļauj mums izveidot dinamisku saturu no skatiem un modeļiem.
Šo koncepciju var atrast daudzās attīstības sistēmās JavaScript tā kā tas ir ļoti efektīvs veids, kā izteikt attīstības loģiku, tāpēc ir ļoti svarīgi, lai mēs, veidojot lietojumprogrammas, saprastu, kā tas darbojas un kā tas var atvieglot mūsu dzīvi.
PrasībasGalvenā prasība ir spēja izpildīt Knockout.js vai mēs to esam lejupielādējuši vai iekļāvuši no a CDN. Mums būs vajadzīgs arī stila serveris Apache lai kalpotu mūsu lapai, kā arī teksta redaktoram Cildens teksts vai NotePad ++, lai izveidotu dokumentus, kas tiks glabāti mūsu lietojumprogrammās.
Labākais veids, kā redzēt Datu iesiešana ir ar piemēru, redzēsim nākamajā kodā, kā mēs esam izveidojuši dokumentu HTML kur mēs iekļaujam Knockout.js, tad mūsu ķermenī mēs esam izveidojuši etiķeti H1 tajā mēs izgatavojam a datu saistīšana no HTML, tas nozīmē, ka tas gaida HTML kodu.
Daļā JavaScript mēs vienkārši izveidojām a skata modelis un tajā definēt dažus atribūtus, lai varētu ar to strādāt. Interesanti ir tas, ka tas ļauj mums nodot datus no mūsu skata modelis uz daļu no HTML. Apskatīsim, kā izskatās mūsu kods:

 Datu iesiešana vietnē knockout.js 

Zvanot uz mūsu dokumentu no mūsu pārlūkprogrammas, mēs iegūstam šādu rezultātu:

Šeit mēs redzam, kā mēs esam izveidojuši metodi, kas atgriež nosaukumu un mazliet HTML lai piešķirtu tai stilu, tas nozīmē, ka mums var būt bezgalīgs iespēju klāsts, bet, iespējams, visvairāk izceļas tas, ka mēs varam izmantot datu iesiešana gandrīz jebkuram priekšmetam. Tātad mēs varam nosūtīt tekstu, HTML utt.
Bet ne tikai tas, kas mums ļauj, ir drukāt tekstu lietotājam, bet arī mūsu etiķetēs varam iekļaut CSS, klases un atribūtus HTML, ļaujot mums kontrolēt gandrīz katru mūsu lapas aspektu bez nepieciešamības iestatīt statiskas vērtības.
Nākamajā piemērā aplūkosim, kā mēs etiķetei piešķiram īpašu klasi HTML, ideja ir tāda, ka mēs varam ģenerēt dinamiskus stilus bez nepieciešamības iejaukties, ja mums ir lietojumprogramma, kas meklē fontu ATPŪTATomēr šajā gadījumā, lai vienkāršotu, mēs dinamiski ielādēsim tikai vienu komponentu:

 Datu iesiešana vietnē knockout.js 
 

Pēc tam mēs pamanām, kā mēs varam nodot komponentu stils kas noteiks teksta izskatu, mēs varētu pievienot arī klasi un visbeidzot mēs izsaucam savu tekstu no modeļa, kā arī pamanām, ka mēs to visu darām vienā un tajā pašā veidā datu saistīšana, tikai atdalot dažādus elementus ar komatiem.
Ja mēs izpildām savu jauno piemēru, rezultāts mūsu pārlūkprogrammā ir šāds:

PALIELINĀT

Pievērsīsim īpašu uzmanību daļai atkļūdotājs no HTML pārlūkprogrammā, šeit mēs redzam, kur atrodas datu iesiešana tie tika efektīvi pārnesti uz etiķeti.
Ir arī citas funkcijas, kuras varam izmantot kopā ar datu iesiešana, viens no tiem ir nosacījumi, tas ir, mēs varam ievietot vienu vai otru elementu mūsu etiķetēs HTML ņemot vērā mūsu modeļa dažādās īpašības. Apskatīsim šādu kodu, kur mēs izmantojam šī stila piemēru:

 Nosacītu datu saistīšana 
 

Mūsu modeļa skatā mēs esam definējuši atribūtu, ko sauc par id, un mēs to iestatām uz 0, pēc tam savā HTML sadaļā datu saistīšana Mēs esam definējuši trīskāršu operatoru, kur mēs norādām, ja modeļa skata ID ir 0, tas izdrukā “Hello”, pretējā gadījumā - “Goodbye”.
Izpildīsim piemēru pārlūkprogrammā, lai redzētu tā rezultātu:

Interesants uzdevums būtu, ja jūs varētu mainīt ID uz citu vērtību, lai apstiprinātu darbību, tāpēc mēs to atstājam kā uzdevumu.
Kaut kas ļoti svarīgs, kas mums jāņem vērā, ir mūsu elementu konteksts Knockout.js izmanto hierarhisku struktūru Tēvs dēls lai apstrādātu dažādas īpašības, kuras iegūstam no modeļa skatiem.
Tas nozīmē, ka mēs vienmēr strādājam, pamatojoties uz vecākiem, un tādējādi mēs varam piekļūt tā īpašībām, tādējādi radot bērna īpašības, kas atšķiras no citiem bērniem, kas ir vienā līmenī, tādējādi spējot iekļaut dažādas vērtības.
Tā kā viss ir saistīts ar kontekstu, mēs redzam, ka iepriekšējos piemēros mēs varētu izmantot datu saistīšanas teksts bez nepieciešamības norādīt, kam tas pieder, jo, kad tas notiek, Knockout.js tas uzreiz uzņemas pašreizējā bērna kontekstu. Tālāk aplūkosim dažādus konteksta veidus, kurus mēs varam apstrādāt savā lietojumprogrammā:
$ sakneTas ir galvenais konteksts, no kurienes izriet mūsu modeļa uzskats, kad tas tiek izsaukts no jebkuras mūsu lietojumprogrammas daļas, tas vienmēr meklēs hierarhiskākās un augstākās prioritātes attiecības mūsu struktūrā, tas ir īpašs, ja mums ir daudz bērnu un mēs gribam kaut ko no vecākā vecāka.
$ vecāksTas darbojas līdzīgi kā $ sakne, ar atšķirību, ka tas attiecas tikai uz mūsu elementa tiešo vecāku, tāpēc tā darbības joma ir ierobežota, tāpēc to plaši izmanto, strādājot ar cikliem katram lai radītu daudz bērnu.
$ vecākiDaudzskaitļa pievienošana šim kontekstam liecina, ka mēs veidojam sava veida izkārtojumu vai masīvu, kurā ir rādītājs katram bērna vecākiem, no kurienes mēs to saucam, piemēram, šis $ vecāki [0] ir tiešais tēvs, $ vecāki [1] ir tiešā vecāka vecāks un tā tālāk.
$ datiTas ļauj mums piekļūt konteksta datiem, kurā mēs atrodamies, to parasti izmanto, kad mēs strādājam ar saturu, kas ir mainīgs, un mums ir jāpiekļūst mūsu modeļa skata rekvizītiem.
$ indekssTas ir pieejams tikai tad, kad mēs strādājam ar cilpām katram un tas ļauj mums piekļūt dažādām mūsu elementa pozīcijām.
Kad mums ir jāatkārto vairāki elementi, tas ir brīdis, kad mums jāizmanto cilpa katram, tas izskatīs masīvu vai elementu sarakstu, un tādā veidā mēs varam izveidot savu sarakstu dokumentā HTML.
Šajā piemērā mūsu modeļa skatā būs īpašums, ko sauc par grāmatām, un tad mēs to šķērsosim ar katram izmantojot vienu no konteksta mainīgajiem šajā gadījumā $ dati, paskatīsimies:

 Datu saistoša informācija

Ja mēs redzam pārlūkprogrammas rezultātu, mēs pamanīsim darbību, kas notiek, ņemot vērā visus jēdzienus, kurus esam apguvuši apmācības laikā.

Ar to mēs pabeidzam šo apmācību, mēs esam iemācījušies un ar to esam padziļināti sazinājušies Knockout.js, ir svarīgi ļoti dziļi un stabili izprast jēdzienus, kas ir datu iesiešana, jau ir veids, kādā mēs izmantosim modeļa skatījumu datus, atribūtus un īpašības. Mēs varējām saprast arī ļoti svarīgu jēdzienu, piemēram, kontekstu, tagad mēs varam saprast, kā un kāpēc atšķiras dažādi elementi Knockout.js tā zina, kad iegūt dažus datus salīdzinājumā ar citiem, un tas ir tāpēc, ka vienmēr zina mūsu elementu kontekstu.