Inhalt
- Loosst eis dann ufänken
- Eisen éischte Modell
- Eng Sammlung vu Biller
- D'FlickrBombImage
- De View Layer
- De FlickrBombImageView
- D'Home Stretch
- Wierker super mat grousse ol Web Apps och
- Zousätzlech Ressourcen
Wann Dir sicht séier e klengt JavaScript-Tool ze bauen, denkt Dir wahrscheinlech net drun e Kader ze benotzen. Méi einfach e jQuery Code zesummen ze hacken anstatt en neie Kader z'installéieren an ze léieren, oder? Falsch, Backbone.js ass e super Liichtgewiicht Klebkader dee genau ausgesäit wéi den normale alen JavaScript deen Dir schreift.
Mir maachen vill statesch Prototypen hei bei ZURB, well mir gär kënnen duerch Säiten klickt ouni e Backend Code ze schreiwen. Dacks géife mir an grausame Plazhalerbiller falen, oder heiansdo géife mir Flickr no Probe-Biller siche fir eis ze hëllefen ze visualiséieren wat am leschte Projet kéint goen. Dat ass bis ee magesche Freideg, wéi mir décidéiert hunn et wier fantastesch JavaScript ze schreiwen fir eis Problemer ze léisen. Mir wollte fäeg sinn ze sichen a Fotoen op Flickr ze wielen, direkt vun de Plazhalerbiller selwer. Mir nennen et FlickrBomb, an dëst ass d'Geschicht wéi mir se mat Backbone.js gebaut hunn.
Et ass héich recommandéiert datt Dir séier op FlickrBomb kuckt ier Dir liest. Et ass ee vun deenen "e Klick ass dausend Wierder wäert" Aart vu Geschäfter. Gitt vir, mir waarden.
Et gi vill JavaScript Frameworks um Block dës Deeg, SproutCore, JavaScriptMVC, Spine, Sammy, Knockout. Awer mir hu Backbone.js fir dëse besonnesche Projet aus e puer verschiddene Grënn gär:
1. Et ass Liicht (100% Fett-Fräi Tatsächlech)
- am Gewiicht, mat der lescht verpackter Versioun ongeféier 4.6kb
- am Code, si just iwwer 1.000 Zeilen Code, et ass net schrecklech schwéier e Stack Spuer erof an d'intern ze verfollegen ouni Är Gedanken ze verléieren
2. Et gesäit aus wéi JavaScript
- well et JavaScript ass, dat ass et an dat ass alles
- et benotzt jQuery, wat och Är Groussmamm dës Deeg kennt
3. Super einfach Persistenz
- aus der Këscht bestinn et Daten zu engem Backend (iwwer REST), awer andeems en een eenzege Plug-in fällt, da spuert en op lokal Späichere statt
- well et d'Persistenz-API abstraht, kéinte mir et zu engem REST-Backend bestoe loossen andeems mir just de lokale Späicher-Plugin erofhuelen
Loosst eis dann ufänken
Well Backbone.js just JavaScript ass, brauche mir et nëmmen mat Underscore.js op der Säit opzehuelen. jQuery ass keng schwéier Ofhängegkeet fir Backbone per se, awer mir benotze se sou datt mir et hei ophuelen. Mir verbannen och de lokale Späicher-Plug-in, well mir net wëllen Ierger mat engem Backend opsetzen. Bedenkt datt d'Fichieren hei direkt fir Simplicitéit verbonne sinn, awer Dir sollt ëmmer Äert eegent Verméigen an der Produktioun hosten.
Skript src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"> / Skript> Skript 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>
All de folgende Code an dësem Artikel ass spezifesch fir eis Uwendung, also kënne mir en an eng app.js Datei abannen, oder just inline wann dat Är Saach ass. Denkt just drun et no Backbone opzehuelen. Backbone erméiglecht et Portioune vun eiser Uwendung abstrakt ze maachen, fir se allebéid modulär ze maachen fir einfach weiderbenotzung a méi liesbar fir anerer. Fir dës Abstraktioun am beschten ze illustréieren, giffen den Design vu FlickrBomb vun ënnen erop erklären, ugefaange mat de Modeller, a goung mat de Meenungen.
Eisen éischte Modell
Déi éischt Aufgab géing packen ass d'Fotoe vu Flickr ze zéien. Modeller vun enger FlickrImage am Backbone ass einfach genuch, mir kreéieren en neie Modell mam Numm FlickrImage, a fügen e puer Methoden derbäi fir eis ze hëllefen d'Gréisst Daumen ze kréien.
var FlickrImage = Backbone.Model.extend ({fullsize_url: function () {return this.image_url ('medium');}, thumb_url: function () {return this.image_url ('square');}, image_url: function ( Gréisst) {var size_code; wiesselen (Gréisst) {case 'square': size_code = '_s'; break; // 75x75 case 'medium': size_code = '_z'; break; // 640 op der längster Säit case 'large ': size_code =' _b '; break; // 1024 op der längster Säit Standard: size_code =' ';} zréck "http: // farm" + this.get (' farm ') + ".static.flickr.com / "+ this.get ('server') +" / "+ this.get ('id') +" _ "+ this.get ('secret') + size_code +" .webp ";}})
Modeller am Backbone sinn Objeten, déi kënne bestoe bleiwen, an e puer Funktiounen hunn, wéi Modeller an anere MVC Frameworks. De mageschen Deel vu Backbone Modeller ass datt mir Eventer un Attributer kënne bannen, sou datt wann dat Attribut ännert, mir eis Usiichte kënnen update fir dat ze reflektéieren. Awer mir kommen eis e bësse vir.
Wa mir d'Fotoe vu Flickr zéien, gi mir genuch Informatioune fir URLen fir all d'Gréissten ze kreéieren. Wéi och ëmmer, dës Versammlung ass eis iwwerlooss, dofir hu mir d'Funktioun .image_url () implementéiert déi e Gréissteparameter hëlt an en ëffentleche Link zréckbréngt. Well dëst e Backbone Modell ass, kënne mir this.get () benotze fir Attributer op de Modell ze kréien. Also mat dësem Modell kënne mir déi folgend anerwäerts am Code maachen fir d'URL vun engem Flickr Bild ze kréien.
flickrImage.image_url ('grouss')
Zimmlech präzis, oder? Well dëst Modell spezifesch fir eis Uwendung ass, wäerte mir e puer Wrapperfunktioune fir d'Gréisst- an Daumebildgréissten derbäifügen.
Eng Sammlung vu Biller
FlickrBomb beschäftegt sech mat Sammlunge vu Biller, net eenzel Biller, an de Backbone huet e praktesche Wee fir dëst ze modelléieren. Déi passend genannt Sammlung ass wat mir benotze fir Flickr Biller zesummen ze gruppéiere fir een eenzegen Plazhaler.
var FlickrImages = Backbone.Collection.extend ({model: FlickrImage, key: flickrbombAPIkey, page: 1, fetch: function (keywords, success) {var self = this; success = success || $ .noop; this.keywords = keywords || this.keywords; $ .ajax ({url: 'http://api.flickr.com/services/rest/', data: {api_key: self.key, format: 'json', method: 'flickr. photos.search ', Tags: this.keywords, per_page: 9, Säit: this.page, Lizenz: flickrbombLicenseTypes}, dataType:' jsonp ', jsonp:' jsoncallback ', Erfolleg: Funktioun (Äntwert) {self.add (Äntwert .photos.photo); Erfolleg ();}});}, nextPage: Funktioun (Réckruff) {this.page + = 1; this.remove (this.models); this.fetch (null, callback);}, prevPage: Funktioun (Réckruff) {wann (this.page> 1) {this.page - = 1;} this.remove (this.models); this.fetch (null, callback);}});
Et ginn e puer Saachen hei ze notéieren. Éischtens, den Modell Attribut erzielt de Sammlungen wéi ee Modell et sammelt. Mir hunn och e puer Attributer déi mir initialiséiert hunn fir spéider ze benotzen: Schlëssel ass eise Flickr API Schlëssel, Dir wëllt flickrbombAPIkey duerch de String vun Ärem eegene Flickr API Schlëssel ersetzen. E Flickr API Schlëssel kréien ass gratis an einfach, befollegt just dëse Link: www.flickr.com/services/api/misc.api_keys.html. D'Säitattribut ass déi aktuell Säit vu Flickr Fotoen op deene mir sinn.
Déi grouss Method hei ass .fetch (), déi d'Detailer abstrakt fir Fotoen aus der Flickr API ze zéien. Fir Probleemer mat Cross-Domain Ufroen ze vermeiden, benotze mir JSONP, déi souwuel d'Flickr API wéi och d'JQuery ënnerstëtzen. Déi aner Parameteren déi mir un d'API weiderginn solle selbsterklärend sinn. Besonnesch interessant sinn d'Backone Funktiounen déi hei geruff ginn. Am Erfolleg Réckruff benotze mir .add (), eng Funktioun déi eng Partie Modellattributer hëlt, Modellinstanzen aus dësen Attributer erstallt, an hinnen dann an d'Sammlung bäifügt.
D'Funktiounen .nextPage () an .prevPage () änneren als éischt d'Säit déi mir weisen,
benotzt d'Sammlungsfunktioun .remove (), fir all existent Modeller aus dem
Sammlung, a rufft dann sichen fir d'Fotoen fir déi aktuell Säit ze kréien (datt mir just
geännert).
D'FlickrBombImage
Wann mir eis zréck upaken, brauche mir e méi Modell fir de Plazhaler Bild duerzestellen, wat aus enger Sammlung vu FlickrImages besteet, an der aktueller FlickrImage déi gewielt gouf. Mir nennen dëse Modell de FlickrBombImage.
var localStorage = (supports_local_storage ())? neie Store ("flickrBombImages"): null; var FlickrBombImage = Backbone.Model.extend ({localStorage: localStorage, initialize: function () {_.bindAll (this, 'loadFirstImage'); this.flickrImages = new FlickrImages (); this.flickrImages.fetch (this.get ('Schlësselwierder'), this.loadFirstImage); this.set (id: this.get ("id")); this.bind ('änneren: src', this.changeSrc) ;}, changeSrc: Funktioun () {this.save ();}, loadFirstImage: Funktioun () {wann (this.get ('src') === ondefinéiert) {this.set ({src: this.flickrImages. éischt (). image_url ()});}}});
Well dëse Modell verantwortlech ass fir dat aktuell ausgewielt Bild tëscht de Säitenlaaschten ze verfollegen, muss et wëssen, wat localstorage Store benotzt.Déi éischt Zeil garantéiert datt et Ënnerstëtzung fir localstorage ass, an dann de Buttek erstallt dee mir benotze fir dat ausgewielt Bild ze bestoen.
Backbone erlaabt eis eng .initialize () Funktioun ze definéieren déi ugeruff gëtt wann eng Instanz vum Model erstallt gëtt. Mir benotzen dës Funktioun a FlickrBombImage fir eng nei Instanz vun der FlickrImages Kollektioun ze kreéieren, laanscht d'Schlësselwierder ze ginn déi fir dëst Bild benotzt ginn an dann d'Biller vu Flickr sichen.
D'Funktioun .loadFirstImage () ass als Réckruff weiderginn fir ze lafen wann d'Biller vu Flickr gelueden sinn. Wéi Dir wahrscheinlech ka roden, setzt dës Funktioun dat aktuellt Bild als dat éischt an der Sammlung vu Flickr. Et mécht dat net wann dat aktuellt Bild scho gesat gouf.
Mir benotzen och Backbone's Attribut Callbacks fir eis .changeSrc () Funktioun ze feieren wann de src Attribut vun dësem Modell ännert. All dës Callback mécht ass .save () ze ruffen, eng Backbone Modellfunktioun déi d'Attributer vum Modell bestoe bleift wéi eng Geschäftsschicht implementéiert gouf (an eisem Fall localstore). Dëse Wee, wann ëmmer dat gewielt Bild geännert gëtt, gëtt et direkt bestoe bliwwen.
De View Layer
Elo wou mir de ganzen Backend (gutt, Frontend Backend) Code geschriwwen hunn, kënne mir d'Vuesen zesummesetzen. Views am Backbone sinn e bëssen anescht wéi Meenungen an aneren traditionnelle MVC Frameworks. Wärend eng Vue normalerweis nëmme mat der Presentatioun betrëfft, ass e Backbone View och verantwortlech fir d'Verhalen. Dat heescht datt Är View net nëmmen definéiert wéi eppes ausgesäit, awer och wat et maache soll wann et interagéiert mat.
Eng Vue ass normalerweis (awer net ëmmer) un e puer Daten gebonnen, a geet duerch dräi Phasen fir d'Präsentatiounsmarkéierung aus dësen Daten ze generéieren:
1. De View Objet gëtt initialiséiert, an en eidel Element gëtt erstallt.
2. D'Renderfunktioun gëtt genannt, generéiert d'Markup fir d'Vue andeems se se an d'Element erstallt, dat am fréiere Schrëtt erstallt gouf.
3. D'Element ass mat der DOM verbonnen.
Dëst ka wéi vill Aarbecht schéngen fir e puer Markup ze generéieren, a mir sinn nach net emol zum Verhalensdeel vun der View, awer et ass wichteg, an hei ass firwat. All Kéier wann Dir Elementer ännert, déi an der DOM sinn, ausléist Dir eppes wat e Browser reflow genannt gëtt. E Reflow ass de Browser deen nei berechent wéi all Saach op der Säit positionéiert ass. Browser-Reflows kënne schlecht fir d'Performance sinn wann se an engem Drag oder Resize Event genannt ginn, dat a ganz kuerzen Intervall ausléist, awer nach méi schlëmm, se gesinn schlammeg aus. Mat komplexer Säit Manipulatioun kënnt Dir tatsächlech Elementer gesinn déi op d'Säit bäigesat ginn, an effektiv Elementer nei positionéiert ginn. Nom Backbone sengem Muster vun Initialiséierung, Render an Uschloss garantéiert Dir en eenzelt Reflow, an d'Ännerunge vun der Säit wäerte perceptiv direkt sinn, onofhängeg vun der Komplexitéit vun der Elementmanipulatioun.
De FlickrBombImageView
var FlickrBombImageView = Backbone.View.extend ({tagName: "div", className: "flickrbombContainer", lock: false, template: _.template ('div id = "% = this.image.id.replace (" ", "")%> "... / div> '), initialiséieren: Funktioun (Optiounen) {_.bindAll (dëst,' addImage ',' updateSrc ',' setDimentions ',' updateDimentions '); var Schlësselwierder = Optiounen. img.attr ('src'). Plaz ('flickr: //', ''); dëst. $ el = $ (this.el); this.image = nei FlickrBombImage ({Schlësselwieder: Schlësselwierder, Id: Optiounen. img.attr ('id')}); this.image.flickrImages.bind ('add', this.addImage); this.image.bind ('änneren: src', this.updateSrc);}, Eventer: { "klickt .setupIcon": "clickSetup", "klickt .flickrbombFlyout a.photo": "selectImage", "klickt .flickrbombFlyout a.next": "nextFlickrPhotos", "klickt .flickrbombFlyout a.prev": "prevFlickrPhotos"}, Render: Funktioun () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); return this;}, ...});
D'Funktioune vun dëser Vue sinn aus der Kuerzaarbecht ewechgelooss ginn, de Quellcode a senger ganzer ass verfügbar op GitHub: github.com/zurb/flickrbomb
Am Top vun der View hu mir e puer Backbone spezifesch Attributer. tagName a className ginn benotzt fir de Tag an d'Klass ze definéieren déi op dëst View Element applizéiert ginn. Denkt drun datt de Schrëtt 1 vun der View Kreatioun en Objet erstellt, a well dës Kreatioun vu Backbone behandelt gëtt, musse mir d'Element an d'Klass spezifizéieren. Bedenkt datt de Backbone sënnvoll Standardastellungen huet; wa mir dës Attributer ewechloossen, gëtt eng Div als Standard benotzt, a keng Klass gëtt ugewannt ausser Dir spezifizéiert eng.
D'Schablounattribut ass eng Konventioun, awer net erfuerderlech. Mir benotzen et hei fir d'Javascript Template Funktioun ze spezifizéieren déi mir benotze fir eis Markéierung fir dës Vue ze generéieren. Mir benotzen d'Funktioun _.template (), déi an der Underscore.js abegraff sinn, awer Dir kënnt déi jee Schablounemotor benotzen, déi Dir léiwer hutt, mir riichte Iech net.
An eiser .initialize () Funktioun zéien mir d'Schlësselwierder String aus dem Image Tag eraus, a schafen dann e FlickrBombImage Modell mat dëse Schlësselwieder. Mir verbinden och d'Funktioun .addImage () fir ze lafen wann e FlickrImage zu der FlickrImages Sammlung bäigefüügt gëtt. Dës Funktioun füügt déi nei bäigefüügt FlickrImage an eise Bildauswieler Flyout bäi. Déi lescht a wichtegst Zeil ass verbindlech d'Funktioun .updateSrc () fir ze brennen wann déi aktuell ausgewielte FlickrImage geännert gëtt. Wann dat aktuellt Bild am Modell geännert gëtt, leeft dës Funktioun, aktualiséiert de src Attribut vum Bildelement, an CSS ännert d'Gréisst a beschnëtzt d'Bild fir an d'Bilddimensiounen ze passen déi vum Benotzer spezifizéiert sinn.
Eventer: {"klickt .setupIcon": "clickSetup", "klickt .flickrbombFlyout a.photo": "selectImage", "klickt .flickrbombFlyout a.next": "nextFlickrPhotos", "klickt .flickrbombFlyout a.prev": "prevFlickrPhotos "}
Folgend .initialize () hu mir de Verhalensdeel vun der View. Backbone bitt e praktesche Wee fir Eventer ze binden mat engem Event Objet. D'Evenementer Objet benotzt d'jQuery .delegate () Method fir déi tatsächlech Bindung zum View Element ze maachen, sou datt egal wéi eng Manipulatioun Dir mam Element an der Sicht maacht, all Är gebonne Eventer funktionnéieren ëmmer nach. Et funktionnéiert just wéi jQuery .live (), ausser datt anstatt Eventer an dat ganzt Dokument ze binden, kënnt Dir se am Kader vun all Element bannen. De Schlëssel vun all Eintritt am Eventer Objet besteet aus dem Event an dem Selector, de Wäert weist dës Funktioun un, déi un dat Evenement gebonne sollt sinn. Bedenkt datt .delegate () net mat e puer Eventer funktionnéiert wéi ofginn, kuckt d'JQuery .live () Dokumentatioun fir eng komplett Lëscht vun ënnerstëtzten Eventer.
Render: Funktioun () {$ (this.el) .html (this.template ()); this.image.fetch (); dës.Gréisst (); schéckt dëst zréck;}
Schlussendlech hu mir d'Funktioun .render () déi verantwortlech ass fir eis Markup ze kreéieren an all zousätzlech Aarbecht ze maachen déi net ausgefouert kënne ginn bis de View Markup an de View Element bäigefüügt gouf. Nodeems mir eis Schabloun gemaach hunn, musse mir .fetch () op eiser FlickrBombImage uruffen. .fetch () ass eng Backbone Funktioun déi déi lescht Kopie vum Modell aus der Persistenzschicht kritt. Wa mir dëse Modell virdru gerett hätten, géif .fetch () dës Donnéeën elo erëmfannen. Nodeems d'Bild ofgeholl gouf, musse mir d'Gréisst uruffen fir se richteg ze positionéieren.
D'Home Stretch
Mat all de Stécker op der Plaz, alles wat mir elo brauchen ze maachen ass d'Plazholderbiller op der Säit ze fannen an ze ersetzen mat de geliwwert FlickrBombImage Usiichten.
$ ("img [src ^ = 'flickr: //']") .each (function () {var img = $ (this), flickrBombImageView = new FlickrBombImageView ({img: img}); img.replaceWith (flickrBombImageView. renderen (). el);});
Dëse klenge Snip muss am Fong vun der Säit ausgeführt ginn, oder an engem Dokument fäerdeg Réckruff, fir sécherzestellen datt et d'Plazholderbiller fënnt, déi et ersetzt. Mir benotzen d'Konventioun fir Flickr: // [KEYWORD] am src Attribut vun engem Bildtag ze spezifizéieren fir unzeginn datt et mat Biller vu Flickr populéiert soll ginn. Mir fannen Bildelementer mat engem passenden src Attribut, kreéieren en neie FlickrBombImageView, an ersetzen dann d'Bild mat eisem. Mir gräifen eng Kopie vum Originalbild a ginn et op eise FlickrBombView, fir datt mir e puer zousätzlech Konfiguratiounsoptiounen zéien, déi eventuell op dem Element uginn hunn.
D'Enn vum Resultat vun all där haarder Aarbecht ass eng ganz einfach API fir Leit, déi d'Bibliothéik benotzen. Si kënnen einfach Bildtags definéieren mat der Flickr: // Konventioun, de FlickrBomb Code am ënneschten Deel vun hirer Säit falen, a Bam, si hunn Plazhaler vu Flickr.
Wierker super mat grousse ol Web Apps och
Mir hunn eng grouss ol Web App mam Numm Notable, déi ouni Suerg geschriwwe gouf fir Inhalt Client-Säit ze generéieren. Wann mir Sektiounen vun der App Turbo wëlle maachen andeems se Inhalt Client Säit generéieren, hu mir Backbone gewielt. D'Grënn waren déiselwecht: mir wollten e Liichtgewiicht fir de Code organiséiert ze halen, awer eis net forcéieren déi ganz Applikatioun ze iwwerdenken.
Mir hunn d'Ännerunge fréier dëst Joer mat groussem Erfolleg gestart, a sangen zënterhier Backbones Luef.
Zousätzlech Ressourcen
Et ass vill méi am Backbone wéi wat ech an dësem Artikel ofgedeckt hunn, den C (Controller) Deel vum MVC (Model View Controller) fir Ufänger, wat eigentlech en R (Router) an der leschter Versioun ass. An et ass alles an der Backbone Dokumentatioun ofgedeckt, e liichte Samschdeg Moie liesen:
documentcloud.github.com/backbone/
Wann méi traditionnell Tutorials Är Saach sinn, da kuckt de ganz gutt dokumentéierte Code vun dëser Todo Applikatioun geschriwwen am Backbone:
documentcloud.github.com/backbone/docs/todos.html
