Avanserte bindinger i Knockout.js

Skriving av komplekse applikasjoner er knyttet til økningen i kompleksiteten til koden, selv om dette vanligvis skjer ikke er et aksiom eller en etablert regel, ville det faktisk være best hvis søknaden vår var kompleks på grunn av sammenslutningen av mange små applikasjoner, siden en enkel liten app ville gjøre utviklerens liv mindre komplisert.

I tilfelle av Knockout.js noe lignende skjer med bindinger, der det er atferd som vi kan oppnå ved å bruke bindinger Dette vil imidlertid generere en høy kompleksitet til slutt siden dette reduserer oss litt fleksibilitet, med dette sier vi ikke at bindinger grunnleggende er dårlig, det er rett og slett tider da de ikke ville fungere skikkelig for oss.

Avanserte bindingerDet er derfor vi må bruke avanserte bindinger, her kan vi bygge vår egen bindinger med atferd som vi definerer direkte, sparer oss en viss grad av kompleksitet i koden og får lesbarhet, den eneste ulempen med å kalle det er at vi ville bygge denne oppførselen nesten fra bunnen av, noe som gjør at koden gjenbrukes null.

Lag binding av to eller flere ViewModels
Det er tider når vår ViewModels bør være så enkelt som mulig, eller kanskje vi må bruke en ViewModel som deles på hver side i applikasjonen vår, uansett kravet om å kunne bruke flere ViewModels samtidig forblir det.

Hvordan virker det?Før du bekymrer deg for dette problemet, er det godt å vite at det ikke er noe sprøtt og ikke umulig å gjøre, faktisk er det en veldig vanlig praksis å beholde enkelheten og lesbarheten til koden vår i applikasjonen. For å få dette til å skje trenger vi bare å sende en andre parameter til metoden ko.applyBindings som vil hjelpe oss å nå dette målet ved å begrense bindende til HTML som inneholder den, på denne måten kan vi bruke alle ViewModel som vi trenger uten ulemper

La oss se et lite eksempel hvor vi vil gjøre dette mulig, først og fremst skal vi bygge en HTML hvor vi vil ha to elementer hver med et navn på ViewModel annerledes, vil dette gi oss grunnlaget for det vi ønsker å oppnå, og innenfor hver innspill vil vi ganske enkelt plassere et data-bind av teksttekst.

Allerede i delen av JavaScript vi vil definere vår ViewModel generelt hvor vi vil returnere et attributt kalt Navn og på tidspunktet for forekomsten av dem skal vi lage en viewModel1 og a viewModel2 som vil være forekomster av ViewModel generelt som vi lager med forskjellige navn, til slutt ved å bruke ko.applyBinding vi vil fortelle hvilken blokk HTML hver må tilhøre, og dermed vil vi nå målet med dette eksemplet.

La oss se i følgende kode hvordan vi uttrykker alt det vi har forklart tidligere:

 Avansert databinding

La oss se på bildet nedenfor hvordan vårt eksempel ser ut når vi kjører det i nettleseren:

FORSTØRRE

Vi ser på bildet at våre to ViewModels effektivt blir de brukt i HTML -koden vår, hver enkelt som er inneholdt i elementet som vi sender som den andre parameteren til metoden ko.applyBindings () og dermed gi oss ideen om hvordan vi kan bruke det mer fullstendig i applikasjonene våre.

Bindinger og TinyMCE
For dette eksempelet skal vi bygge en funksjonalitet tilpasset den virkelige verden, vi skal bygge en bindende avansert for å hjelpe oss med å integrere redaktøren TinyMCE i vår HTML, hva denne redaktøren gjør er å bygge et grensesnitt WYSIWYG, det vil si en rik tekstredigerer. Hovedproblemet med denne implementeringen er at vi må lage vår egen bindende, som kan forårsake hodepine hvis vi ikke har en tilstrekkelig guide, som vi vil ha nå.

