Avancerede bindinger i Knockout.js

Skrivningen af ​​komplekse applikationer er knyttet til stigningen i kodens kompleksitet, selvom dette normalt ikke er et aksiom eller en fastlagt regel, ville det faktisk være bedst, hvis vores ansøgning var kompleks på grund af foreningen af ​​mange små applikationer, da en simpel lille app ville gøre udviklerens liv mindre kompliceret.

I tilfælde af Knockout.js noget lignende sker med bindinger, hvor der er adfærd, som vi kan opnå ved hjælp af bindinger Dette ville imidlertid generere en høj kompleksitet i sidste ende, da dette reducerer os en smule fleksibilitet, med dette siger vi ikke, at bindinger grundlæggende er dårlige, der er simpelthen tidspunkter, hvor de ikke ville fungere ordentligt for os.

Avancerede bindingerDerfor skal vi bruge avancerede bindinger, her kan vi bygge vores egne bindinger med adfærd, som vi definerer direkte, sparer os for en vis grad af kompleksitet i koden og opnår læsbarhed, den eneste ulempe ved at kalde det, er, at vi ville opbygge denne adfærd næsten fra bunden, hvilket gør kodegenbrug nul.

Lav binding af to eller flere ViewModels
Der er tidspunkter, hvor vores ViewModels skal forblive så enkelt som muligt, eller måske skal vi bruge en ViewModel der deles på hver side i vores ansøgning, under alle omstændigheder kravet om at kunne bruge flere ViewModels samtidig forbliver den.

Hvordan virker det?Inden du bekymrer dig om dette problem, er det godt at vide, at det ikke er noget skørt og ikke umuligt at gøre, faktisk er det en meget almindelig praksis at bevare enkelheden og læsbarheden af ​​vores kode i applikationen. For at få dette til at ske skal vi kun videregive en anden parameter til metoden ko.applyBindings der vil hjælpe os med at nå dette mål ved at begrænse bindende til HTML der indeholder det, på denne måde kan vi anvende alle ViewModel som vi har brug for uden gener

Lad os se et lille eksempel, hvor vi vil gøre dette muligt, først og fremmest skal vi bygge en HTML hvor vi vil have to elementer hver med et navn på ViewModel anderledes, vil dette give os grundlaget for, hvad vi ønsker at opnå, og inden for hvert input vil vi ganske enkelt placere et databinding af teksttekst.

Allerede i den del af JavaScript vi vil definere vores ViewModel generelt, hvor vi vil returnere en attribut kaldet Navn og på tidspunktet for at lave eksemplet på dem skal vi oprette en viewModel1 og a viewModel2 som vil være eksempler på ViewModel generelt, at vi opretter ved hjælp af forskellige navne, endelig ved at anvende ko.applyBinding vi fortæller hvilken blok HTML hver skal høre til, og dermed vil vi nå målet med dette eksempel.

Lad os derefter se i følgende kode, hvordan vi udtrykker alt, hvad vi tidligere har forklaret:

 Avanceret databinding

Lad os se i følgende billede, hvordan vores eksempel ser ud, når vi kører det i browseren:

FORSTØRRE

Vi ser på billedet, at vores to Vis modeller effektivt bliver de anvendt i vores HTML, hver enkelt indeholdt i det element, som vi sender som den anden parameter til metoden ko.applyBindings () hvilket giver os ideen om, hvordan vi kan anvende det mere fuldstændigt i vores applikationer.

Bindinger og TinyMCE
I dette eksempel skal vi bygge en funktionalitet tilpasset den virkelige verden, vi skal bygge en bindende avanceret til at hjælpe os med at integrere editoren TinyMCE i vores HTML, hvad denne editor gør, er at bygge en grænseflade WYSIWYG, det vil sige en rich text editor. Den største vanskelighed ved denne implementering er, at vi skal skabe vores egne bindende, som kan forårsage hovedpine, hvis vi ikke har en tilstrækkelig guide, som vi får nu.

