Sadržaj
Siguran sam da su svi programeri JavaScript imali ono "oh ... moj ... bože!" trenutak kada su prvi put uvedeni u okvire kao što su jQuery ili MooTools. Spoznaja da je ono što je bila noćna mora višestrukog ožičenja preglednika i opsežnih naredbi zamijenjeno je jednostavnim, jezgrovitim i univerzalnim sučeljem, što olakšava pristup DOM-u preglednika.
Pa, kako su ti okviri revolucionirali pristup DOM-u, Knockout želi revolucionirati korisničke interakcije. Pružajući jednostavan dvosmjerni mehanizam vezivanja između vašeg korisničkog sučelja i vašeg modela prikaza, Knockout se brine za sve ožičenje i vezivanje događaja kako bi se ta dva uređaja stalno sinkronizirala.
Slijedi dvodijelni vodič za stvaranje uzorka aplikacije, Slidr (jednostavan generator prezentacija), koji demonstrira neke od osnovnih značajki koje bi većina programera koristila u stvarnom životu. Počevši od osnova Knockouta i vodeći ka integraciji Knockout-a s postojećim komponentama korisničkog sučelja treće strane. Na kraju ćete sigurno reći "oh ... moj ... bože!" ponovno.
Promjene
Ovdje u Umbracu prolazimo kroz puno promjena. Uzbudljive promjene. Već niz godina razvijamo jedan od najjačih i najfleksibilnijih CMS-ova otvorenog koda koji se pokreće na .NET framework-u (možda ste vidjeli nedavni vodič koji smo pokrenuli u izdanjima magazina .net u veljači / ožujku). Tijekom tih godina sustav je rastao i prilagođavao se zajedno s potrebama zajednice. Danas krećemo u jedno od najvećih poboljšanja sustava do danas, Umbraco 5. Obnovljena i rekonstruirana verzija koja koristi neka od najnovijih dostignuća u web tehnologiji, osiguravajući da naš sustav nastavlja rasti i prilagođavati se još mnogo godina dođi.
Kao dio te nadogradnje bit će dostupna ažuriranja o načinu na koji radimo s interakcijama naših korisnika sa sustavom. Današnji korisnici očekuju više od korisničkog sučelja. Očekuju da će biti gladak i očekuju da će biti instant (hvala Appleu). Dakle, nakon što su pratili razne okvire vani, Knockout se istaknuo kao naš jasni pobjednik.
Pa zašto nokaut?
- Lagana je. Sa samo 39 kb ili 13 kb kada se koristi http kompresija, dovoljno je lagan za upotrebu na bilo kojem projektu.
- Radi s bilo kojim okvirom. Da, i mi koristimo jQuery, ali dobro je znati da može raditi sa svime.
- To je dobro dokumentirano. Do sada nije bilo pitanja koje smo imali, a na koje nismo mogli pronaći odgovor u dokumentaciji.
- Zahtijeva minimalne promjene kako već radite. Ne postoji ništa gore od okvira koji traži da zaboravite sve što ste do danas naučili. Uz Knockout nalazi se iznad vašeg postojećeg znanja.
Dakle, nadam se da ćete se otprilike osjećati dobro za to što ste Knockout okrenuli, ali umjesto da vas prođem kroz sve za što smo ga koristili u Umbracu 5 (to bi mogao biti prilično dugačak vodič), sastavio sam uzorak aplikacije za demonstraciju nekih ključnih značajki Knockouta koje ćete vjerojatno koristiti iznova i iznova (ako želite vidjeti kako smo ga koristili u Umbraco 5, svakako ga preuzmite za sebe na CodePlex).
Dakle, bez daljnjeg odlaganja, dajem vam slidr, Knockout slideshow generator.
Da biste koristili slidr, jednostavno unesite pojam za pretraživanje slika na Flickr-u i slidr će ih automatski potražiti za vas. Iz rezultata povucite slike koje vam se sviđaju na vremensku traku pri dnu. Vremensku traku možete sortirati povlačenjem slika prema redoslijedu u kojem želite da se pojave, a naslov slike možete promijeniti tako da je kliknete i uredite u području pregleda. Da biste uklonili sliku s vremenske trake, možete pritisnuti malu ikonu križa u kutu slike, a da biste pokrenuli prezentaciju, samo pritisnite gumb za pokretanje dolje desno.
Pa ako to već niste učinili, krenite u vrtlog. Bit ću ovdje kad se vratite.
Gotovo? Ok, krenimo onda.
Izrada HTML-a
Pretpostavljam da znate ponešto o HTML-u, pa je ovdje ideja samo stvoriti dizajn i izgled aplikacije. Izludite se i dizajnirajte sami, ili jednostavno upotrijebite HTML predložak dostupan u preuzimanju. Glavne komponente koje će vam trebati su: područje pretraživanja, uključujući polje za unos pretraživanja, i mjesto za prikaz rezultata pretraživanja; područje vremenske trake za dodavanje / uređivanje odabranih fotografija; područje pregleda za prikaz većeg pregleda odabrane fotografije, s tekstualnim poljem za uređivanje naslova fotografije; i na kraju gumb za pokretanje za pokretanje prezentacije.
Dodavanje skripti
Sad kad imamo postavke dizajna, vrijeme je da to učinimo nekim stvarima. No, prije nego što počnemo skriptirati, moramo uključiti nekoliko knjižnica. Dakle, naprijed i uključite sljedeće skripte u odjeljak glave vašeg HTML dokumenta.
script type = "text / javascript" src = "js / jquery-1.7.1.min.js"> / script> type type = "text / javascript" src = "js / knockout-2.0.0.js"> / script> type type = "text / javascript" src = "js / knockout.mapping-latest.js"> / script>
Započinjemo s uključivanjem biblioteke jQuery, nakon čega slijedi Knockout knjižnica i dodatak za mapiranje Knockout (uskoro ćemo zaobići ono što to čini).
Kako bi naš kôd bio odvojen od naše prezentacije, stvorit ćemo i uključiti JavaScript datoteku koja sadrži sav kôd koji ćemo napisati u ovom vodiču. Dakle, u vašoj mapi skripti upravo ste stvorili praznu JavaScript datoteku i uključili je i u odjeljak glave.
type script = "text / javascript" src = "js / slidr.js"> / script>
Sad kad smo registrirali svoje uključuju, zabava zaista može početi.
Traženje
Prvo što ćemo implementirati je pretraživanje slika. Za ovo ćemo koristiti Flickr i njihov JSON API. Da biste koristili Flickr API, morat ćete se prijaviti za API ključ, ili ako ga samo želite isprobati za ovaj vodič, slobodno upotrijebite moj demo: 60aa42175d788be84e5c4cb0d659e7ef.
Otvorite datoteku skripte koju ste napravili u posljednjem koraku i krenimo.
Za početak i jedan od temeljnih kamena Knockouta prvo ćemo stvoriti svoj pogled na model. Model prikaza je jednostavno objekt na kojem definiramo svojstva za razne varijable koje bismo željeli pratiti:
var viewModel = {searchTerm: ko.observable (“”), searchTimeout: null, foundPhotos: ko.observableArray ([])};
Na našem modelu prikaza definirali smo svojstva koja sadrže vrijednost unesenog pojma za pretraživanje, jedno koje sadrži funkciju vremenskog ograničenja koja će izvršiti naše stvarno pretraživanje s malim kašnjenjem i svojstvo da zadrži rezultate pretraživanja koje dobijemo natrag iz pretraživanja.
Do sada ste vjerojatno primijetili smiješne vrijednosti nekih svojstava koja smo upravo definirali i pitate se o čemu se radi. Pa, ovako kažete Knockoutu da želite da se vaše imanje može povezati. Pomoću ko.uočljiv ili ko.observableArray (naravno za varijable tipa polja) Nokaut će pratiti sve promjene tih svojstava i obavijestiti sve povezane elemente tih promjena čim se dogode. Parametri koje prenosimo na vidljive metode jednostavno su zadane vrijednosti koje želimo da ta svojstva imaju.
U redu, tako da je posjedovanje svojstava prilično besmisleno samo po sebi, pa ćemo zatim htjeti spojiti elemente koji će utjecati na promjene svojstava ili će na njih utjecati. Za to koristimo jednostavnu sintaksu vezanja podataka na našim HTML elementima.
U polje za unos pretraživanja dodajte sljedeći atribut vezanja podataka:
input id = "search-term" type = "text" data-bind = "value: searchTerm, valueUpdate: 'afterkeydown', event: {keyup: search}" />
Atribut vezivanja podataka je ono što Knockout koristi za vezanje elementa na svojstvo modela prikaza. Govori Knockoutu kako bi trebao utjecati na to svojstvo ili kako bi na to trebalo utjecati promjenama na tom svojstvu.
Pa, što naše polje za unos pretraživanja govori Knockoutu? Pa, prvo povezivanje koje imamo je vrijednost: searchTerm. Ovo što govori je da bi, kada se izvrše promjene u atributu vrijednosti ulaza, on trebao automatski ažurirati pojam za pretraživanje svojstvo na našem modelu pogleda. Uz to, ako pojam za pretraživanje svojstvo se ažurira negdje drugdje u aplikaciji, a zatim bi se trebalo automatski ažurirati novom vrijednošću. Drugo vezanje koje imamo je valueUpdate: ‘afterkeydown’. Ovo što govori Knockoutu jest da bi trebalo ažurirati povezano svojstvo nakon što se uhvati događaj prema dolje. Prema zadanim postavkama, Knockout ažurira svojstva kada se zabilježi događaj promjene (za polja unosa to je obično kad polje izgubi fokus), ali kako želimo tražiti slike dok korisnik tipka, možemo reći da se Knockout ažurira nakon pritiska tipke .
Naša posljednja obvezujuća izjava je događaj: {keyup: search}. Sada je ovaj zanimljiv i pomalo se razlikuje od ostalih jer u osnovi poručuje Knockoutu da se veže za događaj koji je pokrenulo naše polje za unos, u ovom slučaju tipkovnica, i umjesto ažuriranja vrijednosti, pozovite metodu na našem modelu prikaza, "pretraga". Još nemamo metodu "pretraživanja" na našem modelu prikaza, pa krenimo i dodajte je.
var viewModel = {searchTerm: ko.observable (“”), searchTimeout: null, foundPhotos: ko.observableArray ([]), search: function () {console.log (this.searchTerm ()); }};
Točno, na modelu prikaza možete definirati i svojstva i metode. Oboje se mogu vezati za elemente i automatski ih sinkronizirati / pokrenuti Knockoutom kad dođe do promjene.
U redu, dakle, definirali smo svoj model prikaza i dodali svoje vezove, sada postoji samo još jedna zadnja stvar koju moramo učiniti da Knockout zalijepi sve zajedno.
$ (function () {ko.applyBindings (viewModel);});
Ovo čini kickstarting Knockout ožičenjem svih atributa vezanja podataka koje smo definirali u našem HTML dokumentu s relevantnim svojstvima na prosljeđenom modelu prikaza (to sam također umotao u jQuery dokument.već omot tako da se to dogodi samo kad je dokument spreman).
Dakle, sada bismo trebali moći testirati naše polje za unos pretraživanja kako bismo provjerili radi li sve ispravno. Otvorite svoju aplikaciju u pregledniku i pomoću alatne trake za programere provjerite dnevnik konzole JavaScript. Dok tipkate u polje za unos pretraživanja, trebali biste početi vidjeti dnevnik tipki koje ste unijeli nakon svakog pritiska tipke.
Hazzaaa!
Sad kad znamo da naše vezice rade, razjasnimo način pretraživanja kako bismo izvršili stvarno pretraživanje:
var flickerApiKey = “YOUR_FLICKER_API_KEY”; var viewModel = {… search: function () {// Ispraznite trenutni popis pronađenih fotografija viewModel.foundPhotos ([]); // Pretražujemo samo ako je pojam pretraživanja jednak ili duži od ta tri znaka if (this.searchTerm (). Length> = 3) {// Obriši sve započete pretrage clearTimeout (viewModel.searchTimeout); // Postavite vremensko ograničenje za pretraživanje u 1 sekundi (sprječava pronalaženje nakon svakog pritiska tipke) this.searchTimeout = setTimeout (function () {// Izvršite pretraživanje var url = "http://api.flickr.com/services/rest/ ? method = flickr.photos.search & api_key = "+ flickrApiKey +" & tags = "+ viewModel.searchTerm () +" & per_page = 100 & format = json & jsoncallback =? "; $ .getJSON (url, funkcija (podaci) {if (data.stat == "ok") {// Mapiraj rezultate ko.mapping.fromJS (data.photos.photo, photoMappingOptions, viewModel.foundPhotos);}});}, 1000); }}};
Nadam se da bi većina ovoga trebala imati smisla. U osnovi poziv za pretraživanje briše sve prethodne rezultate, a ako je pojam za pretraživanje duži od tri znaka, pokreće novo pretraživanje. Pretragu odgađamo za jednu sekundu kako ne bismo izgubili poziv API-ju dok korisnik tipka. Napokon, Flickr API pozivamo putem a getJSON poziv i u uzvratiti poziv metodom, rezultate mapiramo na vidljivi objekt.
Jedine stvari koje ovdje vrijedi spomenuti su, prvo, način na koji postavljamo varijable koje su definirane kao vidljive, i drugo, akcija mapiranja JSON objekta na promatrani objekt.
Kada dobivamo ili postavljamo uočljivo svojstvo, moramo im pristupiti kao da su metode, umjesto viewModel.myProperty = "vrijednost"; moramo postaviti vrijednost poput viewModel.myProperty ("vrijednost"); isto tako, da bismo dobili vrijednost koju moramo nazvati viewModel.myProperty (); nego samo viewModel.myProperty;.
Da bi vam pomogao u radu s vanjskim podacima, Knockout dolazi s nekim korisnim metodama koje pomažu u mapiranju podataka kako bi bili vidljivi. Umjesto da definirate objekt i sami postavite sva svojstva kao vidljiva, Knockout može prelistavati svojstva vaših podataka i sve ih prikriti vidljivim za vas. Da bismo to učinili koristimo ko.mapping.fromJS metoda. Ova metoda uzima tri argumenta, objekt koji treba pretvoriti u uočljivi objekt, objekt postavke i svojstvo modela prikaza za ažuriranje s obrađenim objektom.
Prema zadanim postavkama, Knockout će samo mapirati sva svojstva koja može na vidljive, međutim, to možemo izmijeniti ili proširiti pomoću objekta postavki. U našem primjeru prenosimo a photoMappingOptions objekt. Kôd za to je sljedeći (trebali biste i ovo dodati u datoteku skripte).
var photoMappingOptions = {’create’: function (o) {var photo = ko.mapping.fromJS (o.data); photo.smallImageUrl = "http: // farm" + photo.farm () + ". static.flickr.com/"+ photo.server () +" / "+ photo.id () +" _ "+ fotografija. secret () + "_ s.webp">
Zaključak
U ovom smo dijelu pogledali osnove nokauta, kako definirati model prikaza i povezati ga s HTML elementima, kao i kako raditi s vanjskim podacima.
U drugom dijelu ćemo pogledati kako koristiti komponente treće strane zajedno s Knockoutom i dovršiti našu aplikaciju slidr.
Dodatni resursi
Cilj ovog vodiča je pokazati vam neke od glavnih koncepata nokauta, no nikako nisam mogao pokriti svako malo, pa ako želite saznati više, svakako pogledajte odjeljak s dokumentacijom o nokautu. web mjesto.
Ako ste pronašli ovaj vodič malo previše, možete ga isprobati i na web mjestu Knockout. Postupno će nadograđivati vaše znanje.
