Share
Crearea interfețelor utilizator bazate pe date este una dintre cele mai complexe funcții ale unui dezvoltator web. Aceasta necesită o gestionare atentă între interfață și datele sale subiacente. De exemplu, luați în considerare o simplă interfață pentru coș de cumpărături pentru un site web de comerț electronic. Când utilizatorul șterge un element din coșul de cumpărături, trebuie să eliminați elementul din setul de date care se află subiacent, să eliminați elementul asociat din pagina HTML a coșului de cumpărături și să actualizați prețul total. Pentru toate, dar cele mai banale dintre aplicații, imaginind care elemente HTML se bazează pe o anumită piesă de date este un efort predispus la erori.
Figura 1: Urmărirea manuală a dependențelor între elementele HTML și datele lor subiacente Biblioteca JavaScript Knockout.js oferă o modalitate mai curată de a gestiona aceste tipuri de interfețe complexe, bazate pe date. În loc de a urmări manual care secțiuni ale paginii HTML se bazează pe datele afectate, Knockout.js vă permite să creați o legătură directă între datele subiacente și prezentarea acestora. După legarea unui element HTML cu un anumit obiect de date, orice modificare a obiectului respectiv este automat reflectat în DOM.
Figura 2: Urmărirea automată a dependențelor utilizând Knockout.js Acest lucru vă permite să vă concentrați asupra datelor din spatele aplicației. După ce vă configurați șabloanele HTML, puteți lucra exclusiv cu obiecte de date JavaScript. Cu Knockout.js, tot ce trebuie să faceți pentru a elimina un element din coșul de cumpărături este să îl eliminați din matricea JavaScript care reprezintă elementele coșului de cumpărături al utilizatorului. Elementele HTML corespunzătoare vor fi eliminate automat din pagină, iar prețul total va fi recalculat.
Altfel, Knockout.js vă permite să proiectați un ecran de auto-actualizare pentru obiectele JavaScript.
Dar asta nu-i tot Knockout-ul poate face. În plus față de urmărirea automată a dependenței, aceasta dispune de mai multe caracteristici de sprijin pentru dezvoltarea rapidă a interfețelor utilizator receptive ...
Knockout.js este a client-side biblioteca scrisă integral în JavaScript. Acest lucru îl face compatibil cu aproape orice software de la server, de la ASP.NET la PHP, Django, Ruby on Rails și chiar cadre web personalizate.
Când vine vorba de front-end, Knockout.js conectează modelul de bază de date la elementele HTML prin adăugarea unui atribut HTML unic. Aceasta înseamnă că acesta poate fi integrat într-un proiect existent, cu modificări minime ale librăriilor HTML, CSS și ale altor JavaScript.
În timp ce Knockout.js este livrat cu aproape două duzini de legături pentru a defini modul în care sunt afișate datele, s-ar putea să vă aflați în continuare în nevoie de un comportament specific unei aplicații (de ex. Un widget de evaluare a stelelor pentru recenziile filmelor trimise de utilizatori). Din fericire, Knockout.js ușurează adăugarea propriilor legături, oferindu-vă un control complet asupra modului în care datele dvs. sunt transformate în HTML. Și, din moment ce aceste legături personalizate sunt integrate în limbajul templificator de bază, este banal să reutilizați widget-urile în alte părți ale aplicației.
Figura 3: reutilizarea unei legări personalizate în mai multe componente ale interfeței utilizator Knockout.js vine cu mai multe funcții utilitare, inclusiv filtre array, parsare JSON și chiar și un mod generic de a cartografia datele de pe server într-o vizualizare HTML. Aceste utilitare fac posibilă transformarea unor cantități mari de date într-o interfață de utilizator dinamică, cu doar câteva linii de cod.
Knockout.js este nu a reprezentat un înlocuitor pentru jQuery, Prototype sau MooTools. Nu încearcă să furnizeze animație, manipulare generică a evenimentelor sau funcționalitate AJAX (cu toate acestea, Knockout.js poate analiza datele primite de la un apel AJAX). Knockout.js este axat exclusiv pe proiectarea de interfețe scalabile, bazate pe date - cum se obțin datele care stau la baza, este complet până la tine.
Figura 4: Knockout.js care completează o stivă de aplicații web complete Acest nivel ridicat de specializare face ca Knockout.js să fie compatibil cu orice altă tehnologie de tip client-side și de server, dar înseamnă, de asemenea, că Knockout.js necesită adesea colaborarea unui cadru JavaScript mai complet. În acest sens, Knockout.js este mai mult de a supliment la o stivă tradițională de aplicații web, mai degrabă decât o parte integrantă a acesteia.
Când sunteți gata, treceți la lecția 1!
Această lecție reprezintă un capitol din Knockout Succinct, o carte electronică gratuită de la echipa de la Syncfusion.
Accentsconagua