Tartalom
Biztos vagyok benne, hogy minden JavaScript-fejlesztőnek megvolt az a "jaj ... istenem!" pillanat, amikor először ismertek meg olyan keretrendszerekkel, mint a jQuery vagy a MooTools. Az a felismerés, hogy mi volt a rémálom a böngészők közötti vezetékezésről és a részletes parancsokról, egyszerű, tömör és univerzális felülettel váltotta fel a böngésző DOM elérését.
Nos, hogy ezek a keretrendszerek forradalmasították a DOM-hozzáférést, a Knockout célja a felhasználók interakcióinak forradalmasítása. Azáltal, hogy egyszerű kétirányú kötési mechanizmust biztosít a felhasználói felület és a nézetmodell között, a Knockout gondoskodik az összes vezetékről és az események kötéséről, hogy a kettő folyamatosan szinkronban legyen.
Az alábbiakban bemutatjuk a Slidr (egy egyszerű diavetítés-generátor) példaalkalmazás létrehozásának kétrészes útmutatóját, amely bemutatja azokat az alapvető jellemzőket, amelyeket a legtöbb fejlesztő a valós életben használna. Kezdve a Knockout alapjaival és a Knockout integrálásával a meglévő harmadik fél felhasználói felületének összetevőivel. A végére biztosan azt mondod, hogy „ó ... Istenem!” még egyszer.
Változtatások
Itt, Umbracóban, sok változáson megyünk keresztül. Izgalmas változások. Számos éve fejlesztettük az egyik legerősebb és legrugalmasabb nyílt forráskódú CMS-t, amely a .NET keretrendszeren futtatható (láthattad a legutóbbi oktatóanyagot, amelyet a .net magazin februári / márciusi számaiban futtattunk). Ezekben az években a rendszer növekedett és alkalmazkodott a közösség igényeivel együtt. Ma nekilátunk a rendszer eddigi egyik legnagyobb fejlesztésének, az Umbraco 5-nek. Egy újjáépített és újjáépített verzió, amely a webtechnika legújabb fejleményeit használja, biztosítva, hogy rendszerünk még sok éven át tovább növekedjen és alkalmazkodjon a jön.
A frissítés részeként frissítéseket fog kapni arról, hogy miként kezeljük felhasználóink és a rendszer interakcióit. A mai felhasználók többet várnak egy felhasználói felületről. Azt várják, hogy sima lesz, és azt várják, hogy azonnali lesz (köszönet az Apple-nek). Tehát a különféle keretek elmaradása után a Knockout egyértelmű nyertesünknek bizonyult.
Miért éppen a Knockout?
- Könnyű. A http-tömörítés használatakor mindössze 39 vagy 13 KB-os méret elég könnyű bármilyen projekthez használni.
- Bármilyen kerettel működik. Igen, mi is használjuk a jQuery-t, de jó tudni, hogy bármivel működhet.
- Jól dokumentált. Eddig még nem volt olyan kérdés, amelyre nem találtuk a választ a dokumentációban.
- Minimális változtatásokat igényel a már végzett munkában. Nincs rosszabb, mint egy keretrendszer, amely arra kér, hogy felejts el mindent, amit eddig tanultál. A Knockout segítségével a meglévő tudásod tetejére áll.
Tehát remélhetőleg körültekintően jól érzed magad a Knockout forogására, de ahelyett, hogy végigvezetnélek mindent, amire az Umbraco 5-ben használtuk (ez meglehetősen hosszú bemutató lehet), összeállítottam egy minta alkalmazás a Knockout néhány főbb jellemzőjének bemutatásához, amelyeket valószínűleg újra és újra használni fog (ha szeretné megtudni, hogy mégis hogyan használtuk az Umbraco 5-ben, mindenképpen keresse fel és töltse le magának CodePlex).
Tehát minden további nélkül adok neked egy slidr-et, egy Knockout diavetítés-generátort.
A slidr használatához egyszerűen adjon meg egy kifejezést, amellyel képeket szeretne keresni a Flickr-en, és a slidr automatikusan megkeresi őket. Az eredmények közül húzza a tetsző képeket az idővonalra az alján. Az idővonalat úgy rendezheti, hogy a képeket a megjelenítésük sorrendjébe húzza, és megváltoztathatja a kép címét, ha rákattint és szerkeszti az előnézeti területen. Ha eltávolít egy képet az idővonalról, akkor nyomja meg a kis kereszt ikont a kép sarkában, a diavetítés elindításához pedig nyomja meg a jobb alsó sarokban található indítógombot.
Tehát, ha még nem tette meg, menjen, adjon neki egy örvényt. Itt leszek, amikor visszajössz.
Fejezd be? Ok, akkor kezdjük el.
A HTML létrehozása
Feltételezem, hogy tudsz egy keveset a HTML-ről, ezért itt az ötlet az, hogy csak elkészítsd az alkalmazás tervét és elrendezését. Dióhéjban tervezd meg magad, vagy csak használd a letölthető HTML sablont. A fő összetevők, amelyekre szüksége lesz: a keresési terület, beleértve a keresési beviteli mezőt, és a keresési eredmények megjelenítésének helye; idővonalterület a kiválasztott fényképek hozzáadásához / rendezéséhez; előnézeti terület a kiválasztott fénykép nagyobb előnézetének megjelenítéséhez, szövegmezővel a fényképek címének szerkesztésére; végül pedig egy indítógomb a diavetítés elindításához.
A szkriptek hozzáadása
Most, hogy megvan a tervezési beállítás, itt az ideje, hogy elvégezzen néhány dolgot. A szkriptek megkezdése előtt azonban be kell építenünk néhány könyvtárat. Tehát folytassa, és foglalja bele a következő szkripteket a HTML-dokumentum fejrészébe.
script type = "text / javascript" src = "js / jquery-1.7.1.min.js"> / script> script type = "text / javascript" src = "js / knockout-2.0.0.js"> / szkript> script type = "text / javascript" src = "js / knockout.mapping-latest.js"> / script>
Először a jQuery könyvtár beillesztésével kezdődik, majd a Knockout könyvtár és a Knockout leképezés plug-in (rövidesen megismerkedünk ezzel.)
Annak érdekében, hogy a kódunk ne legyen külön a bemutatónktól, létrehozunk egy JavaScript-fájlt, amely tartalmazza az összes kódot, amelyet írni fogunk ebben az oktatóanyagban. Tehát a szkriptek mappában csak hozzon létre egy üres JavaScript fájlt, és tegye bele a fejrészbe is.
script type = "text / javascript" src = "js / slidr.js"> / script>
Most, hogy regisztráltuk magunkat, valóban elkezdődhet a móka.
Keresés
Az első dolog, amit megvalósítunk, az a képkeresés. Ehhez a Flickr-t és a JSON API-t fogjuk használni. A Flickr API használatához regisztrálnia kell egy API kulcsot, vagy ha csak ki szeretné próbálni ezt az oktatóanyagot, akkor csak a bemutatómat használja: 60aa42175d788be84e5c4cb0d659e7ef.
Nyissa meg az utolsó lépésben készített szkriptfájlt, és induljunk tovább.
Először a Knockout egyik sarokkövével először elkészítjük a nézetmodellünket. A nézetmodell egyszerűen egy objektum, amelyen meghatározzuk a különböző változók tulajdonságait, amelyeket nyomon szeretnénk követni:
var viewModel = {searchTerm: ko.observable (“”), searchTimeout: null, foundPhotos: ko.observableArray ([])};
Nézetmodellünkön meghatároztunk olyan tulajdonságokat, amelyek megtartják a beírt keresési kifejezés értékét, egy olyan időtúllépési funkciót, amely kis késéssel végrehajtja a tényleges keresést, és egy tulajdonságot, amely megtartja azokat a keresési eredményeket, amelyeket visszakapunk a keresésből.
Mostanra valószínűleg észrevette az imént definiált tulajdonságok néhány vicces értékét, és kíváncsi arra, hogy miről is van szó. Nos, így mondja el a Knockoutnak, hogy azt szeretné, ha a tulajdona kötelező lenne. Használva ko.megfigyelhető vagy ko.observableArray (természetesen tömb típusú változók esetén) A Knockout nyomon követi az adott tulajdonságokban bekövetkezett változásokat, és azonnal értesíti a módosítások minden bekötött elemét, amint azok bekövetkeznek. Azok a paraméterek, amelyeket átadunk a megfigyelhető módszereknek, egyszerűen azok az alapértelmezett értékek, amelyeket szeretnénk, hogy ezek a tulajdonságok legyenek.
Oké, tehát a megfigyelhető tulajdonságok birtoklása önmagában eléggé értelmetlen, ezért legközelebb azokat az elemeket szeretnénk összekapcsolni, amelyek befolyásolják vagy befolyásolják ezeknek a tulajdonságoknak a változásai. Ehhez egyszerű adatkötési szintaxist használunk HTML elemeinken.
A keresési beviteli mezőbe adja hozzá a következő adat-bind attribútumot:
input id = "search-term" type = "text" data-bind = "value: searchTerm, valueUpdate:’ afterkeydown ’, esemény: {keyup: search}" />
Az adatkötés attribútummal a Knockout egy elemet egy nézetmodell tulajdonsághoz köt. Megmondja a Knockoutnak, hogy ennek hogyan kell befolyásolnia az adott tulajdonságot, vagy hogyan kell befolyásolni az adott tulajdonság változását.
Tehát mi a keresési beviteli mezőnk a Knockoutnak? Nos, az első kötésünk van érték: searchTerm. Ez azt mondja, hogy amikor megváltozik az input érték attribútum, akkor automatikusan frissítenie kell a keresési kifejezés tulajdonság a nézetmodellünkön. Továbbá, ha a keresési kifejezés a tulajdonság az alkalmazás más részein frissül, akkor automatikusan frissíteni kell az új értékkel. A második kötésünk van valueUpdate: ‘afterkeydown’. A Knockout számára ez azt mondja, hogy frissítenie kell a csatlakoztatott tulajdonságot, miután rögzítette a kulcs lefelé eseményt. Alapértelmezés szerint a Knockout frissíti a tulajdonságokat, amikor egy változáseseményt rögzítenek (a beviteli mezők esetében ez általában akkor van, amikor a mező elveszíti a fókuszt), de mivel képeket akarunk keresni, miközben a felhasználó gépel, azt mondhatjuk a Knockout-nak, hogy a gomb lenyomása után frissítse .
Utolsó kötelező nyilatkozatunk az esemény: {keyup: search}. Ez most érdekes és kissé különbözik a többitől, mivel ez alapvetően azt mondja a Knockoutnak, hogy kötődjön a bemeneti mezőnk által felvetett eseményhez, ebben az esetben billentyűzet, és egy érték frissítése helyett hívjon meg egy módszert a nézetmodellünkön: „keresés”. A nézetmodellünkön még nincs módszer „keresés”, ezért folytassuk és adjunk hozzá egyet.
var viewModel = {searchTerm: ko.observable (“”), searchTimeout: null, foundPhotos: ko.observableArray ([]), search: function () {console.log (this.searchTerm ()); }};
Így van, egy nézetmodellben megadhat tulajdonságokat és módszereket is. Mindkettő elemekhez köthető, és a Knockout automatikusan szinkronizálja / kiválthatja őket, amikor változás történik.
Oké, tehát meghatároztuk a nézetmodellünket és hozzáadtuk a kötéseinket, most már csak egy utolsó dolgot kell tennünk ahhoz, hogy a Knockout mindent összeragasszon.
$ (function () {ko.applyBindings (viewModel);});
Ez azt jelenti, hogy a Knockout elindítja az összes HTML-dokumentumunkban definiált adatkötési attribútum bekötését a megfelelő tulajdonságokkal a továbbított nézet modelljében (ezt egy jQuery-be is csomagoltam). dokumentum.kész úgy, hogy ez csak akkor legyen meg, amikor a dokumentum készen áll).
Tehát most képesnek kell lennünk a keresési beviteli mező tesztelésére, hogy kiderüljön, minden megfelelően működik-e. Nyissa meg az alkalmazást egy böngészőben, és a fejlesztői eszköztár segítségével ellenőrizze a JavaScript-konzol naplóját. Amikor beírja a keresési beviteli mezőt, el kell kezdenie látni az egyes billentyűk megnyomása után megadott kulcsok naplóját.
Hazzaaa!
Most, hogy ismerjük a kötések működését, részletezzük a keresési módszert a tényleges keresés végrehajtására:
var flickerApiKey = “YOUR_FLICKER_API_KEY”; var viewModel = {… keresés: function () {// Az aktuálisan talált fotók listájának ürítése viewModel.foundPhotos ([]); // Csak akkor keressen, ha a szerch kifejezés megegyezik vagy meghaladja a 3 karaktert, ha (this.searchTerm (). Length> = 3) {// Töröljön minden korábban megkezdett keresést clearTimeout (viewModel.searchTimeout); // Állítson be egy időkorlátot 1 másodpercen belüli keresésre (megakadályozza a keresést minden billentyű megnyomása után) this.searchTimeout = setTimeout (function () {// A keresés varformálása ? method = flickr.photos.search & api_key = "+ flickrApiKey +" & tags = "+ viewModel.searchTerm () +" & per_page = 100 & format = json & jsoncallback =? "; $ .getJSON (URL, függvény (adatok) {if (data.stat) == "ok") {// Az eredmények leképezése ko.mapping.fromJS-ből (data.photos.photo, photoMappingOptions, viewModel.foundPhotos);}});}, 1000); }}};
Remélhetőleg ennek nagy részének értelme van. Lényegében a keresésre való felhívás törli az összes korábbi eredményt, majd ha a keresett kifejezés három karakternél hosszabb, új keresést indít el. Egy másodperccel késleltetjük a keresést, hogy ne pazaroljuk az API hívását, amíg a felhasználó gépel. Végül meghívjuk a Flickr API-t a getJSON hívás és a visszahív módszerrel az eredményeket egy megfigyelhető objektumra térképezzük fel.
Az egyetlen dolog, amit igazán érdemes megemlíteni, egyrészt az a mód, ahogyan a megfigyelhetőként definiált változókat állítjuk be, másrészt a JSON-objektum megfigyelhető objektumhoz való hozzárendelése.
Megfigyelhető tulajdonság megszerzésénél vagy beállításakor úgy kell hozzáférnünk hozzájuk, mintha módszerek lennének, tehát nem viewModel.myProperty = “érték”; olyan értéket kell beállítanunk, mint viewModel.myProperty („érték”); Hasonlóképpen, hogy megkapjuk az értéket, meg kell hívnunk viewModel.myProperty (); nem pedig csak viewModel.myProperty;.
A külső adatokkal való munka érdekében a Knockout néhány segédprogramot tartalmaz, amelyek megkönnyítik az adatok megfigyelhetőségét. Tehát ahelyett, hogy definiálna egy objektumot, és az összes tulajdonságot maga megfigyelhetővé tenné, a Knockout képes iterálni az adatainak tulajdonságain, és mindet fedezheti, hogy megfigyelhető legyen az Ön számára. Ehhez a ko.térkép.JS-től módszer. Ehhez a metódushoz három argumentumra van szükség: az objektum megfigyelhető objektummá alakítására, egy beállítási objektumra és a nézetmodell tulajdonságra, amelyet frissíteni kell a feldolgozott objektummal.
Alapértelmezés szerint a Knockout csak az összes tulajdonságot feltérképezhetővé teszi, azonban ezt módosíthatjuk vagy kibővíthetjük egy beállítási objektummal. Példánkban átmegyünk a photoMappingOptions tárgy. Ennek kódja a következő (ezt is hozzá kell adnia a szkriptfájljához).
var photoMappingOptions = {’létrehozás’: function (o) {var photo = ko.mapping.fromJS (o.data); photo.smallImageUrl = "http: // farm" + photo.farm () + ". static.flickr.com/"+ photo.server () +" / "+ photo.id () +" _ "+ fotó. titok () + "_ s.webp">
Következtetés
Ebben a részben megvizsgáltuk a Knockout alapjait, hogyan definiálhatunk egy nézetmodellt és hogyan köthetjük azt HTML elemekhez, valamint hogyan dolgozhatunk külső adatokkal.
A 2. részben megvizsgáljuk, hogyan lehet harmadik féltől származó összetevőket használni a Knockout-tal együtt, és befejezzük a slidr alkalmazást.
További források
Ennek az oktatóanyagnak a célja, hogy bemutassa a Knockout néhány főbb fogalmát, azonban nem tudtam minden apróságot lefedni, ezért, ha többet szeretne megtudni, feltétlenül nézze meg a Knockout dokumentációs szakaszát webhely.
Ha kicsit túl soknak találta ezt az oktatóanyagot, akkor a Knockout webhelyen is kipróbálhatja az oktatóanyagokat. Fokozatosan építik fel az ismereteit.
