Sisältö
- Aloitetaan sitten
- Ensimmäinen mallimme
- Kokoelma kuvia
- FlickrBombImage
- Näkymäkerros
- FlickrBombImageView
- Koti venyttää
- Toimii hyvin myös suurten web-sovellusten kanssa
- Lisäresurssit
Jos aiot rakentaa nopeasti pienen JavaScript-työkalun, et todennäköisesti ajattele kehyksen käyttöä. JQuery-koodin hakkerointi on helpompaa kuin asentaa ja oppia uusi kehys, eikö? Väärä, Backbone.js on erittäin kevyt liimakehys, joka näyttää aivan kuin tavallinen vanha JavaScript, jota olet tottunut kirjoittamaan.
Teemme paljon staattisia prototyyppejä täällä ZURB: ssä, koska haluamme pystyä napsauttamaan sivuja läpi kirjoittamatta mitään taustakoodia. Usein pudotimme harmaita harmaita paikkamerkkejä tai joskus etsimme Flickristä näytekuvia auttaaksemme meitä visualisoimaan, mitä lopullinen luonnos saattaa mennä. Siihen asti yksi maaginen perjantai, jolloin päätimme, että olisi mahtavaa kirjoittaa JavaScripti ongelmien ratkaisemiseksi. Halusimme pystyä etsimään ja valitsemaan valokuvia Flickristä suoraan paikkamerkkien kuvista. Kutsumme sitä FlickrBombiksi, ja tämä on tarina siitä, kuinka rakensimme sen Backbone.js: n avulla.
On erittäin suositeltavaa, että katsot nopeasti FlickrBombia ennen lukemista. Se on yksi niistä "napsautuksen arvoinen tuhat sanaa" -tyyppisistä tarjouksista. Odota, odotamme.
Lohkossa on nykyään paljon JavaScript-kehyksiä, SproutCore, JavaScriptMVC, Spine, Sammy, Knockout. Mutta pidimme Backbone.js: stä tässä projektissa muutamista eri syistä:
1. Se on kevyt (itse asiassa 100% rasvaton)
- painossa, ja viimeisin pakattu versio on noin 4,6 kt
- koodissa, joka on hieman yli 1000 koodiriviä, ei ole kovin vaikeaa seurata pinon jälkeä sisäosiin menettämättä mieltäsi
2. Se näyttää JavaScriptiltä
- koska se on JavaScript, siinä kaikki ja kaikki
- se käyttää jQueryä, jonka isoäitisi tietää nykyään
3. Erittäin yksinkertainen pysyvyys
- laatikosta se säilyttää tiedot taustalla (REST: n kautta), mutta pudottamalla yhden laajennuksen se säästää paikalliseen tallennustilaan
- koska se tiivistää pysyvyyden sovellusliittymän, voimme saada sen jatkumaan REST-taustajärjestelmään poistamalla vain paikallisen tallennuslaajennuksen
Aloitetaan sitten
Koska Backbone.js on vain JavaScripti, meidän on vain lisättävä se sivulle Underscore.js: n kanssa. jQuery ei itsessään ole kova riippuvuus selkärangasta, mutta aiomme käyttää sitä, joten sisällytämme sen tähän. Yhdistämme myös paikallisen tallennuslaajennuksen, koska emme halua vaivaa taustapalvelun määrittämisessä. Huomaa, että tiedostot linkitettiin suoraan yksinkertaisuuden vuoksi, mutta sinun tulisi aina isännöidä omia resurssejasi tuotannossa.
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 "> / skripti>
Kaikki seuraava artikkeli tässä artikkelissa on omaa sovellustamme, joten voimme sisällyttää sen app.js-tiedostoon tai vain inline, jos se on sinun juttusi. Muista vain sisällyttää se selkärangan jälkeen. Selkäranka mahdollistaa abstraktin osan sovelluksestamme, jolloin niistä tulee modulaarisia, jotta ne voidaan helposti käyttää uudelleen, ja helpommin luettavia muille. Tämän abstraktion parhaiten havainnollistamiseksi selitimme FlickrBombin suunnittelun alhaalta ylöspäin alkaen malleista ja päättyen näkymiin.
Ensimmäinen mallimme
Ensimmäinen tehtävä, jonka käsittelemme, on kuvien vetäminen Flickristä. FlickrImagen mallintaminen rungossa on tarpeeksi yksinkertaista, luomme uuden mallin nimeltä FlickrImage ja lisäämme joitain menetelmiä, joiden avulla voimme saada erikokoisia peukaloja.
var FlickrImage = Selkäranka.Malli.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 pisin sivukotelo 'iso ': size_code =' _b '; break; // 1024 pisin sivun oletusarvo: size_code =' ';} return "http: // farm" + this.get (' farm ') + ".static.flickr.com / "+ this.get ('palvelin') +" / "+ this.get ('id') +" _ "+ this.get ('salainen') + size_code +" .webp ";}})
Selkärangan mallit ovat objekteja, joita voidaan jatkaa, ja niihin liittyy joitain toimintoja, aivan kuten muiden MVC-kehysten mallit. Selkäranka-mallien maaginen osa on se, että voimme sitoa tapahtumat attribuutteihin, jotta kun tämä ominaisuus muuttuu, voimme päivittää näkemyksemme vastaamaan sitä. Mutta olemme hieman edessämme.
Kun otamme valokuvia Flickristä, saamme tarpeeksi tietoa kaikkien URL-osoitteiden URL-osoitteiden luomiseksi. Kokoonpano on kuitenkin jätetty meille, joten toteutimme .image_url () -funktion, joka ottaa koon parametrin ja palauttaa julkisen linkin. Koska tämä on runkomalli, voimme käyttää tätä.get () käyttää mallin määritteitä. Joten tällä mallilla voimme tehdä seuraavaa muualla koodissa saadaksemme Flickr-kuvan URL-osoitteen.
flickrImage.image_url (’suuri’)
Melko ytimekäs, eikö? Koska tämä malli on omaa sovellustamme varten, lisäämme joitain käärefunktioita täysikokoisille ja peukalokuvien kooille.
Kokoelma kuvia
FlickrBomb käsittelee kuvakokoelmia, ei yksittäisiä kuvia, ja selkärangalla on kätevä tapa mallintaa tämä. Oikein nimetty kokoelma on se, jolla ryhmittelemme Flickr-kuvat yhteen paikkamerkkiin.
var FlickrImages = Backbone.Collection.extend ({malli: FlickrImage, avain: flickrbombAPIkey, sivu: 1, nouto: funktio (avainsanat, menestys) {var self = this; menestys = menestys || $ .noop; this.keywords = avainsanat || this.keywords; $ .ajax ({url: 'http://api.flickr.com/services/rest/', data: {api_key: self.key, format: 'json', method: 'flickr. photos.search ', tunnisteet: this.keywords, per_page: 9, page: this.page, license: flickrbombLicenseTypes}, dataType:' jsonp ', jsonp:' jsoncallback ', menestys: function (vastaus) {self.add (vastaus .photos.photo); menestys ();}});}, 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.malles); this.fetch (null, callback);}});
Tässä on muutama huomioitava asia. Ensinnäkin malli- attribute kertoo kokoelmille, minkä tyyppistä mallia se kerää. Meillä on myös joitain määritteitä, jotka aloitimme myöhempää käyttöä varten: avain on Flickr-sovellusliittymäavain, sinun kannattaa korvata flickrbombAPIkey oman Flickr-sovellusavaimesi merkkijonolla. Flickr-sovellusliittymäavaimen saaminen on ilmaista ja helppoa, seuraa vain tätä linkkiä: www.flickr.com/services/api/misc.api_keys.html. Sivumääritelmä on Flickr-valokuvien nykyinen sivu.
Suuri menetelmä tässä on .fetch (), joka tiivistää valokuvien vetämisen yksityiskohdat Flickr-sovellusliittymästä. Verkkotunnusten välisten pyyntöjen välttämiseksi käytämme JSONP: ää, jota sekä Flickr-sovellusliittymä että jQuery tukevat. Muiden parametrien, jotka välitämme API: lle, pitäisi olla itsestään selviä. Erityistä mielenkiintoa ovat tässä kutsutut selkärankafunktiot. Menestyskutsussa käytämme .add () -funktiota, joka ottaa joukon mallimääritteitä, luo malliesimerkkejä näistä attribuuteista ja lisää ne sitten kokoelmaan.
Toiminnot .nextPage () ja .prevPage () muuttavat ensin sivua, jonka haluamme näyttää,
käytä keräystoimintoa .remove () poistaaksesi kaikki olemassa olevat mallit
kokoelma ja soita sitten nouto saadaksesi valokuvat nykyiselle sivulle (että me vain
muutettu).
FlickrBombImage
Palataksemme ylöspäin tarvitsemme vielä yhden mallin edustamaan paikkamerkki kuvaa, joka koostuu kokoelmasta FlickrImages ja nykyinen FlickrImage, joka on valittu. Tätä mallia kutsutaan FlickrBombImageksi.
var localStorage = (tukee_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. ensin (). image_url ()});}}});
Koska tämä malli on vastuussa valitun kuvan seurannasta sivulatausten välillä, sen on tiedettävä mitä paikallista varastokauppaa käytetään.Ensimmäinen rivi varmistaa, että localstorage tukee, ja luo sitten myymälä, jota käytämme valitun kuvan säilyttämiseen.
Rungon avulla voimme määritellä .initialize () -funktion, jota kutsutaan, kun mallin ilmentymä luodaan. Käytämme tätä toimintoa FlickrBombImage -sovelluksessa luodaksemme uuden esiintymän FlickrImages-kokoelmasta, siirtäessäsi avainsanoja, joita käytetään tässä kuvassa, ja noutaa kuvat sitten Flickristä.
.LoadFirstImage () -toiminto on lähetetty soittopyynnönä, joka suoritetaan, kun kuvat on ladattu Flickristä. Kuten luultavasti arvata voi, tämä toiminto asettaa nykyisen kuvan Flickrin kokoelman ensimmäiseksi. Se ei tee tätä, jos nykyinen kuva on jo asetettu.
Aiomme myös käyttää Backbone-attribuutin takaisinsoittoja .changeSrc () -funktion käynnistämiseen, kun tämän mallin src-attribuutti muuttuu. Kaikki tämä soittopyyntö on kutsua .save (), selkäranka-mallitoiminto, joka säilyttää mallin attribuutit mihin tahansa myymäläkerrokseen on toteutettu (meidän tapauksessamme localstore). Näin aina, kun valittua kuvaa muutetaan, se pysyy välittömästi voimassa.
Näkymäkerros
Nyt kun kaikki taustakoodi (hyvin, käyttöliittymän taustakuva) on kirjoitettu, voimme koota Näkymät. Selkärangan näkymät ovat hieman erilaiset kuin muissa perinteisissä MVC-kehyksissä. Vaikka näkymä koskee yleensä itseään vain esityksellä, selkäranka-näkymä vastaa myös käyttäytymisestä. Tämä tarkoittaa sitä, että näkymäsi ei vain määritä miltä jotain näyttää, vaan myös sen, mitä sen pitäisi tehdä, kun se on vuorovaikutuksessa.
Näkymä on yleisesti (mutta ei aina) sidottu joihinkin tietoihin, ja se käy läpi kolme vaihetta tuottaakseen esityksen merkinnät kyseisistä tiedoista:
1. Näkymä-objekti alustetaan ja luodaan tyhjä elementti.
2. Renderöintitoiminto kutsutaan luomalla näkymän merkintä lisäämällä se edellisessä vaiheessa luotuun elementtiin.
3. Elementti on kiinnitetty DOM: iin.
Tämä saattaa tuntua paljon työtä jonkin verran merkintöjen luomista varten, emmekä ole vielä edes Näkymän käyttäytymisosassa, mutta se on tärkeää, ja tästä syystä. Aina kun muokkaat DOM: ssä olevia elementtejä, käynnistät jotain, jota kutsutaan selaimen reflowiksi. Palautus on selain, joka laskee uudelleen, kuinka kaikki sivun asiat sijoitetaan. Selaimen uudelleensuuntaus voi olla huono suorituskyvylle, jos sitä kutsutaan vedä tai kokoa -tapahtumassa, joka laukaisee hyvin lyhyellä aikavälillä, mutta mikä pahempaa, ne näyttävät huolimattomilta. Monimutkaisella sivunkäsittelyllä näet itse asiassa, että elementit lisätään sivulle ja että elementit sijoittuvat uudelleen. Selkärangan alustuksen, hahmonnuksen ja kiinnityksen mallin mukaan taataan yksi uudelleenvirtaus, ja sivulle tehdyt muutokset ovat havaitsevasti välittömiä riippumatta elementtien käsittelyn monimutkaisuudesta.
FlickrBombImageView
var FlickrBombImageView = Selkäranka.View.extend ({tagName: "div", luokanNimi: "flickrbombContainer", lukko: false, malli: _.template ('div id = "% = this.image.id.replace (" ", "")%> "... / div> '), alusta: toiminto (vaihtoehdot) {_.bindAll (tämä,' addImage ',' updateSrc ',' setDimentions ',' updateDimentions '); var avainsanat = vaihtoehdot. img.attr ('src') .replace ('flickr: //', ''); tämä. $ el = $ (this.el); this.image = new FlickrBombImage ({avainsanat: avainsanat, id: vaihtoehdot. img.attr ('id')}); this.image.flickrImages.bind ('add', this.addImage); this.image.bind ('change: src', this.updateSrc);}, tapahtumat: { "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 (); palauta tämä;}, ...});
Tämän näkymän toiminnot on jätetty pois lyhyyden vuoksi, lähdekoodi kokonaisuudessaan on saatavilla GitHubissa: github.com/zurb/flickrbomb
Näkymän yläosassa meillä on pari selkärangakohtaista määritettä. tagName ja className käytetään määrittämään tagi ja luokka, jota käytetään tämän näkymän elementtiin. Muista, että näkymän luomisen ensimmäinen vaihe on objektin luominen, ja koska selkäranka käsittelee tätä luomista, meidän on määritettävä elementti ja luokka. Huomaa, että selkärangalla on järkeviä oletusasetuksia; jos jätämme nämä määritteet pois, oletusarvoisesti käytetään div: ää, eikä luokkaa käytetä, ellet määritä sitä.
Mallin määrite on käytäntö, mutta sitä ei vaadita. Käytämme sitä tässä määritelläksesi JavaScript-mallitoiminnon, jota käytämme tuottaessamme merkinnät tähän näkymään. Käytämme _.template () -toimintoa, joka sisältyy Underscore.js-tiedostoon, mutta voit käyttää mitä tahansa haluamaasi mallimoottoria, emme tuomitse sinua.
.Initialize () -funktiossamme vedämme avainsanojen merkkijonon kuvatunnisteesta ja luomme sitten FlickrBombImage-mallin käyttämällä näitä avainsanoja. Sitomme myös .addImage () -toiminnon suoritettavaksi, kun FlickrImage lisätään FlickrImages-kokoelmaan. Tämä toiminto lisää äskettäin lisätyn FlickrImagen kuvavalitsimen lentoon. Viimeinen ja tärkein rivi sitoo .updateSrc () -funktion käynnistymään, kun valittua FlickrImage-ohjelmaa muutetaan. Kun nykyistä kuvaa muutetaan mallissa, tämä toiminto toimii, päivittää kuvaelementin src-attribuutin ja CSS muuttaa kokoa ja rajaa kuvan sopivaksi käyttäjän määrittelemiin kuvamittoihin.
tapahtumat: {"click .setupIcon": "clickSetup", "click .flickrbombFlyout a.photo": "selectImage", "click .flickrbombFlyout a.next": "nextFlickrPhotos", "click .flickrbombFlyout a.prev": "prevFlickrPhotos "}
.Initialize (): n jälkeen meillä on näkymän käyttäytymisosa. Runko tarjoaa kätevän tavan sitoa tapahtumia tapahtumaobjektin avulla. Tapahtuma-objekti käyttää jQuery .delegate () -menetelmää varsinaisen sitomisen View-elementtiin, jotta riippumatta siitä, mitä manipulointia teet näkymän sisällä olevaan elementtiin, kaikki sidotut tapahtumasi toimivat edelleen. Se toimii aivan kuten jQuery .live (), paitsi että voit sitoa tapahtumia koko asiakirjaan sen sijaan, että ne sidottaisiin minkä tahansa elementin piiriin. Tapahtumaobjektin jokaisen merkinnän avain koostuu tapahtumasta ja valitsimesta, arvo osoittaa sen toiminnon, joka pitäisi olla sidottu kyseiseen tapahtumaan. Huomaa, että .delegate () ei toimi joidenkin tapahtumien kuten lähetyksen kanssa. Katso tuettujen tapahtumien täydellinen luettelo jQuery .live () -dokumentaatiosta.
render: function () {$ (this.el) .html (this.template ()); this.image.fetch (); tämä.koko (); palauta tämä;}
Viimeiseksi meillä on .render () -toiminto, joka on vastuussa merkintöjen luomisesta ja ylimääräisten töiden suorittamisesta, joita ei voida suorittaa, ennen kuin View-merkinnät on lisätty View-elementtiin. Kun olemme renderöineet mallin, meidän on kutsuttava .fetch () FlickrBombImage-sivullemme. .fetch () on selkärankafunktio, joka saa mallin uusimman kopion pysyvyyskerrokselta. Jos olisimme tallentaneet tämän mallin aiemmin, .fetch () noutaisi nämä tiedot nyt. Kun kuva on haettu, meidän on kutsuttava kokoa, jotta se voidaan sijoittaa oikein.
Koti venyttää
Kun kaikki kappaleet ovat paikoillaan, meidän on vain löydettävä sivun paikkamerkkikuvat ja korvattava ne renderoiduilla FlickrBombImage-näkymillä.
$ ("img [src ^ = 'flickr: //']") .each (function () {var img = $ (this), flickrBombImageView = uusi FlickrBombImageView ({img: img}); img.replaceWith (flickrBombImageView). renderöinti (). el);});
Tämä pieni katkelma on suoritettava sivun alaosassa tai asiakirjavalmiissa soittopyynnöissä sen varmistamiseksi, että se löytää korvattavat paikkamerkkikuvat. Käytämme tapaa määritellä flickr: // [KEYWORD] kuvatunnisteen src-attribuutissa osoittamaan, että se tulisi täyttää Flickr-kuvilla. Löydämme kuvaelementit, joissa on vastaava src-määritte, luodaan uusi FlickrBombImageView ja korvataan sitten kuva omalla. Otamme kopion alkuperäisestä kuvasta ja välitämme sen FlickrBombView-sivustollemme, jotta voimme vetää joitain lisäominaisuuksia, jotka on mahdollisesti määritetty elementille.
Kaiken kovan työn lopputulos on hyvin yksinkertainen sovellusliittymä kirjastoa käyttäville ihmisille. He voivat yksinkertaisesti määrittää kuvatunnisteet flickr: //-käytännön avulla, pudottaa FlickrBomb-koodin sivunsa alaosaan ja bam, heillä on paikkamerkkikuvia Flickristä.
Toimii hyvin myös suurten web-sovellusten kanssa
Meillä on iso web-sovellus nimeltä Notable, joka kirjoitettiin huolimatta sisällön asiakaspuolen luomisesta. Kun halusimme tehdä sovelluksen osista turboahtavia luomalla sisältöasiakaspuolta, valitsimme selkärangan. Syyt olivat samat: halusimme kevyen kehyksen pitämään koodin järjestyksessä, mutta emme pakottaneet meitä ajattelemaan koko sovellusta.
Aloitimme muutokset aiemmin tänä vuonna erittäin menestyksekkäästi ja olemme siitä lähtien laulaneet selkärangan kiitosta.
Lisäresurssit
Selkärangalle on paljon enemmän kuin mitä käsittelin tässä artikkelissa, aloittelijoille tarkoitettu MVC: n (mallinäkymäohjain) C (ohjain) -osa, joka on itse asiassa R (reititin) uusimmassa versiossa. Ja kaikki tämä kattaa selkäranka-asiakirjoissa, kevyt lauantaiaamu luki:
documentcloud.github.com/backbone/
Jos perinteisemmät opetusohjelmat ovat sinun juttusi, tutustu tämän todellisuuden hyvin dokumentoituun koodiin, joka on kirjoitettu selkärankaan:
documentcloud.github.com/backbone/docs/todos.html
