Sisu
- Alustame siis
- Meie esimene mudel
- Piltide kogu
- FlickrBombImage
- Vaate kiht
- FlickrBombImageView
- Kodu venitus
- Toimib suurepäraselt ka suurte veebirakendustega
- Lisaressursid
Kui soovite kiiresti luua väikese JavaScripti tööriista, ei mõtle te tõenäoliselt raamistiku kasutamisele. Lihtsam on mõnda jQuery-koodi kokku häkkida, selle asemel, et installida ja õppida uut raamistikku? Vale, Backbone.js on ülimalt kerge liimiraamistik, mis näeb välja täpselt nagu tavaline vana JavaScript, mida olete harjunud kirjutama.
Teeme siin ZURB-s palju staatilisi prototüüpe, sest meile meeldib, kui saame lehtedel klõpsata, ilma et peaksime mingit taustaprogrammi kirjutama. Sageli langesime halli kohatäide piltidesse või mõnikord otsisime Flickrist proovipilte, et aidata meil visualiseerida, mis võib lõplikus mustandis sisalduda. Seda kuni ühe maagilise reedeni, mil otsustasime, et oleks vinge oma probleemide lahendamiseks natuke JavaScripti kirjutada. Tahtsime, et saaksime Flickris otsida ja valida fotosid otse kohahoidja piltide hulgast. Nimetaksime seda FlickrBombiks ja see on lugu sellest, kuidas me selle Backbone.js-i abil üles ehitasime.
Enne lugemist on väga soovitatav FlickrBomb kiiresti üle vaadata. See on üks sellistest pakkumistest, mille klikk on tuhat sõna väärt. Edasi, me ootame.
Tänapäeval on plokis palju JavaScripti raamistikke, SproutCore, JavaScriptMVC, Spine, Sammy, Knockout. Kuid Backbone.js meeldis meile selle konkreetse projekti jaoks mõnel erineval põhjusel:
1. See on kerge (tegelikult 100% rasvavaba)
- kaalus, kusjuures uusim pakitud versioon on umbes 4,6 kb
- koodis, olles veidi üle 1000 koodirea, pole meeletult raske jälgida pinu jälgi sisemusse
2. See näeb välja nagu JavaScript
- sest see on JavaScripti, see on kõik ja kõik
- see kasutab jQuery-d, mida tänapäeval teab isegi teie vanaema
3. Ülilihtne püsivus
- kastist väljas hoiab andmed taustaprogrammina (REST-i kaudu), kuid ühe pistikprogrammi sisse logides salvestatakse see hoopis kohalikku salvestusruumi
- kuna see eraldab püsivuse API, võime lasta sellel püsida REST-i taustaprogrammina, eemaldades lihtsalt kohaliku salvestusplugina
Alustame siis
Kuna Backbone.js on lihtsalt JavaScripti, peame vaid lisama selle koos lehele Underscore.js. jQuery ei ole selgroo jaoks iseenesest raske sõltuvus, kuid me kasutame seda, nii et lisame selle siia. Seome ka kohaliku mälupistikprogrammi, kuna me ei taha taustaprogrammi seadistamisega vaeva näha. Pange tähele, et failide linkimine hõlmas siin lihtsuse huvides, kuid alati peaksite tootma oma vara.
skript src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"> / skript> skript src = "http://documentcloud.github.com/backbone/ selgroog-min.js "> / skript> skript src =" http://documentcloud.github.com/underscore/underscore-min.js "> / skript> skript src =" https://raw.github.com/ jeromegn / Backbone.localStorage / master / backbone.localStorage-min.js "> / skript>
Kõik järgmised selle artikli koodid on meie rakendusele omased, nii et võime selle lisada faili app.js või lihtsalt selle sisse kirjutada, kui see on teie asi. Pidage meeles, et lisage see pärast selgroogu. Selgroog võimaldab meie rakenduse osi abstraktselt muuta, muutes need nii modulaarseks, et neid hõlpsasti taaskasutada, kui ka teistele paremini loetavaks. Selle abstraktsiooni parimaks illustreerimiseks selgitasime FlickrBombi kujundust alt üles, alustades mudelitest ja lõpetades vaadetega.
Meie esimene mudel
Esimene ülesanne, millega tegelema hakkasime, on fotode tõmbamine Flickrist. Selgroo FlickrImage'i modelleerimine on piisavalt lihtne, loome uue mudeli nimega FlickrImage ja lisame mõned meetodid, mis aitavad meil saada erineva suurusega pöidlaid.
var FlickrImage = Selgroog.Mudeli.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 pikimal külgkorral 'suur ': size_code =' _b '; break; // 1024 pikimal küljel vaikimisi: size_code =' ';} return "http: // farm" + this.get (' farm ') + ".static.flickr.com / "+ this.get ('server') +" / "+ this.get ('id') +" _ "+ this.get ('saladus') + size_code +" .webp ";}})
Selgroogis olevad mudelid on objektid, mida saab püsida ja nendega on seotud mõned funktsioonid, sarnaselt teiste MVC raamistike mudelitega. Selgroogmudelite maagiline osa on see, et saame sündmused seostada atribuutidega, nii et kui see atribuut muutub, saame oma vaateid seda kajastada. Kuid oleme endast veidi ees.
Flickrist fotosid tõmmates saame piisavalt teavet, et luua URL-id kõigi suuruste jaoks. Kuid see assamblee on jäetud meie enda teha, nii et juurutasime funktsiooni .image_url (), mis võtab suuruse parameetri ja tagastab avaliku lingi. Kuna tegemist on selgroomudeliga, saame mudeli atribuutidele juurde pääseda selle.get () abil. Nii et selle mudeli abil saame Flickri pildi URL-i saamiseks mujal koodis teha järgmist.
flickrImage.image_url (’suur’)
Päris kokkuvõtlikult, jah? Kuna see mudel on meie rakendusele omane, lisame täismõõtude ja pöidla kujutiste suuruste jaoks mõned ümbrisefunktsioonid.
Piltide kogu
FlickrBomb tegeleb piltide, mitte üksikute piltide kogumikega ja selle modelleerimiseks on selgrool mugav moodus. Sobiva nimega kollektsioon on see, mida kasutame Flickri piltide rühmitamiseks ühe kohahoidja jaoks.
var FlickrImages = Backbone.Collection.extend ({mudel: FlickrImage, võti: flickrbombAPIkey, leht: 1, fetch: funktsioon (märksõnad, edu) {var self = this; edu = edu || $ .noop; this.keywords = märksõnad || this.keywords; $ .ajax ({url: 'http://api.flickr.com/services/rest/', data: {api_key: self.key, format: 'json', method: 'flickr. photos.search ', sildid: this.keywords, per_page: 9, page: this.page, litsents: flickrbombLicenseTypes}, dataType:' jsonp ', jsonp:' jsoncallback ', edu: function (vastus) {self.add (vastus .photos.photo); edu ();}});}, järgmine leht: funktsioon (tagasihelistamine) {see.leht + = 1; see.remove (see.mudelid); see.tõmmata (null, tagasihelistamine);}, prevPage: function (tagasihelistamine) {if (this.page> 1) {this.page - = 1;} this.remove (this.models); this.fetch (null, callback);}});
Siinkohal tuleb märkida paar asja. Kõigepealt mudel atribuut ütleb kollektsioonidele, mis tüüpi mudelit see kogub. Meil on ka mõned atribuudid, mille initsialiseerisime hiljem kasutamiseks: võti on meie Flickr API võti, soovite asendada flickrbombAPIkey oma Flickr API võtme stringiga. Flickri API-võtme hankimine on tasuta ja lihtne, järgige lihtsalt seda linki: www.flickr.com/services/api/misc.api_keys.html. Lehe atribuut on praegune Flickri fotode leht.
Suur meetod on siin .fetch (), mis võtab Flickri API-st fotode tõmbamise üksikasjad. Valdkondadevaheliste taotlustega seotud probleemide vältimiseks kasutame JSONP-i, mida toetavad nii Flickri API kui ka jQuery. Muud parameetrid, mille API-le edastame, peaksid olema iseenesestmõistetavad. Erilist huvi pakuvad siin selgroogfunktsioonid. Edukaks tagasihelistamiseks kasutame funktsiooni .add (), mis võtab massiivi mudeli atribuute, loob nendest atribuutidest mudeli eksemplarid ja lisab need seejärel kogu.
Funktsioonid .nextPage () ja .prevPage () muudavad kõigepealt kuvatavat lehte,
kõigi olemasolevate mudelite eemaldamiseks seadmest kasutage kogumisfunktsiooni .remove ()
kogu ja helistage siis, et saada praeguse lehe fotod (et me lihtsalt
muudetud).
FlickrBombImage
Tagasi üles liikudes vajame veel ühte mudelit, mis esindaks kohahoidja pilti, mis koosneb FlickrImages'i kogust ja praegusest valitud FlickrImage'ist. Nimetame seda mudelit FlickrBombImage'iks.
var localStorage = (toetab_local_storage ())? uus pood ("flickrBombImages"): null; var FlickrBombImage = selgroog.Model.extend ({localStorage: localStorage, initsialiseerimine: function () {_.bindAll (this, 'loadFirstImage'); this.flickrImages = new FlickrImages (); this.flickrImages.fetch (this.get ('märksõnad'), 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. esimene (). image_url ()});}}});
Kuna see mudel vastutab praegu valitud pildi jälgimise eest lehelaadimiste vahel, peab ta teadma, millist kohalikku poodi poodi kasutada.Esimene rida tagab, et kohalik ladustamine on toetatud, ja seejärel looge pood, mida kasutame valitud pildi püsimiseks.
Selgroog võimaldab meil määratleda .initialize () funktsiooni, mida kutsutakse mudeli eksemplari loomisel. Me kasutame seda funktsiooni FlickrBombImage'is kogu FlickrImages kollektsiooni uue eksemplari loomiseks, selle pildi jaoks kasutatavate märksõnade edastamiseks ja seejärel piltide toomiseks Flickrist.
Funktsioon .loadFirstImage () on tagasihelistusena edastatud, et käivitada, kui pildid on Flickrist laaditud. Nagu arvata võib, seab see funktsioon praeguse pildi esimeseks Flickri kollektsiooni. Seda ei tehta, kui praegune pilt on juba seatud.
Kui selle mudeli atribuut muutub, kasutame funktsiooni .changeSrc () käivitamiseks ka selgroo atribuudi tagasihelistamist. Kõik see tagasihelistamine on kutsumine .save (), selgroogmudeli funktsioon, mis säilitab mudeli atribuudid igale rakendatud poekihile (meie puhul localstore). Nii, kui valitud pilti muudetakse, jääb see kohe püsima.
Vaate kiht
Nüüd, kui kõik taustaprogrammi (noh, esiosa taustaprogrammi) kood on kirjutatud, saame vaated kokku panna. Selgroogvaated on veidi erinevad kui muude traditsiooniliste MVC-raamistike vaated. Kui vaade puudutab tavaliselt ainult ennast esitlusega, siis selgroovaade vastutab ka käitumise eest. See tähendab, et teie vaade ei määratle mitte ainult seda, kuidas midagi välja näeb, vaid ka seda, mida ta peaks suhtlemisel tegema.
Vaade on tavaliselt (kuid mitte alati) seotud mõne teabega ja läbib kolm etappi, et nendest andmetest esitluse märgistus genereerida:
1. Vaateobjekt lähtestatakse ja luuakse tühi element.
2. Esitatakse renderdamisfunktsioon, genereerides vaate jaoks märgistuse, lisades selle eelmises etapis loodud elemendi.
3. Element on kinnitatud DOM-i.
See võib tunduda palju tööd märgistuse loomiseks ja me ei ole veel vaate käitumise osas, kuid see on oluline ja siin on põhjus. Iga kord, kui muudate DOM-is olevaid elemente, käivitate brauseri tagasipöördumise nime. Tagasivaade on brauser, kes arvutab ümber, kuidas kõik lehel olevad asjad paigutatakse. Brauseri tagasivool võib toimimisele halvasti mõjuda, kui seda kutsutakse lohistamis- või suuruse muutmise sündmuses, mis käivitub väga lühikese intervalliga, kuid mis veelgi hullem, need näivad lohakad. Kompleksse lehe manipuleerimise abil näete tegelikult lehele lisatavaid elemente ja teostatud elementide ümberpaigutamist. Järgides selgroo initsialiseerimise, renderdamise ja manustamise mustrit, garanteerite ühe tagasivoolu ja lehe muudatused toimuvad tajuvalt koheselt, olenemata elementide manipuleerimise keerukusest.
FlickrBombImageView
var FlickrBombImageView = Selgroog.View.extend ({tagName: "div", klassiNimi: "flickrbombContainer", lukk: false, mall: _.template ('div id = "% = this.image.id.replace (" ", "")%> "... / div> '), initsialiseeri: funktsioon (suvandid) {_.bindAll (see,' addImage ',' updateSrc ',' setDimentions ',' updateDimentions '); var keywords = options. img.attr ('src') .replace ('flickr: //', ''); see. $ el = $ (this.el); this.image = new FlickrBombImage ({märksõnad: märksõnad, id: valikud. img.attr ('id')}); this.image.flickrImages.bind ('add', this.addImage); this.image.bind ('change: src', this.updateSrc);}, sündmused: { "click .setupIcon": "clickSetup", "click .flickrbombFlyout a.photo": "selectImage", "click .flickrbombFlyout a.next": "nextFlickrPhotos", "click .flickrbombFlyout a.prev": "prevFlickrPhotos"}, render: function () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); tagastage see;}, ...});
Selle vaate funktsioonid on lühiduse huvides välja jäetud, lähtekood on tervikuna saadaval aadressil GitHub: github.com/zurb/flickrbomb
Vaate ülaosas on meil paar selgroo spetsiifilist atribuuti. TagName ja className kasutatakse selle vaate elemendile rakendatava sildi ja klassi määratlemiseks. Pidage meeles, et vaate loomise esimene samm on objekti loomine ja kuna selle loomisega tegeleb selgroog, peame määrama elemendi ja klassi. Pange tähele, et selgrool on mõistlikud vaikeväärtused; kui need atribuudid välja jätta, kasutatakse vaikimisi div ja klassi ei rakendata, kui te selle pole määranud.
Malli atribuut on kokkulepe, kuid pole vajalik. Kasutame seda siin JavaScripti malli funktsiooni täpsustamiseks, mida kasutame selle vaate märgistuse loomiseks. Me kasutame jaotises Underscore.js sisalduvat funktsiooni _.template (), kuid võite kasutada seda, millist mallimootorit soovite, me ei hinda teid.
Funktsioonis .initialize () tõmmatakse pildimärgendilt märksõnade string välja ja seejärel luuakse nende märksõnade abil mudel FlickrBombImage. Samuti seome funktsiooni .addImage () käitamiseks, kui FlickrImage kogusse lisatakse FlickrImage. See funktsioon lisab äsja lisatud FlickrImage'i meie pildivalija lendlehele. Viimane ja kõige olulisem rida seob funktsiooni .updateSrc () käivitamiseks, kui parajasti valitud FlickrImage'i muudetakse. Kui praegust pilti mudelis muudetakse, töötab see funktsioon, värskendatakse pildielemendi atribuuti src ning CSS suurendab ja kärpib pilti, et see sobiks kasutaja määratud pildimõõtmetega.
sündmused: {"click .setupIcon": "clickSetup", "click .flickrbombFlyout a.photo": "selectImage", "click .flickrbombFlyout a.next": "nextFlickrPhotos", "click .flickrbombFlyout a.prev": "prevFlickrPhotos "}
Pärast .initialize () on meil vaate käitumisosa. Selgroog on mugav viis sündmuste sidumiseks sündmuste objekti abil. Sündmuste objekt kasutab elemendi View tegeliku sidumise tegemiseks meetodit jQuery .delegate (), nii et vaatamata sellele, millist manipuleerimist vaate sees oleva elemendiga teete, toimivad kõik teie seotud sündmused ikkagi. See töötab täpselt nagu jQuery .live (), välja arvatud see, et sündmuste kogu dokumendile sidumise asemel võite need siduda mis tahes elemendi ulatuses. Iga sündmuse objekti kirje võti koosneb sündmusest ja valijast, väärtus näitab funktsiooni, mis peaks olema selle sündmusega seotud. Pange tähele, et .delegate () ei tööta mõne sündmusega, näiteks esitusega. Toetatud sündmuste täieliku loendi leiate jQuery .live () dokumentatsioonist.
render: function () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); tagastage see;}
Lõpuks on meil funktsioon .render (), mis vastutab meie märgistuse loomise ja täiendava töö tegemise eest, mida ei saa teha enne, kui vaate märgistus on elemendile Vaade lisatud. Pärast malli renderdamist peame oma FlickrBombImage'il kutsuma .fetch (). .fetch () on selgroogfunktsioon, mis saab mudeli uusima koopia püsimiskihilt. Kui me oleksime selle mudeli varem salvestanud, tooks .fetch () need andmed nüüd alla. Pärast pildi toomist peame selle õigeks positsioneerimiseks helistama suurusele.
Kodu venitus
Kui kõik tükid on paigas, peame nüüd vaid leidma lehelt kohatäidepildid ja asendama need renderdatud FlickrBombImage vaadetega.
$ ("img [src ^ = 'flickr: //']") .each (function () {var img = $ (this), flickrBombImageView = new FlickrBombImageView ({img: img}); img.replaceWith (flickrBombImageView). renderdamine (). el);});
See väike jupp tuleb käivitada lehe allosas või dokumendis valmis tagasihelistamises, et see leiaks asendatavate kohahoidjakujutised. Kasutame pildimärgendi src atribuudis flickr: // [KEYWORD] määramise konventsiooni, et näidata, et see peaks olema täidetud Flickri piltidega. Leiame sobiva src atribuudiga pildielemendid, loome uue FlickrBombImageView ja asendame seejärel pildi meie omaga. Haarame originaalpildi koopia ja edastame selle meie FlickrBombView'le, et saaksime tõmmata täiendavaid seadistusvõimalusi, mis võivad olla elemendil täpsustatud.
Kogu selle raske töö lõpptulemus on raamatukogu kasutavate inimeste jaoks väga lihtne API. Nad saavad lihtsalt määratleda pildimärgendid, kasutades flickr: // -konventsiooni, kukutades FlickrBombi koodi oma lehe lõppu ja bam, nad on saanud Flickrist kohahoidjakujutised.
Toimib suurepäraselt ka suurte veebirakendustega
Meil on suur veebirakendus nimega Märkimisväärne, mis kirjutati muret sisu kliendipoolse genereerimise pärast. Kui tahtsime sisukliendi poole genereerimise abil rakendada rakenduse jaotisi turbolaadimisega, valisime selgroo. Põhjused olid samad: me tahtsime kerget raamistikku, mis aitaks hoida koodi korrastatuna, kuid ei sundinud meid kogu rakendust ümber mõtlema.
Käivitasime muudatused selle aasta alguses väga edukalt ja oleme sellest ajast alates laulnud selgrooge.
Lisaressursid
Selgroogul on palju muud kui see, mida ma selles artiklis käsitlesin, MVC (mudelivaate kontroller) C-osa (kontroller) algajatele, mis on tegelikult uusim versioon R (ruuter). Ja see kõik on kaetud selgroo dokumentatsiooniga, kerge laupäeva hommikune kiri:
documentcloud.github.com/backbone/
Kui teie jaoks on traditsioonilisemad õpetused, siis vaadake selle Todo rakenduse väga hästi dokumenteeritud koodi, mis on kirjutatud selgrooga:
documentcloud.github.com/backbone/docs/todos.html
