Legături avansate în Knockout.js

Scrierea aplicațiilor complexe este legată de creșterea complexității codului, deși acest lucru se întâmplă de obicei nu este o axiomă sau o regulă stabilită, de fapt ar fi cel mai bine dacă aplicația noastră ar fi complexă datorită unirii multor aplicații mici, deoarece o singură aplicație simplă ar face viața dezvoltatorului mai puțin complicată.

În cazul în care Knockout.js se întâmplă ceva similar cu legături, unde există comportamente pe care le putem realiza folosind legături Cu toate acestea, acest lucru ar genera o complexitate ridicată în cele din urmă, deoarece acest lucru ne reduce puțin flexibilitatea, cu aceasta nu spunem că legături elementele de bază sunt rele, există pur și simplu momente în care nu ar funcționa corect pentru noi.

Legături avansateDe aceea trebuie să folosim legături avansate, aici ne putem construi propria noastră legături cu comportamente pe care le definim direct, economisindu-ne un anumit grad de complexitate în cod și câștigând lizibilitatea, singurul dezavantaj al apelării este că am construi aceste comportamente aproape de la zero, făcând reutilizarea codului nulă.

Faceți legarea a două sau mai multe ViewModels
Sunt momente în care a noastră ViewModels ar trebui să rămână cât mai simplu posibil sau poate că trebuie să folosim un ViewModel care este partajat pe fiecare pagină a aplicației noastre, în orice caz, cerința de a putea utiliza mai multe ViewModels în același timp rămâne.

Cum functioneazã?Înainte de a vă face griji cu privire la această problemă, este bine să știți că nu este ceva nebunesc și nu este imposibil de făcut, de fapt este o practică foarte obișnuită să păstrăm simplitatea și lizibilitatea codului nostru în aplicație. Pentru a face acest lucru, trebuie doar să trecem un al doilea parametru metodei ko.applyBindings care ne va ajuta să atingem acest obiectiv prin limitarea legare la HTML care îl conține, în acest fel putem aplica toate ViewModel de care avem nevoie fără niciun inconvenient

Să vedem un mic exemplu în care vom face acest lucru posibil, în primul rând vom construi un HTML unde vom avea două elemente fiecare cu un nume de ViewModel diferit, acest lucru ne va oferi baza pentru ceea ce vrem să realizăm și în cadrul fiecărei contribuții vom plasa pur și simplu un legare de date de tip text.

Deja în partea JavaScript ne vom defini ViewModel general unde vom returna un atribut numit Nume iar în momentul creării instanței lor vom crea un viewModel1 și a viewModel2 care vor fi cazuri de ViewModel general pe care îl creăm folosind nume diferite, în cele din urmă prin aplicarea ko.applyBinding vom spune care bloc HTML fiecare trebuie să aparțină și astfel vom atinge obiectivul acestui exemplu.

Să vedem apoi în următorul cod cum exprimăm tot ce am explicat anterior:

 Legare avansată a datelor

Să vedem în imaginea următoare cum arată exemplul nostru când îl rulăm în browser:

MARI

Vedem în imagine că cei doi noștri ViewModels în mod eficient, acestea sunt aplicate în HTML-ul nostru, fiecare conținut în elementul pe care îl trecem ca al doilea parametru metodei ko.applyBindings () oferindu-ne astfel ideea cum o putem aplica mai complet în aplicațiile noastre.

Legături și TinyMCE
Pentru acest exemplu vom construi o funcționalitate adaptată lumii reale, vom construi un legare avansat pentru a ne ajuta să încorporăm editorul TinyMCE în a noastră HTML, ceea ce face acest editor este să construiască o interfață WYSIWYG, adică un editor de text bogat. Principala dificultate a acestei implementări este că trebuie să ne creăm propria noastră legare, care ne poate provoca dureri de cap dacă nu avem un ghid adecvat, pe care îl vom avea acum.

