Share
Această lecție este concepută pentru a fi un sondaj la nivel înalt al componentelor principale ale Knockout.js. Prin implementarea unei aplicații concrete, vom vedea cum modul de vizualizare al lui Knockout, vizualizarea, observabilele și legăturile interacționează pentru a crea o interfață de utilizator dinamică.
Mai întâi, vom crea o pagină HTML simplă pentru a ține tot codul nostru, apoi vom defini un obiect ViewModel, vom expune anumite proprietăți și chiar vom adăuga o legare interactivă astfel încât să putem reacționa la clicurile utilizatorilor.
Înainte de a începe să scrieți orice cod, descărcați ultima copie a site-ului Knockout.js din pagina de descărcări de pe GitHub.com. Din această scriere, cea mai recentă versiune este 2.1.0. După aceasta, suntem gata să adăugăm biblioteca la o pagină HTML.
Să începem cu o pagină HTML standard. În același director ca și biblioteca dvs. Knockout.js, creați un fișier nou numit index.html și adăugați următoarele. Asigurați-vă că modificați knockout-2.1.0.js la numele fișierului din biblioteca Knockout.js pe care ați descărcat-o.
Cod exemplu: item1.htm
Bună ziua, Knockout.js
Coșul de cumpărături al lui Bill
Aceasta este o pagină web de bază HTML 5 care include biblioteca Knockout.js din partea de jos a paginii ; deși, ca orice script extern, îl puteți include oriunde doriți (în interiorul este cealaltă opțiune comună). Foaia de stil style.css nu este de fapt necesară pentru nici unul dintre exemplele din această serie, dar le va face mult mai ușor pe ochi. Acesta poate fi găsit în Anexa A sau descărcat de la https://bitbucket.org/syncfusion/knockoutjs_succinctly. Dacă deschideți pagina într-un browser web, ar trebui să vedeți următoarele:
Figura 8: Pagina web de bază Deoarece nu lucrăm încă cu date persistente, nu avem un model cu care să lucrăm. În schimb, vom trece direct la ViewModel. Până la Lecția 7 :, într-adevăr folosim doar un model View-ViewModel.
Figura 9: Focalizarea în prezent și ViewModel pentru moment Amintiți-vă că un ViewModel este o reprezentare JavaScript pură a datelor dvs. de model. Pentru a începe, vom folosi doar un obiect JavaScript nativ ca ViewModel. Dedesubt
Aceasta creează o "persoană" numită John Smith și ko.applyBindings () metoda spune Knockout.js de a utiliza obiectul ca ViewModel pentru pagină.
Desigur, dacă reîncărcați pagina, acesta va afișa încă "Coșul de cumpărături al lui Bill". Pentru ca Knockout.js să actualizeze vizualizarea bazată pe ViewModel, trebuie să lega un element HTML la personViewModel obiect.
Knockout.js folosește o aplicație specială Date-bind atributului de a lega elemente HTML în ViewModel. Înlocuiți Bill în
eticheta cu un spațiu gol element, după cum urmează:
Cosul de cumparaturi
Valoarea atributului de legare a datelor spune Knockout.js ce trebuie afișat în element. În acest caz, text obligatoriu spune Knockout.js pentru a afișa proprietatea firstName a ViewModel. Acum, când reîncărcați pagina, Knockout.js va înlocui conținutul cu personViewModel.firstName. Ca rezultat, ar trebui să vedeți "Coșul de cumpărături al lui John" în browserul dvs.:
Figura 10: Captură de ecran a primului nostru element de vizualizare legată În mod similar, dacă modificați atributul de legare a datelor la text: ultimName, acesta va afișa "Coșul de cumpărături al lui Smith". După cum puteți vedea, legarea unui element este într-adevăr definirea unui șablon HTML pentru modelul dvs. ViewModel.
Deci, avem un ViewModel care poate fi afișat într-un element HTML, dar urmăriți ce se întâmplă atunci când încercăm să schimbăm proprietatea. După chemare ko.applyBindings (), atribuiți o valoare nouă personViewModel.firstName:
ko.applyBindings (personViewModel); personViewModel.firstName = "Ryan";
Knockout.js nu va actualizați automat vizualizarea, iar pagina va citi în continuare "Coșul de cumpărături al lui John". Acest lucru se datorează faptului că nu l-am expus Nume proprietate la Knockout.js. Orice proprietăți pe care doriți să le urmăriți trebuie să fie Knockout.js observabil. Putem observa proprietățile ViewModel prin schimbarea personViewModel la următoarele:
Accentsconagua
var personViewModel = firstName: ko.observable ("John"), lastName: ko.observable ("Smith"); În loc să alocați direct valori Nume și numele de familie, folosim ko.observable () pentru a adăuga proprietățile în tracker-ul de dependență automat al lui Knockout.js. Când schimbăm proprietatea firstName, Knockout.js ar trebui să actualizeze elementul HTML pentru a se potrivi:
ko.applyBindings (personViewModel); personViewModel.firstName ( "Ryan");
Probabil ați observat că observabilele sunt de fapt funcții - nu variabile. Pentru a obține valoarea unei observabile, o numiți fără argumente și pentru a stabili valoarea, veți trece valoarea ca argument. Acest comportament este rezumat după cum urmează:
obj.firstName () în loc de obj.firstName obj.firstName ( "Maria") în loc de obj.firstName = "Mary" Adaptarea la aceste noi accesori poate fi oarecum contraintuitivă pentru începători la Knockout.js. Fiți foarte atenți să nu atribuiți accidental o valoare unei proprietăți observabile cu = operator. Acest lucru va suprascrie observabile, provocând Knockout.js pentru a opri automat actualizarea vizualizare.
Genericul nostru personViewModel obiect și proprietățile sale observabile funcționează foarte bine pentru acest exemplu simplu, dar rețineți că ViewModels poate de asemenea să definească metode de interacțiune cu datele lor. Din acest motiv, ViewModels sunt adesea definite ca clase personalizate în loc de obiecte generice JavaScript. Să mergem și să înlocuim personViewModel cu un obiect definit de utilizator:
funcția PersonViewModel () this.firstName = ko.observable ("John"); this.lastName = ko.observable ("Smith"); ; ko.applyBindings (new PersonViewModel ()); Acesta este modul canonic pentru a defini un ViewModel și pentru a activa Knockout.js. Acum, putem adăuga o metodă personalizată, cum ar fi:
funcția PersonViewModel () this.firstName = ko.observable ("John"); this.lastName = ko.observable ("Smith"); this.checkout = function () alert ("Încercarea de a verifica afară!"); ; ; Combinarea datelor și a metodelor într-un singur obiect este una dintre caracteristicile definitorii ale modelului MVVM. Acesta oferă o modalitate intuitivă de a interacționa cu datele. De exemplu, când sunteți gata să verificați, pur și simplu apelați verifică() pe ViewModel. Knockout.js oferă chiar și legături pentru a face acest lucru direct din vizualizare.
Ultimul nostru pas în această lecție va fi să adăugați un buton de verificare pentru a apela verifică() metoda pe care am definit-o. Aceasta este o scurtă introducere a legăturilor interactive ale Knockout.js, dar oferă câteva funcționalități utile pe care le vom avea nevoie în următoarea lecție. Dedesubt
tag, adăugați următorul buton:
În loc de legarea textului care afișează valoarea unei proprietăți, clic legarea apelează o metodă atunci când utilizatorul face clic pe element. În cazul nostru, se solicită metoda checkout () a ViewModel-ului nostru și ar trebui să vedeți un mesaj de alertă.
Figura 11: Mesaj de avertizare creat după ce ați făcut clic pe butonul Checkout Setul complet de legături interactive al knockout.js va fi acoperit în Lecția 6:.
Această lecție a urmat aspectele fundamentale ale programului Knockout.js. După cum am văzut, există trei pași pentru crearea unei aplicații web bazate pe Knockout.js:
Vă puteți gândi la elementele obligatorii de vizualizare a proprietăților observabile, cum ar fi construirea unui șablon HTML pentru un obiect JavaScript. După configurarea șablonului, puteți să uitați complet de codul HTML și să vă concentrați exclusiv pe datele din ViewModel din spatele aplicației. Acesta este întregul punct al lui Knockout.js.
În următoarea lecție, vom explora puterea reală din spatele traseului de dependență automată al lui Knockout.js, prin crearea de observabile care se bazează pe alte proprietăți, precum și a unor matrice observabile care să dețină liste de date.
Această lecție reprezintă un capitol din Knockout Succinct, o carte electronică gratuită de la echipa de la Syncfusion.
