Napredna povezivanja u Knockout.js

Pisanje složenih aplikacija vezano je za povećanje složenosti koda, iako se to obično ne događa aksiom ili utvrđeno pravilo, zapravo bi bilo najbolje da je naša aplikacija složena zbog sjedinjenja mnogih malih aplikacija, budući da bi jedna jednostavna mala aplikacija programerima učinila život manje kompliciranim.

U slučaju Knockout.js nešto slično se događa s vezivanja, gdje postoje ponašanja koja možemo postići pomoću vezivanja Međutim, to bi na kraju generiralo veliku složenost jer nam to smanjuje malo fleksibilnosti, s time ne kažemo da vezivanja osnove su loše, jednostavno postoje trenuci kada nam ne bi radile kako treba.

Napredno vezivanjeZato moramo koristiti napredna vezivanja, ovdje možemo izgraditi vlastiti vezivanja s ponašanjima koja izravno definiramo, štedeći nam određeni stupanj složenosti koda i stječući čitljivost, jedini nedostatak nazivajući ga je taj što bismo takvo ponašanje izgradili gotovo od nule, čineći ponovnu uporabu koda ništavom.

Učinite povezivanje dva ili više ViewModela
Postoje trenuci kada naši ViewModels trebali ostati što jednostavniji, ili možda trebamo koristiti a ViewModel koji se dijeli na svakoj stranici naše aplikacije, u svakom slučaju zahtjev da se može koristiti nekoliko ViewModels u isto vrijeme ostaje.

Kako radi?Prije nego što se zabrinete oko ovog problema, dobro je znati da to nije nešto ludo i nemoguće učiniti, dapače, vrlo je uobičajena praksa zadržati jednostavnost i čitljivost našeg koda u aplikaciji. Da bi se to dogodilo, moramo samo proslijediti drugi parametar metodi ko.applyVezivi koji će nam pomoći u postizanju ovog cilja ograničavanjem obvezujući prema HTML koja ga sadrži, na ovaj način možemo primijeniti sve ViewModel koje nam trebaju bez ikakvih neugodnosti

Pogledajmo mali primjer gdje ćemo to omogućiti, prije svega ćemo izgraditi a HTML gdje ćemo imati dva elementa svaki s imenom ViewModel drugačije, to će nam dati osnovu za ono što želimo postići, a unutar svakog unosa jednostavno ćemo postaviti a vezanje podataka otkucanog teksta.

Već u dijelu JavaScript definirat ćemo svoje ViewModel općenito gdje ćemo vratiti atribut tzv Ime a u vrijeme kada ćemo napraviti njihovu instancu stvorit ćemo a viewModel1 i a viewModel2 koji će biti primjeri ViewModel općenito da stvaramo koristeći različita imena, konačno primjenom ko.applyBinding reći ćemo koji blok HTML svaki mora pripadati i tako ćemo postići cilj ovog primjera.

Pogledajmo onda u sljedećem kodu kako izražavamo sve ono što smo prethodno objasnili:

 Napredno povezivanje podataka

Pogledajmo na sljedećoj slici kako izgleda naš primjer kada ga pokrenemo u pregledniku:

POVEĆAJTE

Na slici vidimo da nas dvoje ViewModels učinkovito se primjenjuju u našem HTML -u, a svaki se nalazi u elementu koji prosljeđujemo kao drugi parametar metode ko.applyBindings () dajući nam tako ideju kako ga možemo potpunije primijeniti u svojim aplikacijama.

Vezi i TinyMCE
Za ovaj primjer izgradit ćemo funkcionalnost prilagođenu stvarnom svijetu, izgradit ćemo a obvezujući napredni kako bi nam pomogli pri uključivanju uređivača TinyMCE u našem HTML, ono što ovaj uređivač radi je izgradnja sučelja WYSIWYG, odnosno uređivač bogatog teksta. Glavna poteškoća ove implementacije je ta što moramo stvoriti vlastitu obvezujući, što nam može uzrokovati glavobolju ako nemamo adekvatan vodič, koji ćemo sada imati.

