విషయము
- అప్పుడు ప్రారంభిద్దాం
- మా మొదటి మోడల్
- చిత్రాల సమాహారం
- FlickrBombImage
- వ్యూ లేయర్
- FlickrBombImageView
- హోమ్ స్ట్రెచ్
- పెద్ద ఓల్ వెబ్ అనువర్తనాలతో కూడా గొప్పగా పనిచేస్తుంది
- అదనపు వనరులు
మీరు కొద్దిగా జావాస్క్రిప్ట్ సాధనాన్ని త్వరగా నిర్మించాలనుకుంటే, మీరు ఫ్రేమ్‌వర్క్‌ను ఉపయోగించడం గురించి ఆలోచించడం లేదు. క్రొత్త ఫ్రేమ్‌వర్క్‌ను ఇన్‌స్టాల్ చేసి నేర్చుకోవడం కంటే కొన్ని j క్వెరీ కోడ్‌ను కలిసి హ్యాక్ చేయడం సులభం, సరియైనదా? తప్పు, Backbone.js అనేది సూపర్ లైట్ వెయిట్ గ్లూ ఫ్రేమ్‌వర్క్, ఇది మీరు వ్రాయడానికి ఉపయోగించిన పాత పాత జావాస్క్రిప్ట్ లాగా కనిపిస్తుంది.
మేము ఇక్కడ ZURB వద్ద చాలా స్టాటిక్ ప్రోటోటైప్‌లను చేస్తాము, ఎందుకంటే ఏ బ్యాకెండ్ కోడ్‌ను వ్రాయకుండానే పేజీల ద్వారా క్లిక్ చేయగలుగుతాము. తరచుగా, మేము మందపాటి బూడిద ప్లేస్‌హోల్డర్ చిత్రాలలో పడిపోతాము, లేదా కొన్నిసార్లు తుది చిత్తుప్రతిలో ఏమి జరుగుతుందో visual హించడంలో మాకు సహాయపడటానికి నమూనా చిత్రాల కోసం ఫ్లికర్‌ను శోధించాము. అది ఒక మాయా శుక్రవారం వరకు, మేము నిర్ణయించినప్పుడు మా సమస్యలను పరిష్కరించడానికి కొన్ని జావాస్క్రిప్ట్ రాయడం అద్భుతంగా ఉంటుంది. ప్లేస్‌హోల్డర్ చిత్రాల నుండి నేరుగా ఫ్లికర్‌లో ఫోటోలను శోధించి, ఎంచుకోగలమని మేము కోరుకున్నాము. మేము దీనిని FlickrBomb అని పిలుస్తాము మరియు ఇది Backbone.js ను ఉపయోగించి ఎలా నిర్మించాము అనే కథ.
మీరు చదవడానికి ముందు FlickrBomb ను శీఘ్రంగా చూడాలని సిఫార్సు చేయబడింది. ఇది “ఒక క్లిక్ వెయ్యి పదాల విలువైనది” రకం ఒప్పందాలలో ఒకటి. ముందుకు సాగండి, మేము వేచి ఉంటాము.
ఈ రోజుల్లో బ్లాక్‌లో జావాస్క్రిప్ట్ ఫ్రేమ్‌వర్క్‌లు చాలా ఉన్నాయి, స్ప్రౌట్‌కోర్, జావాస్క్రిప్ట్ ఎంవిసి, వెన్నెముక, సామి, నాకౌట్. కానీ మేము కొన్ని విభిన్న కారణాల వల్ల ఈ ప్రత్యేక ప్రాజెక్ట్ కోసం Backbone.js ని ఇష్టపడ్డాము:
1. ఇది తేలికైనది (వాస్తవానికి 100% కొవ్వు రహితమైనది)
- బరువులో, తాజా ప్యాక్ చేసిన వెర్షన్ 4.6kb
- కోడ్‌లో, కేవలం 1,000 పంక్తుల కోడ్ ఉన్నందున, మీ మనస్సును కోల్పోకుండా ఇంటర్నల్‌లోకి స్టాక్ ట్రేస్‌ని అనుసరించడం చాలా కష్టం కాదు
2. ఇది జావాస్క్రిప్ట్ లాగా కనిపిస్తుంది
- ఎందుకంటే ఇది జావాస్క్రిప్ట్, అంతే మరియు అంతే
- ఇది j క్వెరీని ఉపయోగిస్తుంది, ఈ రోజుల్లో మీ బామ్మగారికి కూడా తెలుసు
3. సూపర్ సింపుల్ నిలకడ
- బాక్స్ వెలుపల ఇది డేటాను బ్యాకెండ్ (REST ద్వారా) వరకు కొనసాగిస్తుంది, కానీ ఒకే ప్లగ్-ఇన్‌లో పడటం ద్వారా అది స్థానిక నిల్వకు ఆదా అవుతుంది
- ఎందుకంటే ఇది నిలకడ API ని సంక్షిప్తీకరిస్తుంది, స్థానిక నిల్వ ప్లగ్-ఇన్‌ను తొలగించడం ద్వారా మేము దానిని REST బ్యాకెండ్‌లో కొనసాగించవచ్చు.
అప్పుడు ప్రారంభిద్దాం
Backbone.js కేవలం జావాస్క్రిప్ట్ అయినందున, మనం చేయవలసింది పేజీలోని Underscore.js తో పాటుగా. j క్వెరీ బ్యాక్బోన్ పర్ సే కోసం హార్డ్ డిపెండెన్సీ కాదు, కానీ మేము దీనిని ఉపయోగించబోతున్నాము కాబట్టి మేము దానిని ఇక్కడ చేర్చుతాము. మేము బ్యాకెండ్ ఏర్పాటుతో ఇబ్బంది పడకూడదనుకుంటున్నందున మేము స్థానిక నిల్వ ప్లగ్-ఇన్‌ను కూడా లింక్ చేస్తాము. సరళత కోసం ఇక్కడ ఫైళ్ళను నేరుగా లింక్ చేస్తున్నట్లు గమనించండి, కానీ మీరు ఉత్పత్తిలో మీ స్వంత ఆస్తులను ఎల్లప్పుడూ హోస్ట్ చేయాలి.
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 "> / script>
ఈ ఆర్టికల్‌లోని కింది అన్ని కోడ్‌లు మా అనువర్తనానికి ప్రత్యేకమైనవి, కాబట్టి మేము దీన్ని app.js ఫైల్‌లో చేర్చవచ్చు లేదా అది మీదే అయితే ఇన్‌లైన్ చేయవచ్చు. వెన్నెముక తర్వాత చేర్చాలని గుర్తుంచుకోండి. వెన్నెముక మా అనువర్తనం యొక్క నైరూప్య భాగాలను సులభతరం చేయడానికి, రెండింటినీ సులభంగా పునర్వినియోగం చేయడానికి మరియు ఇతరులకు మరింత చదవగలిగేలా చేస్తుంది. ఆ సంగ్రహణను ఉత్తమంగా వివరించడానికి, FlickrBomb యొక్క రూపకల్పనను దిగువ నుండి వివరించడానికి, మోడళ్లతో ప్రారంభించి, వీక్షణలతో ముగుస్తుంది.
మా మొదటి మోడల్
మొదటి పని ఫ్లికర్ నుండి ఫోటోలను లాగడం. వెన్నెముకలో FlickrImage ను మోడలింగ్ చేయడం చాలా సులభం, మేము FlickrImage అనే క్రొత్త మోడల్‌ను సృష్టిస్తాము మరియు విభిన్న పరిమాణ బ్రొటనవేళ్లను పొందడానికి మాకు సహాయపడటానికి కొన్ని పద్ధతులను జోడిస్తాము.
var FlickrImage = Backbone.Model.extend ({fullsize_url: function () {return this.image_url ('medium');}, thumb_url: function () {return this.image_url ('square');}, image_url: function ( పరిమాణం) {var size_code; స్విచ్ (పరిమాణం) {case 'square': size_code = '_s'; break; // 75x75 case 'medium': size_code = '_z'; break; // 640 పొడవైన వైపు కేసులో 'పెద్దది ': size_code =' _b '; బ్రేక్; // 1024 పొడవైన వైపు డిఫాల్ట్‌లో: size_code =' ';} return "http: // farm" + this.get (' farm ') + ".static.flickr.com / "+ this.get ('server') +" / "+ this.get ('id') +" _ "+ this.get ('secret') + size_code +" .webp ";}})
వెన్నెముకలోని నమూనాలు ఇతర MVC ఫ్రేమ్‌వర్క్‌లలోని నమూనాల మాదిరిగానే కొనసాగగల మరియు వాటితో సంబంధం ఉన్న కొన్ని విధులను కలిగి ఉంటాయి. బ్యాక్బోన్ మోడళ్ల యొక్క మాయా భాగం ఏమిటంటే, మేము సంఘటనలను లక్షణాలతో బంధించగలము, తద్వారా ఆ లక్షణం మారినప్పుడు మేము దానిని ప్రతిబింబించేలా మా అభిప్రాయాలను నవీకరించవచ్చు. కానీ మనం మనకంటే కొంచెం ముందున్నాము.
మేము Flickr నుండి ఫోటోలను లాగినప్పుడు, మేము అన్ని పరిమాణాల కోసం URL లను సృష్టించడానికి తగిన సమాచారాన్ని పొందబోతున్నాము. అయితే ఆ అసెంబ్లీ మాకు మిగిలి ఉంది, కాబట్టి మేము .image_url () ఫంక్షన్‌ను అమలు చేసాము, అది పరిమాణ పరామితిని తీసుకొని పబ్లిక్ లింక్‌ను అందిస్తుంది. ఇది వెన్నెముక మోడల్ కాబట్టి, మోడల్‌లోని లక్షణాలను యాక్సెస్ చేయడానికి మేము దీనిని ఉపయోగించవచ్చు. కాబట్టి ఈ మోడల్‌తో, ఫ్లికర్ ఇమేజ్ యొక్క URL ను పొందడానికి కోడ్‌లో మరెక్కడైనా చేయవచ్చు.
flickrImage.image_url (’పెద్దది’)
చాలా సంక్షిప్త, ఇ? ఈ మోడల్ మా అనువర్తనానికి ప్రత్యేకమైనది కాబట్టి, మేము పూర్తి పరిమాణ మరియు బొటనవేలు చిత్ర పరిమాణాల కోసం కొన్ని రేపర్ ఫంక్షన్లను జోడిస్తాము.
చిత్రాల సమాహారం
FlickrBomb ఒకే చిత్రాలతో కాకుండా చిత్రాల సేకరణతో వ్యవహరిస్తుంది మరియు దీనిని మోడలింగ్ చేయడానికి వెన్నెముకకు అనుకూలమైన మార్గం ఉంది. సముచితంగా పేరు పెట్టబడిన సేకరణ ఏమిటంటే, ఒకే ప్లేస్‌హోల్డర్ కోసం ఫ్లికర్ చిత్రాలను సమూహపరచడానికి మేము ఉపయోగిస్తాము.
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; $ .అజాక్స్ ({url: 'http://api.flickr.com/services/rest/', డేటా: {api_key: self.key, format: 'json', method: 'flickr. photos.search ', టాగ్లు: this.keywords, per_page: 9, పేజీ: this.page, లైసెన్స్: flickrbombLicenseTypes data, dataType:' jsonp ', jsonp:' jsoncallback ', విజయం: ఫంక్షన్ (ప్రతిస్పందన) {self.add (ప్రతిస్పందన .photos.photo); విజయం ();}});}, తదుపరి పేజీ: ఫంక్షన్ (బ్యాక్‌బ్యాక్) {this.page + = 1; this.remove (this.models); this.fetch (null, callback);}, prevPage: ఫంక్షన్ (బ్యాక్) {if (this.page> 1) {this.page - = 1;} this.remove (this.models); this.fetch (null, callback);}});
ఇక్కడ గమనించవలసిన రెండు విషయాలు ఉన్నాయి. మొదట, ది మోడల్ గుణం సేకరణలను ఏ రకమైన మోడల్‌ను సేకరిస్తుందో చెబుతుంది. మేము తరువాత ఉపయోగం కోసం ప్రారంభించిన కొన్ని లక్షణాలను కూడా కలిగి ఉన్నాము: కీ మా Flickr API కీ, మీరు FlickrbombAPIkey ని మీ స్వంత Flickr API కీ యొక్క స్ట్రింగ్‌తో భర్తీ చేయాలనుకుంటున్నారు. Flickr API కీని పొందడం ఉచితం మరియు సులభం, ఈ లింక్‌ను అనుసరించండి: www.flickr.com/services/api/misc.api_keys.html. పేజీ లక్షణం మేము ఉన్న ఫ్లికర్ ఫోటోల ప్రస్తుత పేజీ.
ఇక్కడ పెద్ద పద్ధతి .fetch (), ఇది Flickr API నుండి ఫోటోలను లాగడం యొక్క వివరాలను సంగ్రహిస్తుంది. క్రాస్-డొమైన్ అభ్యర్థనలతో సమస్యలను నివారించడానికి, మేము JSONP ని ఉపయోగిస్తున్నాము, ఇవి Flickr API మరియు j క్వెరీ మద్దతు. మేము API కి వెళుతున్న ఇతర పారామితులు స్వీయ వివరణాత్మకంగా ఉండాలి. ప్రత్యేక ఆసక్తి ఏమిటంటే ఇక్కడ వెన్నెముక విధులు పిలువబడుతున్నాయి. మేము ఉపయోగిస్తున్న విజయవంతమైన బ్యాక్‌బ్యాక్‌లో .add (), మోడల్ లక్షణాల శ్రేణిని తీసుకునే ఫంక్షన్, ఆ లక్షణాల నుండి మోడల్ ఉదంతాలను సృష్టిస్తుంది, ఆపై వాటిని సేకరణకు జోడిస్తుంది.
.NextPage () మరియు .prevPage () విధులు మొదట మనం ప్రదర్శించదలిచిన పేజీని మారుస్తాయి,
సేకరణ ఫంక్షన్‌ను ఉపయోగించండి .remove (), ఇప్పటికే ఉన్న అన్ని మోడళ్లను తొలగించడానికి
సేకరణ, ఆపై ప్రస్తుత పేజీ కోసం ఫోటోలను పొందడానికి పొందమని కాల్ చేయండి (మేము ఇప్పుడే
మార్చబడింది).
FlickrBombImage
మా మార్గంలో తిరిగి పని చేస్తున్నప్పుడు, ప్లేస్‌హోల్డర్ ఇమేజ్‌ని సూచించడానికి మాకు మరో మోడల్ అవసరం, ఇది ఫ్లికర్ ఇమేజెస్ యొక్క సేకరణను మరియు ప్రస్తుత ఫ్లికర్ ఇమేజ్‌ను కలిగి ఉంటుంది. మేము ఈ మోడల్‌ను FlickrBombImage అని పిలుస్తాము.
var localStorage = (support_local_storage ())? క్రొత్త స్టోర్ ("flickrBombImages"): శూన్య; 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') === నిర్వచించబడలేదు) {this.set ({src: this.flickrImages. మొదటి (). image_url ()});}}});
పేజీ లోడ్ల మధ్య ప్రస్తుతం ఎంచుకున్న చిత్రాన్ని ట్రాక్ చేయడానికి ఈ మోడల్ బాధ్యత వహిస్తుంది కాబట్టి, ఏ స్థానిక స్టోర్ స్టోర్ ఉపయోగించాలో తెలుసుకోవాలి.మొదటి పంక్తి లోకల్‌స్టోరేజ్‌కి మద్దతు ఉందని నిర్ధారిస్తుంది, ఆపై ఎంచుకున్న చిత్రాన్ని కొనసాగించడానికి మేము ఉపయోగించే స్టోర్‌ను సృష్టించండి.
మోడల్ యొక్క ఉదాహరణ సృష్టించబడినప్పుడు పిలువబడే .initialize () ఫంక్షన్‌ను నిర్వచించడానికి వెన్నెముక అనుమతిస్తుంది. FlickrImages సేకరణ యొక్క క్రొత్త ఉదాహరణను సృష్టించడానికి, ఈ చిత్రం కోసం ఉపయోగించబడే కీలకపదాలతో పాటు, ఆపై Flickr నుండి చిత్రాలను పొందటానికి మేము FlickrBombImage లో ఈ ఫంక్షన్‌ను ఉపయోగిస్తాము.
.LickFirstImage () ఫంక్షన్ ఫ్లికర్ నుండి చిత్రాలు లోడ్ అయినప్పుడు అమలు చేయడానికి బ్యాక్‌బ్యాక్‌గా పంపబడింది. మీరు బహుశా can హించినట్లుగా, ఈ ఫంక్షన్ ప్రస్తుత చిత్రాన్ని Flickr నుండి సేకరణలో మొదటిదిగా సెట్ చేస్తుంది. ప్రస్తుత చిత్రం ఇప్పటికే సెట్ చేయబడితే ఇది చేయదు.
ఈ మోడల్ యొక్క src లక్షణం మారినప్పుడు మా .changeSrc () ఫంక్షన్‌ను కాల్చడానికి మేము బ్యాక్బోన్ యొక్క గుణం కాల్‌బ్యాక్‌లను కూడా ఉపయోగించబోతున్నాము. ఈ బ్యాక్‌బ్యాక్ అంతా కాల్ .సేవ్ (), బ్యాక్బోన్ మోడల్ ఫంక్షన్, ఇది మోడల్ యొక్క లక్షణాలను స్టోర్ లేయర్ అమలు చేసిన వాటికి కొనసాగించేది (మా విషయంలో లోకల్ స్టోర్). ఈ విధంగా, ఎంచుకున్న చిత్రం మారినప్పుడల్లా, అది వెంటనే కొనసాగుతుంది.
వ్యూ లేయర్
ఇప్పుడు మనకు అన్ని బ్యాకెండ్ (బాగా, ఫ్రంటెండ్ బ్యాకెండ్) కోడ్ వ్రాయబడింది, మేము వీక్షణలను కలిసి ఉంచవచ్చు. వెన్నెముకలోని వీక్షణలు కొద్దిగా భిన్నంగా ఉంటాయి, అప్పుడు ఇతర సాంప్రదాయ MVC ఫ్రేమ్‌వర్క్‌లలోని వీక్షణలు. ఒక దృశ్యం సాధారణంగా ప్రదర్శనతో మాత్రమే సంబంధం కలిగి ఉంటుంది, అయితే ప్రవర్తనకు కూడా వెన్నెముక వీక్షణ బాధ్యత వహిస్తుంది. మీ వీక్షణ ఏదో ఎలా ఉందో నిర్వచించడమే కాకుండా, సంభాషించేటప్పుడు ఏమి చేయాలో కూడా నిర్వచించింది.
ఒక వీక్షణ సాధారణంగా కొన్ని డేటాతో ముడిపడి ఉంటుంది మరియు ఆ డేటా నుండి ప్రదర్శన మార్కప్‌ను రూపొందించడానికి మూడు దశల ద్వారా వెళుతుంది:
1. వీక్షణ వస్తువు ప్రారంభించబడింది మరియు ఖాళీ మూలకం సృష్టించబడుతుంది.
2. రెండర్ ఫంక్షన్ అంటారు, మునుపటి దశలో సృష్టించిన మూలకంలోకి చొప్పించడం ద్వారా వీక్షణ కోసం మార్కప్‌ను ఉత్పత్తి చేస్తుంది.
3. మూలకం DOM కి జోడించబడింది.
కొంత మార్కప్‌ను రూపొందించడానికి ఇది చాలా పనిలా అనిపించవచ్చు, మరియు మేము ఇంకా వీక్షణ యొక్క ప్రవర్తన భాగానికి కూడా రాలేదు, కానీ ఇది చాలా ముఖ్యమైనది మరియు ఇక్కడ ఎందుకు ఉంది. మీరు DOM లో ఉన్న మూలకాలను సవరించిన ప్రతిసారీ, మీరు బ్రౌజర్ రిఫ్లో అని పిలుస్తారు. పేజీలోని ప్రతి విషయం ఎలా ఉంచబడిందో బ్రౌజర్ తిరిగి లెక్కిస్తుంది. డ్రాగ్ లేదా పున ize పరిమాణం ఈవెంట్‌లో పిలిస్తే బ్రౌజర్ రిఫ్లోలు పనితీరుకు చెడ్డవి, అది చాలా తక్కువ వ్యవధిలో కాల్పులు జరుపుతుంది, కానీ అధ్వాన్నంగా, అవి అలసత్వంగా కనిపిస్తాయి. సంక్లిష్టమైన పేజీ తారుమారుతో, మీరు వాస్తవానికి పేజీకి మూలకాలు జోడించబడటం మరియు ప్రభావవంతమైన మూలకాల పున osition స్థాపన చూడవచ్చు. బ్యాక్బోన్ యొక్క ప్రారంభ, రెండర్ మరియు అటాచ్ యొక్క నమూనాను అనుసరించి, మీరు ఒకే రిఫ్లోకు హామీ ఇస్తారు మరియు మూలకం తారుమారు యొక్క సంక్లిష్టతతో సంబంధం లేకుండా పేజీకి మార్పులు గ్రహించబడతాయి.
FlickrBombImageView
var FlickrBombImageView = Backbone.View.extend ({tagName: "div", className: "flickrbombContainer", lock: false, template: _.template ('div id = "% = this.image.id.replace (" ", "")%> "... / div> '), ప్రారంభించండి: ఫంక్షన్ (ఎంపికలు) {_.bindAll (ఇది,' addImage ',' updateSrc ',' setDimentions ',' updateDimentions '); var keywords = options. img.attr ('src'). స్థానంలో ('flickr: //', ''); ఇది. $ 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);}, సంఘటనలు: { ".setupIcon" క్లిక్ చేయండి: "clickSetup", "క్లిక్ చేయండి .flickrbombFlyout a.photo": "selectImage", "click .flickrbombFlyout a.next": "nextFlickrPhotos", "క్లిక్ చేయండి .flickrbombFlyout a.prev": "prevFlickrPhotos" రెండర్: ఫంక్షన్ () this $ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); దీన్ని తిరిగి ఇవ్వండి;}, ...});
ఈ వీక్షణ యొక్క విధులు సంక్షిప్తత కోసం తొలగించబడ్డాయి, సోర్స్ కోడ్ పూర్తిగా గిట్‌హబ్‌లో అందుబాటులో ఉంది: github.com/zurb/flickrbomb
వీక్షణ ఎగువన, మాకు జంట వెన్నెముక నిర్దిష్ట లక్షణాలు ఉన్నాయి. ఈ వీక్షణ మూలకానికి వర్తించే ట్యాగ్ మరియు తరగతిని నిర్వచించడానికి ట్యాగ్‌నేమ్ మరియు క్లాస్‌నేమ్ ఉపయోగించబడతాయి. వీక్షణ సృష్టి యొక్క ఒక దశ ఒక వస్తువును సృష్టిస్తుందని గుర్తుంచుకోండి, మరియు ఆ సృష్టి వెన్నెముక చేత నిర్వహించబడుతుంది కాబట్టి, మేము మూలకం మరియు తరగతిని పేర్కొనాలి. వెన్నెముకలో సరైన డిఫాల్ట్‌లు ఉన్నాయని గమనించండి; మేము ఈ లక్షణాలను వదిలివేస్తే, ఒక డివి డిఫాల్ట్‌గా ఉపయోగించబడుతుంది మరియు మీరు ఒకదాన్ని పేర్కొనకపోతే తరగతి వర్తించదు.
టెంప్లేట్ లక్షణం ఒక సమావేశం, కానీ అవసరం లేదు. ఈ వీక్షణ కోసం మా మార్కప్‌ను రూపొందించడానికి మేము ఉపయోగించే జావాస్క్రిప్ట్ టెంప్లేట్ ఫంక్షన్‌ను పేర్కొనడానికి మేము దీన్ని ఇక్కడ ఉపయోగిస్తున్నాము. మేము Underscore.js లో చేర్చబడిన _.template () ఫంక్షన్‌ను ఉపయోగిస్తాము, కానీ మీరు ఇష్టపడే ఏ టెంప్లేటింగ్ ఇంజిన్‌ను అయినా ఉపయోగించవచ్చు, మేము మిమ్మల్ని తీర్పు చెప్పలేము.
మా .initialize () ఫంక్షన్‌లో మనం ఇమేజ్ ట్యాగ్ నుండి కీలక పదాల స్ట్రింగ్‌ను బయటకు తీస్తున్నాము, ఆపై ఆ కీలకపదాలను ఉపయోగించి FlickrBombImage మోడల్‌ను సృష్టిస్తున్నాము. FlickrImage సేకరణకు FlickrImage జోడించబడినప్పుడు అమలు చేయవలసిన .addImage () ఫంక్షన్‌ను కూడా మేము బంధిస్తున్నాము. ఈ ఫంక్షన్ మా ఇమేజ్ సెలెక్టర్ ఫ్లైఅవుట్‌కు కొత్తగా జోడించిన FlickrImage ని జోడిస్తుంది. ప్రస్తుతం ఎంచుకున్న FlickrImage మార్చబడినప్పుడు .updateSrc () ఫంక్షన్‌ను కాల్చడానికి చివరి మరియు అతి ముఖ్యమైన పంక్తి. మోడల్‌లో ప్రస్తుత చిత్రం మార్చబడినప్పుడు, ఈ ఫంక్షన్ నడుస్తుంది, ఇమేజ్ ఎలిమెంట్ యొక్క src లక్షణాన్ని అప్‌డేట్ చేస్తుంది మరియు వినియోగదారు పేర్కొన్న ఇమేజ్ కొలతలలో సరిపోయేలా CSS పరిమాణాన్ని మార్చండి మరియు కత్తిరించండి.
ఈవెంట్‌లు: click "క్లిక్ చేయండి .సెట్అప్ ఐకాన్": "క్లిక్ సెటప్", "క్లిక్ చేయండి .ఫ్లిక్ర్బాంబ్ ఫ్లైఅవుట్ a.photo": "selectImage", "క్లిక్ చేయండి .flickrbombFlyout a.next": "nextFlickrPhotos", "క్లిక్ చేయండి .flickrbombFlyout a.prev": "prevFlickrPhotos "}
.Initialize () ను అనుసరించి మనకు వీక్షణ యొక్క ప్రవర్తన భాగం ఉంది. ఈవెంట్స్ ఆబ్జెక్ట్ ఉపయోగించి ఈవెంట్లను బంధించడానికి వెన్నెముక అనుకూలమైన మార్గాన్ని అందిస్తుంది. వీక్షణ మూలకానికి వాస్తవమైన బైండింగ్ చేయడానికి ఈవెంట్స్ ఆబ్జెక్ట్ j క్వెరీ .డెలిగేట్ () పద్ధతిని ఉపయోగిస్తుంది, తద్వారా వీక్షణలోని మూలకానికి మీరు ఏ తారుమారు చేసినా, మీ కట్టుబడి ఉన్న అన్ని సంఘటనలు ఇప్పటికీ పని చేస్తాయి. ఇది j క్వెరీ .లైవ్ () లాగా పనిచేస్తుంది, సంఘటనలను మొత్తం పత్రానికి బంధించే బదులు, మీరు వాటిని ఏదైనా మూలకం యొక్క పరిధిలో బంధించవచ్చు. ఈవెంట్స్ ఆబ్జెక్ట్‌లోని ప్రతి ఎంట్రీ యొక్క కీ ఈవెంట్ మరియు సెలెక్టర్‌ను కలిగి ఉంటుంది, విలువ ఆ ఈవెంట్‌కు కట్టుబడి ఉండే ఫంక్షన్‌ను సూచిస్తుంది. సమర్పించడం వంటి కొన్ని ఈవెంట్‌లతో .డెలిగేట్ () పనిచేయదని గమనించండి, మద్దతు ఉన్న సంఘటనల పూర్తి జాబితా కోసం j క్వెరీ .లైవ్ () డాక్యుమెంటేషన్ చూడండి.
రెండర్: ఫంక్షన్ () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); దీన్ని తిరిగి ఇవ్వండి;}
చివరగా, మనకు .render () ఫంక్షన్ ఉంది, ఇది మా మార్కప్‌ను సృష్టించడానికి మరియు వ్యూ మార్కప్‌ను వ్యూ ఎలిమెంట్‌కు జోడించే వరకు చేయలేని అదనపు పనిని చేయటానికి బాధ్యత వహిస్తుంది. మేము మా టెంప్లేట్‌ను రెండర్ చేసిన తర్వాత, మన FlickrBombImage లో .fetch () ని కాల్ చేయాలి. .fetch () అనేది బ్యాక్బోన్ ఫంక్షన్, ఇది మోడల్ యొక్క తాజా కాపీని నిలకడ పొర నుండి పొందుతుంది. మేము ఇంతకుముందు ఈ మోడల్‌ను సేవ్ చేసి ఉంటే, .ఫెట్ () ఇప్పుడు ఆ డేటాను తిరిగి పొందుతుంది. చిత్రం పొందిన తరువాత, దాన్ని సరిగ్గా ఉంచడానికి పున ize పరిమాణం అని పిలవాలి.
హోమ్ స్ట్రెచ్
అన్ని ముక్కలు స్థానంలో ఉన్నందున, మనం ఇప్పుడు చేయవలసింది పేజీలోని ప్లేస్‌హోల్డర్ చిత్రాలను కనుగొని వాటిని అన్వయించిన FlickrBombImage వీక్షణలతో భర్తీ చేయండి.
$ ("img [src ^ = 'flickr: //']") .ప్రతి (ఫంక్షన్ () {var img = $ (ఇది), flickrBombImageView = కొత్త FlickrBombImageView ({img: img}); రెండర్ (). ఎల్);});
ఈ చిన్న స్నిప్ పేజీ దిగువన లేదా పత్రం సిద్ధంగా ఉన్న బ్యాక్‌బ్యాక్‌లో అమలు చేయాల్సిన అవసరం ఉంది, అది భర్తీ చేసే ప్లేస్‌హోల్డర్ చిత్రాలను కనుగొనగలదని నిర్ధారించుకోండి. ఇమేజ్ ట్యాగ్ యొక్క src లక్షణంలో Flickr: // [KEYWORD] ను పేర్కొనే సమావేశాన్ని మేము ఉపయోగిస్తాము, ఇది Flickr నుండి చిత్రాలతో నిండి ఉండాలని సూచిస్తుంది. మేము మ్యాచింగ్ src లక్షణంతో చిత్ర అంశాలను కనుగొంటాము, క్రొత్త FlickrBombImageView ని సృష్టించి, ఆపై చిత్రాన్ని మాతో భర్తీ చేస్తాము. మేము అసలు చిత్రం యొక్క కాపీని పట్టుకుని మా FlickrBombView కి పంపుతాము, తద్వారా మూలకంపై పేర్కొన్న కొన్ని అదనపు కాన్ఫిగరేషన్ ఎంపికలను లాగవచ్చు.
అన్ని హార్డ్ వర్క్ యొక్క తుది ఫలితం లైబ్రరీని ఉపయోగించే వ్యక్తులకు చాలా సులభమైన API. వారు Flickr: // కన్వెన్షన్ ఉపయోగించి ఇమేజ్ ట్యాగ్‌లను నిర్వచించవచ్చు, వారి పేజీ దిగువన FlickrBomb కోడ్‌ను వదలవచ్చు మరియు బామ్, వారికి Flickr నుండి ప్లేస్‌హోల్డర్ చిత్రాలు లభించాయి.
పెద్ద ఓల్ వెబ్ అనువర్తనాలతో కూడా గొప్పగా పనిచేస్తుంది
మనకు నోటబుల్ అని పిలువబడే పెద్ద ఓల్ వెబ్ అనువర్తనం ఉంది, ఇది కంటెంట్ క్లయింట్ వైపు ఉత్పత్తి చేయటానికి ఆందోళన లేకుండా వ్రాయబడింది. కంటెంట్ క్లయింట్ వైపు ఉత్పత్తి చేయడం ద్వారా ఛార్జ్ చేయబడిన అనువర్తన టర్బో యొక్క విభాగాలను చేయాలనుకున్నప్పుడు, మేము వెన్నెముకను ఎంచుకున్నాము. కారణాలు ఒకే విధంగా ఉన్నాయి: కోడ్‌ను క్రమబద్ధంగా ఉంచడంలో సహాయపడటానికి తేలికపాటి ఫ్రేమ్‌వర్క్‌ను మేము కోరుకుంటున్నాము, కాని మొత్తం అనువర్తనాన్ని పునరాలోచించమని బలవంతం చేయలేదు.
మేము ఈ సంవత్సరం ప్రారంభంలో మార్పులను గొప్ప విజయంతో ప్రారంభించాము మరియు అప్పటి నుండి బ్యాక్‌బోన్స్ ప్రశంసలను పాడుతున్నాము.
అదనపు వనరులు
ఈ వ్యాసంలో నేను కవర్ చేసినదానికంటే బ్యాక్‌బోన్‌కు చాలా ఎక్కువ ఉంది, స్టార్టర్స్ కోసం MVC (మోడల్ వ్యూ కంట్రోలర్) యొక్క సి (కంట్రోలర్) భాగం, ఇది వాస్తవానికి తాజా వెర్షన్‌లో R (రౌటర్). ఇవన్నీ బ్యాక్బోన్ డాక్యుమెంటేషన్‌లో ఉన్నాయి, శనివారం ఉదయం తేలికగా చదవండి:
documentcloud.github.com/backbone/
మరింత సాంప్రదాయ ట్యుటోరియల్స్ మీ విషయం అయితే, వెన్నెముకలో వ్రాయబడిన ఈ టోడో అప్లికేషన్ యొక్క చక్కగా డాక్యుమెంట్ చేయబడిన కోడ్‌ను చూడండి:
documentcloud.github.com/backbone/docs/todos.html
