Obsah
- Poďme na to
- Náš prvý model
- Zbierka obrázkov
- FlickrBombImage
- Vrstva pohľadu
- FlickrBombImageView
- Home Stretch
- Funguje skvele aj s veľkými webovými aplikáciami
- Dodatočné zdroje
Ak hľadáte rýchlo vytvoriť malý nástroj JavaScript, pravdepodobne neuvažujete o použití rámca. Jednoduchšie je hacknúť spolu nejaký kód jQuery, než inštalovať a učiť sa nový rámec, že? Nesprávne, Backbone.js je superľahká štruktúra lepidla, ktorá vyzerá rovnako ako bežný starý JavaScript, ktorý ste zvykli písať.
Tu na ZURB robíme veľa statických prototypov, pretože sme radi, aby sme mohli preklikávať stránky bez toho, aby sme museli písať akýkoľvek backendový kód. Často by sme vypustili fádne šedé zástupné obrázky, alebo by sme niekedy vyhľadali vzorové obrázky na Flickri, aby sme si pomohli predstaviť, čo sa môže vo finálnom koncepte vyskytnúť. To je až do jedného čarovného piatku, keď sme sa rozhodli, že by bolo úžasné napísať nejaký JavaScript, ktorý by vyriešil naše problémy. Chceli sme mať možnosť vyhľadávať a vyberať fotografie na Flickri priamo zo samotných zástupných obrázkov. Volali by sme ho FlickrBomb a toto je príbeh o tom, ako sme ho postavili pomocou Backbone.js.
Pred čítaním sa dôrazne odporúča, aby ste sa rýchlo pozreli na FlickrBomb. Je to jeden z tých obchodov typu „kliknutie má hodnotu tisíc slov“. Len do toho, počkáme si.
V súčasnosti je v bloku veľa rámcov JavaScriptu, SproutCore, JavaScriptMVC, Spine, Sammy, Knockout. Ale pre tento konkrétny projekt sa nám program Backbone.js páčil z niekoľkých rôznych dôvodov:
1. Je ľahký (v skutočnosti 100% bez tukov)
- na váhe, pričom najnovšia zabalená verzia má približne 4,6 kB
- v kóde, ktorý má niečo cez 1 000 riadkov kódu, nie je strašne ťažké sledovať stopu zásobníka dole do vnútorných priestorov bez straty rozumu
2. Vyzerá to ako JavaScript
- pretože to je JavaScript, to je všetko a to je všetko
- používa jQuery, ktorý v dnešnej dobe pozná aj vaša babička
3. Super jednoduchá vytrvalosť
- po vybalení z krabice uchová dáta na backende (cez REST), ale vložením jediného doplnku sa uloží do miestneho úložiska
- pretože abstrahuje od perzistencie API, mohli by sme ho nechať pretrvať na back-end REST odstránením doplnku lokálneho úložiska
Poďme na to
Pretože Backbone.js je iba JavaScript, všetko, čo musíme urobiť, je zahrnúť ho spolu s Underscore.js na stránku. jQuery nie je tvrdou závislosťou na chrbtovej kosti ako takej, ale budeme ju používať, takže ju sem zaradíme. Prepojíme tiež modul plug-in pre miestne úložisko, pretože sa nechceme trápiť s nastavením backendu. Všimnite si, že tu súbory odkazovali len kvôli jednoduchosti, ale vo výrobe by ste mali vždy hostiť svoje vlastné aktíva.
script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"> / script> script src = "http://documentcloud.github.com/backbone/ backbone-min.js "> / script> script src =" http://documentcloud.github.com/underscore/underscore-min.js "> / script> script src =" https://raw.github.com/ jeromegn / Backbone.localStorage / master / backbone.localStorage-min.js "> / skript>
Celý nasledujúci kód v tomto článku je špecifický pre našu aplikáciu, takže ho môžeme zahrnúť do súboru app.js alebo iba vložiť, ak je to vaša vec. Nezabudnite to zahrnúť za chrbtovú kosť. Backbone umožňuje abstrahovať časti našej aplikácie tak, aby boli modulárne pre ľahké opätovné použitie a čitateľnejšie pre ostatných. Aby sme čo najlepšie ilustrovali túto abstrakciu, chystáme sa vysvetliť dizajn FlickrBomb zdola nahor, počnúc modelmi a končiac pohľadmi.
Náš prvý model
Prvou úlohou, ktorú sme sa chystali vyriešiť, bolo vytiahnutie fotografií z Flickru. Modelovanie FlickrImage v chrbtovej kosti je dosť jednoduché, vytvoríme nový model s názvom FlickrImage a pridáme niekoľko metód, ktoré nám pomôžu získať palce rôznych veľkostí.
var FlickrImage = Backbone.Model.extend ({fullsize_url: function () {return this.image_url ('medium');}, thumb_url: function () {return this.image_url ('square');}, image_url: function ( size) {var size_code; switch (size) {case 'square': size_code = '_s'; break; // 75x75 case 'medium': size_code = '_z'; break; // 640 for longest side case 'large ': size_code =' _b '; break; // 1024 na najdlhšej strane predvolené: size_code =' ';} return "http: // farm" + this.get (' farm ') + ".static.flickr.com / "+ this.get ('server') +" / "+ this.get ('id') +" _ "+ this.get ('secret') + size_code +" .webp ";}})
Modely v chrbtovej kosti sú objekty, ktoré je možné uchovať a majú s nimi spojené niektoré funkcie, podobne ako modely v iných rámcoch MVC. Kúzelná časť modelov Backbone spočíva v tom, že môžeme viazať udalosti na atribúty, takže keď sa tento atribút zmení, môžeme aktualizovať naše zobrazenia tak, aby to odrážali. Ale trochu predbiehame.
Keď vytiahneme fotografie z Flickru, získame dostatok informácií na vytvorenie adries URL pre všetky veľkosti. Táto zostava je však ponechaná na nás, takže sme implementovali funkciu .image_url (), ktorá prevezme parameter veľkosti a vráti verejný odkaz. Pretože sa jedná o chrbticový model, môžeme použiť this.get () na prístup k atribútom na modeli. Takže s týmto modelom môžeme urobiť nasledujúce inde v kóde, aby sme získali URL obrázka Flickr.
flickrImage.image_url (‘veľký’)
Celkom stručné, hm? Pretože tento model je špecifický pre našu aplikáciu, pridáme niekoľko funkcií obálky pre veľkosť obrázka v plnej veľkosti a pre palec.
Zbierka obrázkov
FlickrBomb sa zaoberá zbierkami obrázkov, nie jednotlivými obrázkami, a Backbone má vhodný spôsob modelovania. Výstižne pomenovaná kolekcia je to, čo použijeme na zoskupenie obrázkov Flickr do jedného zástupného symbolu.
var FlickrImages = Backbone.Collection.extend ({model: FlickrImage, kľúč: flickrbombAPIkey, stránka: 1, načítanie: funkcia (kľúčové slová, úspech) {var self = this; success = success || $ .noop; this.keywords = kľúčové slová || this.keywords; $ .ajax ({url: 'http://api.flickr.com/services/rest/', data: {api_key: self.key, format: 'json', method: 'flickr. photos.search ', tagy: this.keywords, per_page: 9, stránka: this.page, licencia: flickrbombLicenseTypes}, dataType:' jsonp ', jsonp:' jsoncallback ', success: function (response) {self.add (response) .photos.photo); success ();}});}, nextPage: function (callback) {this.page + = 1; this.remove (this.models); this.fetch (null, callback);}, prevPage: function (callback) {if (this.page> 1) {this.page - = 1;} this.remove (this.models); this.fetch (null, callback);}});
Tu je potrebné poznamenať niekoľko vecí. Po prvé, Model atribút informuje zbierky o tom, aký typ modelu zhromažďuje. Máme tiež niektoré atribúty, ktoré sme inicializovali na neskoršie použitie: key je náš kľúč API Flickr, budete chcieť flickrbombAPIkey nahradiť reťazcom vlastného kľúča Flickr API. Získanie kľúča rozhrania Flickr API je zadarmo a ľahké, stačí kliknúť na tento odkaz: www.flickr.com/services/api/misc.api_keys.html. Atribút stránka je aktuálna stránka fotografií Flickr, na ktorých sme.
Veľkou metódou je .fetch (), ktorá abstrahuje od podrobností sťahovania fotografií z rozhrania Flickr API. Aby sme sa vyhli problémom s požiadavkami viacerých domén, používame JSONP, ktorý podporuje rozhranie Flickr API aj jQuery. Ostatné parametre, ktoré prechádzame do API, by mali byť samozrejmé. Tu sú osobitne zaujímavé funkcie chrbtovej kosti. Pri spätnom volaní úspechu používame funkciu .add (), ktorá prevezme pole atribútov modelu, vytvorí z týchto atribútov inštancie modelu a potom ich pridá do kolekcie.
Funkcie .nextPage () a .prevPage () najskôr zmenia stránku, ktorú chceme zobraziť,
použite funkciu zhromažďovania .remove () na odstránenie všetkých existujúcich modelov z priečinka
kolekcie a potom zavolajte program fetch, aby ste získali fotografie pre aktuálnu stránku (ktorú práve
zmenené).
FlickrBombImage
Pri návrate späť potrebujeme ešte jeden model, ktorý predstavuje zástupný obrázok, ktorý bude pozostávať zo zbierky FlickrImages a aktuálneho FlickrImage, ktorý bol vybraný. Tento model budeme nazývať FlickrBombImage.
var localStorage = (podporuje_local_storage ())? new Store ("flickrBombImages"): null; var FlickrBombImage = Backbone.Model.extend ({localStorage: localStorage, initialize: function () {_.bindAll (this, 'loadFirstImage'); this.flickrImages = new FlickrImages (); this.flickrImages.fetch (this.get ('keywords'), this.loadFirstImage); this.set (id: this.get ("id")); this.bind ('change: src', this.changeSrc) ;}, changeSrc: function () {this.save ();}, loadFirstImage: function () {if (this.get ('src') === undefined) {this.set ({src: this.flickrImages. first (). image_url ()});}}});
Pretože tento model je zodpovedný za sledovanie aktuálne vybratého obrázka medzi načítaniami stránok, musí vedieť, aký miestny obchod má byť použitý.Prvý riadok zabezpečí podporu pre localstorage a potom vytvorí obchod, ktorý použijeme na zachovanie vybratého obrázka.
Backbone nám umožňuje definovať funkciu .initialize (), ktorá sa bude volať pri vytvorení inštancie modelu. Túto funkciu používame v nástroji FlickrBombImage na vytvorenie novej inštancie kolekcie FlickrImages, odovzdanie kľúčových slov, ktoré sa použijú pre tento obrázok, a následné načítanie obrázkov z Flickr.
Funkcia .loadFirstImage () bola odovzdaná ako spätné volanie, ktoré sa má spustiť po načítaní obrázkov z Flickru. Ako asi tušíte, táto funkcia nastaví aktuálny obrázok ako prvý v zbierke z Flickru. Nerobí to, ak je už nastavený aktuálny obrázok.
Taktiež použijeme spätné volania atribútov chrbtice, aby sme spustili našu funkciu .changeSrc (), keď sa zmení atribút src tohto modelu. Všetko toto spätné volanie je call .save (), funkcia modelu Backbone, ktorá pretrváva atribúty modelu pre akúkoľvek vrstvu úložiska, ktorá bola implementovaná (v našom prípade localstore). Týmto spôsobom sa okamžite zmení vybraný obrázok.
Vrstva pohľadu
Teraz, keď máme napísaný všetok back-endový (backendový) kód, môžeme zostaviť Zhliadnutia. Pohľady v chrbtovej kosti sa trochu líšia od pohľadov v iných tradičných rámcoch MVC. Zatiaľ čo pohľad sa zvyčajne týka iba prezentácie, chrbtový pohľad je zodpovedný aj za správanie. To znamená, že váš pohľad definuje nielen to, ako niečo vyzerá, ale aj to, čo by malo robiť, keď s ním budete pracovať.
Zobrazenie je bežne (ale nie vždy) viazané na niektoré údaje a prechádza tromi fázami, aby sa z týchto údajov vygenerovalo označenie prezentácie:
1. Inicializuje sa objekt View a vytvorí sa prázdny prvok.
2. Zavolá sa funkcia renderovania, ktorá vygeneruje značku pre pohľad vložením do prvku vytvoreného v predchádzajúcom kroku.
3. Prvok je pripevnený k DOM.
To sa môže javiť ako veľa práce na vygenerovanie určitého označenia a ešte nie sme ani len časťou zobrazenia týkajúcou sa správania, ale je to dôležité a tu je dôvod. Zakaždým, keď upravíte prvky, ktoré sú v DOM, spustíte niečo, čo sa nazýva preformátovanie prehliadača. Preformátovanie je prehliadač, ktorý prepočítava, ako sú umiestnené všetky veci na stránke. Opakované prehliadanie prehliadača môže mať zlý výkon, ak je vyvolané v rámci udalosti pretiahnutia alebo zmeny veľkosti, ktorá sa spúšťa vo veľmi krátkom intervale, ale horšie je, že vyzerajú nedbalo. Pri zložitej manipulácii so stránkou môžete skutočne vidieť, ako sa na stránku pridávajú prvky a ako sa môžu meniť ich umiestnenie. Podľa vzoru Backbone, ktorý inicializuje, vykresľuje a pripája, zaručujete jediné preformátovanie a zmeny na stránke budú vnímané okamžite, bez ohľadu na zložitosť manipulácie s prvkami.
FlickrBombImageView
var FlickrBombImageView = Backbone.View.extend ({tagName: "div", className: "flickrbombContainer", lock: false, template: _.template ('div id = "% = this.image.id.replace (" ", "")%> "... / div> '), initialize: function (options) {_.bindAll (this,' addImage ',' updateSrc ',' setDimentions ',' updateDimentions '); var keywords = options. img.attr ('src') .replace ('flickr: //', ''); this. $ el = $ (this.el); this.image = new FlickrBombImage ({keywords: keywords, id: options. img.attr ('id')}); this.image.flickrImages.bind ('add', this.addImage); this.image.bind ('change: src', this.updateSrc);}, udalosti: { "click .setupIcon": "clickSetup", "click .flickrbombFlyout a.photo": "selectImage", "kliknutie .flickrbombFlyout a.next": "nextFlickrPhotos", "kliknutie .flickrbombFlyout a.prev": "prevFlickrPhotos"}, render: function () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); return this;}, ...});
Funkcie tohto zobrazenia boli kvôli stručnosti vynechané, celý zdrojový kód je k dispozícii na GitHub: github.com/zurb/flickrbomb
V hornej časti zobrazenia máme niekoľko špecifických atribútov chrbtice. tagName a className sa používajú na definovanie značky a triedy, ktoré sa použijú na prvok tohto zobrazenia. Pamätajte, že prvým krokom v rámci vytvorenia zobrazenia je vytvorenie objektu. Pretože toto vytváranie spracováva chrbtová kosť, musíme určiť prvok a triedu. Upozorňujeme, že chrbtica má rozumné predvolené hodnoty; ak tieto atribúty vynecháme, štandardne sa použije div, a pokiaľ neurčíte jeden, nebude použitá žiadna trieda.
Atribút šablóny je konvenciou, ale nie je povinný. Používame ho tu na určenie funkcie šablóny JavaScript, ktorú použijeme na vygenerovanie nášho označenia pre toto zobrazenie. Používame funkciu _.template () obsiahnutú v Underscore.js, ale môžete použiť ktorýkoľvek šablónový engine, ktorý uprednostňujete, nebudeme vás súdiť.
V našej funkcii .initialize () vytiahneme reťazec kľúčových slov zo značky obrázka a potom pomocou týchto kľúčových slov vytvoríme model FlickrBombImage. Tiež zaväzujeme funkciu .addImage (), ktorá sa má spustiť, keď sa do zbierky FlickrImages pridá FlickrImage. Táto funkcia pripojí novo pridaný FlickrImage k našej rozbaľovacej ponuke výberu obrázkov. Posledný a najdôležitejší riadok viaže funkciu .updateSrc () na spustenie, keď sa zmení aktuálne vybraný FlickrImage. Keď sa v modeli zmení aktuálny obrázok, táto funkcia sa spustí, aktualizuje atribút src elementu obrázku a veľkosť CSS zmení a orezá obrázok tak, aby sa zmestil do rozmerov obrázka určených používateľom.
udalosti: {"click .setupIcon": "clickSetup", "click .flickrbombFlyout a.photo": "selectImage", "kliknutie .flickrbombFlyout a.next": "nextFlickrPhotos", "kliknutie .flickrbombFlyout a.prev": "prevFlickrPhotos „}
Po .initialize () máme časť zobrazenia so správaním. Backbone poskytuje pohodlný spôsob viazania udalostí pomocou objektu udalostí. Objekt events používa metódu jQuery .delegate () na vytvorenie skutočnej väzby k prvku View, takže bez ohľadu na to, akú manipuláciu urobíte s prvkom vo vnútri pohľadu, všetky vaše viazané udalosti budú stále fungovať. Funguje to rovnako ako jQuery .live (), až na to, že namiesto väzby udalostí na celý dokument ich môžete zviazať v rámci rozsahu ktoréhokoľvek prvku. Kľúč každej položky v objekte udalostí pozostáva z udalosti a selektora, hodnota označuje funkciu, ktorá by mala byť viazaná na túto udalosť. Upozorňujeme, že .delegate () nefunguje s niektorými udalosťami, ako je napríklad odoslanie, nájdete v dokumentácii jQuery .live (), kde nájdete kompletný zoznam podporovaných udalostí.
render: function () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); vrátiť toto;}
Nakoniec máme funkciu .render (), ktorá je zodpovedná za vytvorenie nášho označenia a za vykonanie akejkoľvek ďalšej práce, ktorú je možné vykonať až po pridaní označenia View k prvku View. Po vykreslení našej šablóny musíme na našom FlickrBombImage zavolať .fetch (). .fetch () je funkcia Backbone, ktorá získava najnovšiu kópiu modelu z vrstvy perzistencie. Ak by sme tento model predtým uložili, funkcia .fetch () by tieto údaje získala teraz. Po načítaní obrázka musíme zavolať zmenu veľkosti, aby sme ho správne umiestnili.
Home Stretch
Keď sú všetky kúsky na mieste, musíme teraz len nájsť zástupné obrázky na stránke a nahradiť ich vykreslenými pohľadmi FlickrBombImage.
$ ("img [src ^ = 'flickr: //']") .each (function () {var img = $ (this), flickrBombImageView = new FlickrBombImageView ({img: img}); img.replaceWith (flickrBombImageView. render (). el);});
Tento malý úryvok je potrebné spustiť v dolnej časti stránky alebo v spätnom volaní pripravenom na dokument, aby sa zabezpečilo, že dokáže nájsť zástupné obrázky, ktoré nahradí. Konvenciu určovania parametra flickr: // [KEYWORD] v atribúte src značky obrázka používame na označenie, že by sa malo vyplniť obrázkami z Flickru. Nájdeme obrázkové prvky so zodpovedajúcim atribútom src, vytvoríme nový FlickrBombImageView a potom nahradíme obrázok našim. Chytíme kópiu pôvodného obrázka a odovzdáme ho nášmu FlickrBombView, aby sme mohli vytiahnuť niektoré ďalšie možnosti konfigurácie, ktoré mohli byť pre prvok zadané.
Konečným výsledkom všetkej tejto tvrdej práce je veľmi jednoduché API pre ľudí, ktorí používajú knižnicu. Môžu jednoducho definovať obrazové značky pomocou konvencie flickr: //, vložiť kód FlickrBomb do dolnej časti svojej stránky a bam, majú z Flickru zástupné obrázky.
Funguje skvele aj s veľkými webovými aplikáciami
Máme veľkú webovú aplikáciu s názvom Pozoruhodné, ktorá bola napísaná bez obáv z generovania obsahu na strane klienta. Keď sme chceli, aby sa sekcie turbo aplikácie nabíjali generovaním klientskej strany obsahu, vybrali sme si Backbone. Dôvody boli rovnaké: chceli sme ľahký rámec, ktorý pomôže udržiavať kód organizovaný, ale nie nás prinútiť prehodnotiť celú aplikáciu.
Zmeny sme zahájili začiatkom tohto roka s veľkým úspechom a odvtedy spievame Backbones chválu.
Dodatočné zdroje
V chrbtovej kosti je oveľa viac ako to, čo som rozoberal v tomto článku, časť C (radič) MVC (radič zobrazenia modelu) pre začiatočníkov, čo je vlastne R (smerovač) v najnovšej verzii. A to všetko je obsiahnuté v dokumentácii Backbone, ľahkom sobotnom dopoludňajšom prečítaní:
documentcloud.github.com/backbone/
Ak máte radi tradičnejšie výukové programy, pozrite si veľmi dobre zdokumentovaný kód tejto aplikácie todo napísaný v chrbtovej kosti:
documentcloud.github.com/backbone/docs/todos.html