ZahtjeviKako bismo izveli ovaj primjer, moramo preuzeti nekoliko vanjskih izvora, u ovom slučaju jQuery u najnovijoj verziji, osim preuzimanja TinyMCE i uključiti ga u naš projekt, kako bismo dobili resurse u kojima jednostavno moramo obaviti brzu pretragu Google pa se nećemo dugo zadržavati na ovoj točki. Druga stvar koju ćemo trebati je stvoriti novu datoteku pod nazivom kobinding.js gdje ćemo napisati potreban kôd kako bi naše rješenje moglo ispravno raditi. Nakon što preuzmemo sve naše resurse i na putu kojem možemo pristupiti iz naše aplikacije, tada možemo napisati naš kôd.

Ono što će aplikacija učiniti jest dati nam a pretpregled onoga što pišemo, za to ćemo stvoriti obrazac u koji ćemo postaviti naš tekstualni okvir koji će imati at TinyMCE, gumb za reset za vraćanje svega u početno stanje i na kraju a gdje ćemo primiti tekst koji pišemo.

Na kraju ćemo uključiti sve naše resurse, uključujući novu datoteku kobinding.js i mi stvaramo potreban kod za naš ViewModel s uočljivo koja nam omogućuje da otkrijemo promjene u tekstualnom okviru, pogledajmo kako izgleda naš kôd:

 Napredno povezivanje podataka TinyMCE Poništi sadržaj
Pregled

Ako pogledamo kôd i slijedimo prethodne upute, primijetit ćemo da ne postoji ništa što bi moglo izazvati sumnje, međutim ako ovo pokrenemo u svom pregledniku, to neće funkcionirati na način na koji smo objasnili, a to je zato što smo trebam obvezujući običaj u našoj novoj datoteci.

Ono što ovaj novi kôd radi je poveznica između ponašanja TinyMCE i naše ViewModel, za to ćemo stvoriti dvije funkcije ili metode tzv u tome Y Ažuriraj, za metodu u tome kao što mu ime govori kada inicijaliziramo našu komponentu, ovdje postavljamo obvezujući tekstualnog područja sa TinyMCE kako bismo mogli primijeniti opažljivo, dodatno ćemo definirati događaj promijeniti kada se stanje i sadržaj našeg tekstualnog okvira mijenjaju, tako da sadržaj možemo ažurirati u stvarnom vremenu.

Druga metoda ili funkcija je Ažuriraj, ovo se aktivira svaki put kada dođe do promjena u povezanom elementu, kao što je gumb za ponovno uspostavljanje sadržaja, što znači da je izravno povezano s onim što nam pruža uočljivo što smo prethodno stvorili. Pogledajmo onda konačni kod za naš 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 (function () {$ (element) .tinymce (tinymceOptions);}, 0); ko.utils ['domNodeDisposition']. addDisposeCallback (element, funkcija () {$ (element) .tinymce (). remove ();}); }, 'update': function (element, valueAccessor, allBindings) {var tinymce = $ (element) .tinymce (), value = valueAccessor () (); if (tinymce) {if (tinymce.getContent ()! == value) {tinymce.setContent (value); }}}};

Ako ponovno pokrenemo preglednik, vidjet ćemo da sve radi kako treba, u vrijeme pisanja, a ako promijenimo fokus vidjet ćemo da u našem području za pregled imamo sadržaj kakav bi trebao izgledati:

POVEĆAJTE

Time smo uspjeli stvoriti napredno vezivanje i personalizirane koja nam pomaže razumjeti sve što možemo postići s malo domišljatosti i svih alata koje nam daje Nokautirati. Slučajevi poput onog TinyMCE Vrlo su česti, budući da je ova vrsta dodatka vrlo popularna u razvoju web aplikacija, pa ćemo možda morati primijeniti slično rješenje u nekom trenutku u razvoju našeg projekta.

Ovime smo završili ovaj vodič, jer vidimo da se nije potrebno ograničavati na funkcije i unaprijed utvrđene metode u NokautiratiNaravno, postoje funkcionalnosti koje su još jako napredne za ovu razinu znanja, ali to se može postići praksom i istraživanjem. Zanimljivo je da se sve to može postići uz malo čitanja službene dokumentacije Nokautirati te također tražimo primjere koji nam pomažu ilustrirati i postaviti se u kontekst.