Conceptual de ansamblu

Knockout.js folosește un model de proiectare Model-View-ViewModel (MVVM), care este o variantă a modelului clasic Model-View-Controller (MVC). Ca și în modelul MVC, model este datele stocate și vedere este reprezentarea vizuală a acestor date. Dar, în loc de controler, Knockout.js folosește a ViewModel ca intermediar între model și vedere.

ViewModel este o reprezentare JavaScript a datelor modelului, împreună cu funcțiile asociate pentru manipularea datelor. Knockout.js creează o legătură directă între ViewModel și vizualizare, care este modul în care poate detecta modificările datelor subiacente și actualizează automat aspectele relevante ale interfeței utilizator.

Figura 5: Modelul modelului View-ViewModel

Componentele MVVM ale exemplului nostru de coș de cumpărături sunt listate după cum urmează:

• Model: Conținutul coșului de cumpărături al unui utilizator stocat într-o bază de date, un modul cookie sau alte stocări persistente. Knockout.js nu-i pasă cum sunt stocate datele dvs. - depinde de dvs. să comunicați între spațiul de stocare al modelului dvs. și Knockout.js. În mod normal, veți salva și încărca datele modelului prin intermediul unui apel AJAX.
• Vedere: Pagina de coș de cumpărături HTML / CSS afișată utilizatorului. După conectarea vizualizării la modelul ViewModel, acesta va afișa automat elemente noi, șterse și actualizate la modificarea modelului ViewModel.
• ViewModel: Un obiect pur JavaScript care reprezintă coșul de cumpărături, inclusiv o listă de articole și metode de salvare / încărcare pentru interacțiunea cu modelul. După conectarea vizualizării dvs. HTML cu ViewModel, aplicația dvs. trebuie să vă îngrijoreze doar de manipularea acestui obiect (Knockout.js se va ocupa de vizualizare).

---

observabilelor

Knockout.js folosește observabilelor pentru a urmări proprietățile ViewModel. Conceptual, observabilele acționează la fel ca variabilele JavaScript normale, dar l-au lăsat pe Knockout.js observa modificările lor și actualizarea automată a părților relevante ale vizualizării.

Figura 6: Utilizarea observabilelor pentru a expune proprietățile ViewModel

---

Bindings

Numai observatori expune proprietatile ViewModel. Pentru a conecta o componentă a interfeței utilizator în vedere la o observabilă particulară, trebuie să lega un element HTML la acesta. După legarea unui element într-un element observabil, Knockout.js este gata să afișeze automat modificările la ViewModel.

Figura 7: Legarea unei componente de interfață utilizator la o proprietate observabilă

Knockout.js include mai multe legături încorporate care determină modul în care apare observabilul în interfața cu utilizatorul. Cel mai obișnuit tip de legare este afișarea pur și simplu a valorii proprietății observate, dar este posibilă și modificarea aspectului în anumite condiții sau apelarea unei metode a ViewModel atunci când utilizatorul face clic pe element. Toate aceste cazuri de utilizare vor fi acoperite în următoarele câteva lecții.

---

rezumat

Modelul de vizualizare Model-View-ViewModel, observabilele și legăturile oferă baza pentru biblioteca Knockout.js. Odată ce ați înțeles aceste concepte, învățarea Knockout.js este pur și simplu o chestiune de a afla cum să accesați observabilele și să le manipulați prin diferitele legături încorporate. În următoarea lecție vom examina primele noastre concepte concrete prin construirea unei aplicații simple "Hello, World!".

Această lecție reprezintă un capitol din Knockout Succinct, o carte electronică gratuită de la echipa de la Syncfusion.