KravFor at udføre dette eksempel skal vi downloade et par eksterne ressourcer, i dette tilfælde jQuery i sin seneste version, udover at downloade TinyMCE og inkludere det i vores projekt, for at få de ressourcer, vi simpelthen skal lave en hurtig søgning i Google så vi vil ikke dvæle længe ved dette punkt. Den anden ting, vi skal bruge, er at oprette en ny fil kaldet kobinding.js det er her, vi vil skrive den nødvendige kode, så vores løsning kan fungere korrekt. Når vi har downloadet alle vores ressourcer og på en sti, som vi kan få adgang til fra vores applikation, kan vi derefter skrive vores kode.

Hvad applikationen vil gøre, er at give os en forhåndsvisning af det, vi skriver, til dette vil vi oprette en formular, hvor vi vil placere vores tekstboks, der vil have på TinyMCE, en nulstillingsknap for at returnere alt til den oprindelige tilstand og til sidst a hvor vi vil modtage den tekst, vi skriver.

Endelig vil vi inkludere alle vores ressourcer inklusive den nye fil kobinding.js og vi bygger den nødvendige kode til vores ViewModel med en observerbar der giver os mulighed for at registrere ændringerne i vores tekstfelt, lad os se, hvordan vores kode ser ud:

 Avanceret databinding TinyMCE Nulstil indhold
Forhåndsvisning

Hvis vi ser på koden, og vi har fulgt de tidligere tutorials, vil vi bemærke, at der ikke er noget, der kan forårsage tvivl, men hvis vi kører dette i vores browser, fungerer det ikke på den måde, vi har forklaret, og det er fordi vi behøver en bindende tilpasset i vores nye fil.

Hvad denne nye kode gør, er en forbindelse mellem adfærden hos TinyMCE og vores ViewModel, til dette vil vi oprette to funktioner eller metoder kaldet i det Y opdatering, for metoden i det som navnet antyder, er, når vi initialiserer vores komponent, her sætter vi bindende af tekstområdet med TinyMCE så vi kan anvende det observerbare, derudover definerer vi begivenheden lave om hvilket er, når tilstanden og indholdet i vores tekstboks ændres, så vi kan opdatere indholdet i realtid.

Den anden metode eller funktion er opdatering, aktiveres dette hver gang, der er ændringer i det sammenkædede element, såsom knappen til at genetablere indholdet, hvilket det gør, er, at det er direkte forbundet med det, det observerbare, som vi tidligere havde skabt, giver os. Lad os se den endelige kode for vores kobinding.js:

 ko.bindingHandlers.tinymce = {init: function (element, valueAccessor, allBindingsAccessor) {var tinymceOptions = {setup: function (editor) {editor.on ('change', function (event) {valueAccessor () (event.target. getContent ());}); }}; $ (element) .text (valueAccessor () ()); setTimeout (funktion () {$ (element) .tinymce (tinymceOptions);}, 0); ko.utils ['domNodeDisposal']. addDisposeCallback (element, funktion () {$ (element) .tinymce (). fjern ();}); }, 'update': function (element, valueAccessor, allBindings) {var tinymce = $ (element) .tinymce (), value = valueAccessor () (); hvis (tinymce) {if (tinymce.getContent ()! == værdi) {tinymce.setContent (værdi); }}}};

Hvis vi kører igen i vores browser, vil vi se, at alt fungerer som det skal, i skrivende stund og hvis vi ændrer fokus, vil vi se, at vi i vores forhåndsvisningsområde har indholdet, som det skal se ud:

FORSTØRRE

Med dette var vi i stand til at oprette en avanceret binding og personlig, der hjælper os med at forstå alt, hvad vi kan opnå med lidt opfindsomhed og alle de værktøjer, det giver os Slå ud. Sager som den af TinyMCE De er meget almindelige, da denne type plug-in er meget populær i udviklingen af ​​webapplikationer, så vi kan blive nødt til at anvende en lignende løsning på et tidspunkt i udviklingen af ​​vores projekt.

Med dette har vi afsluttet denne vejledning, da vi ser, at det ikke er nødvendigt at begrænse os til funktionerne og på forhånd etablerede metoder i Slå udSelvfølgelig er der funktionaliteter, der stadig er meget avancerede for dette vidensniveau, men som kan opnås med praksis og forskning. Det interessante er, at alt dette kan opnås med lidt læsning af den officielle dokumentation af Slå ud og leder også efter eksempler, der hjælper os med at illustrere og placere os selv i kontekst.