CerințePentru a realiza acest exemplu, trebuie să descărcăm câteva resurse externe, în acest caz jQuery în ultima sa versiune, pe lângă descărcarea fișierului TinyMCE și includeți-l în proiectul nostru, pentru a obține resursele pe care trebuie pur și simplu să le căutăm rapid Google deci nu vom sta mult pe acest punct. Celălalt lucru de care vom avea nevoie este să creăm un nou fișier numit kobinding.js unde vom scrie codul necesar pentru ca soluția noastră să funcționeze corect. Odată ce avem toate resursele descărcate și pe o cale pe care o putem accesa din aplicația noastră, putem scrie codul nostru.

Ceea ce va face aplicația este să ne ofere o previzualizare din ceea ce scriem, pentru aceasta vom crea un formular în care vom plasa caseta de text pe care o vom avea la TinyMCE, un buton de resetare pentru a readuce totul la starea inițială și în cele din urmă a unde vom primi textul pe care îl scriem.

În cele din urmă vom include toate resursele noastre, inclusiv noul fișier kobinding.js și construim codul necesar pentru ViewModel cu observabil care ne permite să detectăm modificările din caseta noastră de text, să vedem cum arată codul nostru:

 Conținutul de resetare avansat de legare a datelor TinyMCE
previzualizare

Dacă ne uităm la cod și am urmat tutorialele anterioare, vom observa că nu există nimic care să ne poată provoca îndoieli, totuși, dacă rulăm acest lucru în browserul nostru, acesta nu va funcționa așa cum am explicat și asta pentru că am nevoie de legare personalizat în noul nostru fișier.

Ce face acest nou cod este o legătură între comportamentul TinyMCE și a noastră ViewModel, pentru aceasta vom crea două funcții sau metode numite init Da Actualizați, pentru metodă init după cum sugerează și numele, atunci când ne inițializăm componenta, aici setăm legare din textarea cu TinyMCE astfel încât să putem aplica observabilul, în plus vom defini evenimentul Schimbare care se schimbă atunci când starea și conținutul casetei noastre de text, astfel încât să putem actualiza conținutul în timp real.

Cealaltă metodă sau funcție este Actualizați, acest lucru este activat de fiecare dată când există modificări în elementul legat, cum ar fi butonul pentru restabilirea conținutului, ceea ce face este că este direct legat de ceea ce ne oferă observabilul pe care l-am creat anterior. Să vedem atunci codul final pentru al nostru 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 ['domNodeDisposal']. addDisposeCallback (element, funcție () {$ (element) .tinymce (). remove ();}); }, 'update': function (element, valueAccessor, allBindings) {var tinymce = $ (element) .tinymce (), value = valueAccessor () (); if (tinymce) {if (tinymce.getContent ()! == valoare) {tinymce.setContent (valoare); }}}};

Dacă rulăm din nou în browserul nostru, vom vedea că totul funcționează așa cum ar trebui, în momentul scrierii și dacă schimbăm focalizarea, vom vedea că în zona noastră de previzualizare avem conținutul așa cum ar trebui să arate:

MARI

Cu aceasta am reușit să creăm un legare avansată și personalizat, care ne ajută să înțelegem tot ce putem realiza cu puțină ingeniozitate și toate instrumentele pe care ni le oferă Făcut praf. Cazuri de genul TinyMCE Acestea sunt foarte frecvente, deoarece acest tip de plug-in este foarte popular în dezvoltarea aplicațiilor web, deci este posibil să trebuiască să aplicăm o soluție similară la un moment dat în dezvoltarea proiectului nostru.

Cu aceasta am terminat acest tutorial, deoarece vedem că nu este necesar să ne limităm la funcțiile și metodele prestabilite din Făcut prafDesigur, există funcționalități care sunt încă foarte avansate pentru acest nivel de cunoștințe, dar care se pot realiza prin practică și cercetare. Interesant este că toate acestea pot fi realizate cu o mică citire a documentației oficiale a Făcut praf și, de asemenea, căutând exemple de cazuri care să ne ajute să ne ilustrăm și să ne plasăm în context.