KravFor å gjennomføre dette eksemplet må vi laste ned noen få eksterne ressurser, i dette tilfellet jQuery i den nyeste versjonen, i tillegg til å laste ned TinyMCE og inkluder det i prosjektet vårt for å få ressursene vi bare trenger å gjøre et raskt søk i Google så vi skal ikke dvele lenge med dette punktet. Den andre tingen vi trenger er å lage en ny fil som heter kobinding.js der vil vi skrive den nødvendige koden slik at løsningen vår kan fungere skikkelig. Når vi har lastet ned alle ressursene våre og på en bane som vi kan få tilgang til fra applikasjonen vår, kan vi deretter skrive koden vår.

Hva programmet vil gjøre er å gi oss en forhåndsvisning av det vi skriver, for dette vil vi lage et skjema der vi skal plassere tekstboksen vår som skal ha på TinyMCE, en tilbakestillingsknapp for å returnere alt til opprinnelig tilstand og til slutt a hvor vi vil motta teksten vi skriver.

Til slutt vil vi inkludere alle ressursene våre, inkludert den nye filen kobinding.js og vi bygger den nødvendige koden for vår ViewModel med en observerbar som lar oss oppdage endringene i tekstboksen, la oss se hvordan koden vår ser ut:

 Avansert databinding TinyMCE Tilbakestill innhold
Forhåndsvisning

Hvis vi ser på koden og vi har fulgt de tidligere opplæringsprogrammene, vil vi legge merke til at det ikke er noe som kan forårsake tvil, men hvis vi kjører dette i nettleseren vår, fungerer det ikke på den måten vi har forklart, og det er fordi vi trenger en bindende tilpasset i vår nye fil.

Hva denne nye koden gjør er en kobling mellom oppførselen til TinyMCE og vår ViewModel, for dette skal vi lage to funksjoner eller metoder som kalles i det Y Oppdater, for metoden i det som navnet antyder er når vi initialiserer komponenten vår, her setter vi bindende av tekstområdet med TinyMCE slik at vi kan bruke det observerbare, i tillegg vil vi definere hendelsen endring som er når tilstanden og innholdet i tekstboksen vår endres, slik at vi kan oppdatere innholdet i sanntid.

Den andre metoden eller funksjonen er Oppdater, aktiveres dette hver gang det er endringer i det koblede elementet, for eksempel knappen for å gjenopprette innholdet. Det det gjør er at det er direkte knyttet til det det observerbare som vi hadde opprettet tidligere gir oss. La oss se den endelige koden da for vår 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 (funksjon () {$ (element) .tinymce (tinymceOptions);}, 0); ko.utils ['domNodeDisposal']. addDisposeCallback (element, funksjon () {$ (element) .tinymce (). fjerne ();}); }, 'update': function (element, valueAccessor, allBindings) {var tinymce = $ (element) .tinymce (), value = valueAccessor () (); if (tinymce) {if (tinymce.getContent ()! == verdi) {tinymce.setContent (verdi); }}}};

Hvis vi kjører igjen i nettleseren vår, vil vi se at alt fungerer som det skal, i skrivende stund og hvis vi endrer fokus, vil vi se at i forhåndsvisningsområdet vårt har vi innholdet slik det skal se ut:

FORSTØRRE

Med dette var vi i stand til å lage en avansert binding og personlig som hjelper oss å forstå alt vi kan oppnå med litt oppfinnsomhet og alle verktøyene det gir oss Slå ut. Tilfeller som det TinyMCE De er veldig vanlige, siden denne typen plug-in er veldig populær i utviklingen av webapplikasjoner, så vi må kanskje bruke en lignende løsning på et tidspunkt i utviklingen av prosjektet vårt.

Med dette har vi fullført denne opplæringen, da vi ser at det ikke er nødvendig å begrense oss til funksjonene og forhåndsbestemte metoder i Slå utSelvfølgelig er det funksjoner som fortsatt er svært avanserte for dette kunnskapsnivået, men som kan oppnås med praksis og forskning. Det interessante er at alt dette kan oppnås med litt lesing av den offisielle dokumentasjonen til Slå ut og ser også etter eksempler som hjelper oss å illustrere og sette oss selv i kontekst.