इंटरैक्शन को गति देने के लिए Backbone.js का उपयोग करें

विषय

• तो चलिए शुरू करते हैं
• हमारा पहला मॉडल
• छवियों का एक संग्रह
• फ़्लिकरबॉम्ब इमेज
• दृश्य परत
• फ़्लिकरबॉम्ब इमेज व्यू
• होम स्ट्रेच
• बड़े पुराने वेब ऐप्स के साथ भी बढ़िया काम करता है
• अतिरिक्त संसाधन

यदि आप जल्दी से एक छोटा जावास्क्रिप्ट टूल बनाना चाहते हैं, तो आप शायद फ्रेमवर्क का उपयोग करने के बारे में नहीं सोच रहे हैं। एक नया ढांचा स्थापित करने और सीखने के बजाय कुछ jQuery कोड को एक साथ हैक करना आसान है, है ना? गलत, Backbone.js एक सुपर लाइटवेट ग्लू फ्रेमवर्क है जो बिल्कुल पुराने पुराने JavaScript जैसा दिखता है जिसे आप लिखते थे।

हम यहां ZURB में बहुत सारे स्थिर प्रोटोटाइप करते हैं, क्योंकि हम बिना किसी बैकएंड कोड को लिखे पृष्ठों के माध्यम से क्लिक करने में सक्षम होना पसंद करते हैं। अक्सर, हम धूसर ग्रे प्लेसहोल्डर छवियों में छोड़ देते हैं, या कभी-कभी हम नमूना छवियों के लिए फ़्लिकर खोजते हैं ताकि हमें यह देखने में मदद मिल सके कि अंतिम मसौदे में क्या हो सकता है। वह एक जादुई शुक्रवार तक है, जब हमने फैसला किया कि हमारी समस्याओं को हल करने के लिए कुछ जावास्क्रिप्ट लिखना बहुत अच्छा होगा। हम फ़्लिकर पर सीधे प्लेसहोल्डर छवियों से फ़ोटो खोजने और चुनने में सक्षम होना चाहते थे। हम इसे FlickrBomb कहेंगे, और यह कहानी है कि हमने इसे Backbone.js का उपयोग करके कैसे बनाया।

यह अत्यधिक अनुशंसा की जाती है कि आप पढ़ने से पहले फ़्लिकरबॉम्ब पर एक त्वरित नज़र डालें। यह उनमें से एक है "एक क्लिक एक हजार शब्दों के लायक है" प्रकार के सौदे। आगे बढ़ो, हम इंतजार करेंगे।

इन दिनों ब्लॉक पर बहुत सारे जावास्क्रिप्ट फ्रेमवर्क हैं, स्प्राउटकोर, जावास्क्रिप्टएमवीसी, स्पाइन, सैमी, नॉकआउट। लेकिन हमें इस विशेष परियोजना के लिए कुछ अलग कारणों से Backbone.js पसंद आया:

1. यह हल्का है (वास्तव में 100% वसा रहित)

• वजन में, नवीनतम पैक्ड संस्करण के साथ लगभग 4.6kb
• कोड में, कोड की 1,000 से अधिक लाइनें होने के कारण, अपने दिमाग को खोए बिना आंतरिक में स्टैक ट्रेस का पालन करना बहुत कठिन नहीं है

2. यह जावास्क्रिप्ट जैसा दिखता है

• क्योंकि यह जावास्क्रिप्ट है, बस इतना ही है
• यह jQuery का उपयोग करता है, जिसे आपकी दादी भी इन दिनों जानती हैं

3. सुपर सरल दृढ़ता

• बॉक्स के बाहर यह डेटा को बैकएंड (आरईएसटी के माध्यम से) में रखता है, लेकिन एक प्लग-इन में छोड़ने से यह स्थानीय स्टोरेज में सहेजा जाएगा
• क्योंकि यह दृढ़ता एपीआई को दूर करता है, हम इसे केवल स्थानीय स्टोरेज प्लग-इन को हटाकर एक आरईएसटी बैकएंड के लिए जारी रख सकते हैं

तो चलिए शुरू करते हैं

चूँकि Backbone.js केवल JavaScript है, हमें केवल इसे पृष्ठ पर Underscore.js के साथ शामिल करना है। बैकबोन के लिए jQuery एक कठिन निर्भरता नहीं है, लेकिन हम इसका उपयोग करने जा रहे हैं इसलिए हम इसे यहां शामिल करेंगे। हम स्थानीय स्टोरेज प्लग-इन को भी लिंक करेंगे, क्योंकि हम बैकएंड सेट करने में परेशानी नहीं करना चाहते हैं। ध्यान दें कि सादगी के लिए यहां फाइलों को सीधे लिंक कर रहे थे, लेकिन आपको हमेशा उत्पादन में अपनी खुद की संपत्ति की मेजबानी करनी चाहिए।

स्क्रिप्ट 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 फ़ाइल में शामिल कर सकते हैं, या यदि यह आपकी चीज़ है तो केवल इनलाइन करें। बस इसे बैकबोन के बाद शामिल करना न भूलें। बैकबोन हमारे एप्लिकेशन के कुछ हिस्सों को सारगर्भित करने में सक्षम बनाता है, जिससे उन्हें आसान पुन: उपयोग के लिए मॉड्यूलर और दूसरों के लिए अधिक पठनीय बनाया जा सके। उस अमूर्तता को सर्वोत्तम रूप से स्पष्ट करने के लिए, फ़्लिकरबॉम्ब के डिज़ाइन को नीचे से ऊपर तक, मॉडल से शुरू करके और विचारों के साथ समाप्त करने वाले थे।

हमारा पहला मॉडल

फ़्लिकर से तस्वीरें खींच रहा था पहला काम निपटने जा रहा था। FlickrImage को बैकबोन में मॉडलिंग करना काफी सरल है, हम FlickrImage नामक एक नया मॉडल बनाएंगे, और विभिन्न आकार के अंगूठे प्राप्त करने में हमारी मदद करने के लिए कुछ तरीके जोड़ेंगे।

var FlickrImage = Backbone.Model.extend({ fullsize_url: function () {इसे वापस करें।image_url('medium'); }, thumb_url: function () { return this.image_url('square'); }, image_url: function ( size) { var size_code; स्विच (आकार) {केस 'स्क्वायर': size_code = '_s'; ब्रेक; // 75x75 केस 'मीडियम': size_code = '_z'; ब्रेक; // 640 सबसे लंबे साइड केस 'बड़ा' पर ': size_code = '_b'; ब्रेक; // 1024 सबसे लंबी तरफ डिफ़ॉल्ट: size_code = ''; } "http://farm" + this.get('farm') + ".static.flickr.com पर लौटें /" + this.get('server') + "/" +this.get('id') + "_" + this.get('secret') + size_code + ".webp"; }})

बैकबोन में मॉडल ऐसी वस्तुएं हैं जिन्हें जारी रखा जा सकता है, और उनके साथ जुड़े कुछ कार्य हैं, बहुत कुछ अन्य एमवीसी ढांचे में मॉडल की तरह। बैकबोन मॉडल का जादुई हिस्सा यह है कि हम घटनाओं को विशेषताओं से बांध सकते हैं, ताकि जब वह विशेषता बदल जाए तो हम उसे प्रतिबिंबित करने के लिए अपने विचारों को अपडेट कर सकें। लेकिन हम खुद से थोड़ा आगे निकल रहे हैं।

जब हम फ़्लिकर से तस्वीरें खींचते हैं, तो हमें सभी आकारों के URL बनाने के लिए पर्याप्त जानकारी मिलने वाली है। हालाँकि वह असेंबली हमारे ऊपर छोड़ दी गई है, इसलिए हमने .image_url() फ़ंक्शन लागू किया जो एक आकार पैरामीटर लेता है और एक सार्वजनिक लिंक देता है। चूंकि यह एक बैकबोन मॉडल है, इसलिए हम मॉडल पर विशेषताओं तक पहुंचने के लिए this.get() का उपयोग कर सकते हैं। तो इस मॉडल के साथ, हम फ़्लिकर छवि का URL प्राप्त करने के लिए कोड में निम्नलिखित कहीं और कर सकते हैं।

फ़्लिकरइमेज.इमेज_यूआरएल ('बड़ा')

बहुत संक्षिप्त, एह? चूंकि यह मॉडल हमारे एप्लिकेशन के लिए विशिष्ट है, इसलिए हम पूर्ण आकार और अंगूठे की छवि के आकार के लिए कुछ रैपर फ़ंक्शन जोड़ेंगे।

छवियों का एक संग्रह

FlickrBomb छवियों के संग्रह से संबंधित है, एकल छवियों से नहीं, और बैकबोन के पास इसे मॉडलिंग करने का एक सुविधाजनक तरीका है। उपयुक्त नामित संग्रह वह है जिसका उपयोग हम एक प्लेसहोल्डर के लिए फ़्लिकर छवियों को एक साथ समूहित करने के लिए करेंगे।

var FlickrImages = Backbone.Collection.extend({model: FlickrImage, key: flickrbombAPIkey, पेज: 1, फ़ेच: फंक्शन (कीवर्ड्स, सक्सेस) { var self = this; Success = Success || $.noop; this.keywords = कीवर्ड || this.keywords; $.ajax ({url: 'http://api.flickr.com/services/rest/', डेटा: { api_key: self.key, प्रारूप: 'json', विधि: 'flickr. photos.search', टैग: this.keywords, per_page: 9, पेज: this.पेज, लाइसेंस: फ़्लिकरबॉम्ब लाइसेंस टाइप}, डेटा टाइप: 'jsonp', jsonp: 'jsoncallback', सफलता: फ़ंक्शन (प्रतिक्रिया) { self.add (प्रतिक्रिया) .photos.photo); सफलता (); } }); }, अगला पृष्ठ: फ़ंक्शन (कॉलबैक) { यह पृष्ठ + = 1; this.remove (this.models); this.fetch (शून्य, कॉलबैक); }, पिछला पृष्ठ: फ़ंक्शन (कॉलबैक) { अगर (यह। पृष्ठ> 1) {यह पृष्ठ - = 1;} यह हटा दें (यह मॉडल); यह प्राप्त करें (शून्य, कॉलबैक);}});

यहाँ ध्यान देने योग्य कुछ बातें हैं। सबसे पहले, नमूना विशेषता संग्रह को बताती है कि वह किस प्रकार का मॉडल एकत्र कर रहा है। हमारे पास कुछ विशेषताएं भी हैं जिन्हें हमने बाद में उपयोग के लिए प्रारंभ किया: कुंजी हमारी फ़्लिकर एपीआई कुंजी है, आप फ़्लिकरबॉम्बएपीआईकी को अपनी फ़्लिकर एपीआई कुंजी की स्ट्रिंग से बदलना चाहेंगे। फ़्लिकर एपीआई कुंजी प्राप्त करना मुफ़्त और आसान है, बस इस लिंक का अनुसरण करें: www.flickr.com/services/api/misc.api_keys.html। पृष्ठ विशेषता फ़्लिकर फ़ोटो का वर्तमान पृष्ठ है जिस पर हम हैं।

यहां बड़ी विधि .fetch() है, जो फ़्लिकर एपीआई से फ़ोटो खींचने के विवरण को दूर करती है। क्रॉस-डोमेन अनुरोधों के साथ समस्याओं से बचने के लिए, हम JSONP का उपयोग कर रहे हैं, जो फ़्लिकर एपीआई और jQuery दोनों का समर्थन करता है। अन्य पैरामीटर जिन्हें हम एपीआई को पास कर रहे हैं, वे स्व-व्याख्यात्मक होने चाहिए। विशेष रुचि के बैकबोन फ़ंक्शंस को यहाँ बुलाया जा रहा है। सफलता कॉलबैक में हम .add() का उपयोग कर रहे हैं, एक फ़ंक्शन जो मॉडल विशेषताओं की एक सरणी लेता है, उन विशेषताओं से मॉडल इंस्टेंस बनाता है, और फिर उन्हें संग्रह में जोड़ता है।

.nextPage() और .prevPage() फ़ंक्शन पहले उस पेज को बदलते हैं जिसे हम प्रदर्शित करना चाहते हैं,
संग्रह समारोह का उपयोग करें। हटाएँ (), सभी मौजूदा मॉडलों को हटाने के लिए
संग्रह, और फिर वर्तमान पृष्ठ के लिए फ़ोटो प्राप्त करने के लिए फ़ेच को कॉल करें (जो कि हम सिर्फ
बदला हुआ)।

फ़्लिकरबॉम्ब इमेज

अपने तरीके से बैक अप लेने के लिए, हमें प्लेसहोल्डर छवि का प्रतिनिधित्व करने के लिए एक और मॉडल की आवश्यकता है, जिसमें FlickrImages का संग्रह होगा, और वर्तमान FlickrImage जिसे चुना गया है। हम इस मॉडल को FlickrBombImage कहेंगे।

वर लोकलस्टोरेज = (supports_local_storage ()) ? नया स्टोर ("flickrBombImages"): नल; var FlickrBombImage = Backbone.Model.extend ({लोकलस्टोरेज: लोकलस्टोरेज, इनिशियलाइज़: फंक्शन () { _.bindAll (यह, '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. पहला ()। इमेज_यूआरएल ()}); }}});

चूंकि यह मॉडल पेज लोड के बीच वर्तमान में चयनित छवि का ट्रैक रखने के लिए ज़िम्मेदार है, इसलिए इसे यह जानना होगा कि किस स्थानीय स्टोरेज स्टोर का उपयोग करना है।पहली पंक्ति यह सुनिश्चित करेगी कि स्थानीय भंडारण के लिए समर्थन है, और फिर वह स्टोर बनाएं जिसका उपयोग हम चयनित छवि को बनाए रखने के लिए करेंगे।

बैकबोन हमें एक .initialize() फ़ंक्शन को परिभाषित करने की अनुमति देता है जिसे मॉडल का एक उदाहरण बनने पर कहा जाएगा। हम FlickrBombImage में इस फ़ंक्शन का उपयोग FlickrImages संग्रह का एक नया उदाहरण बनाने के लिए करते हैं, इस छवि के लिए उपयोग किए जाने वाले कीवर्ड के साथ पास करते हैं, और फिर फ़्लिकर से चित्र प्राप्त करते हैं।

फ़्लिकर से छवियों को लोड किए जाने पर .loadFirstImage() फ़ंक्शन को कॉलबैक के रूप में पारित किया गया है। जैसा कि आप शायद अनुमान लगा सकते हैं, यह फ़ंक्शन वर्तमान छवि को फ़्लिकर से संग्रह में पहली छवि के रूप में सेट करता है। यह ऐसा नहीं करता है यदि वर्तमान छवि पहले ही सेट हो चुकी है।

जब इस मॉडल की src विशेषता बदलती है, तो हम अपने .changeSrc() फ़ंक्शन को सक्रिय करने के लिए बैकबोन के एट्रिब्यूट कॉलबैक का भी उपयोग करने जा रहे हैं। यह सभी कॉलबैक कॉल .save (), एक बैकबोन मॉडल फ़ंक्शन है जो मॉडल की विशेषताओं को बनाए रखता है जो भी स्टोर परत लागू किया गया है (हमारे मामले में स्थानीय स्टोर)। इस तरह, जब भी चयनित छवि बदली जाती है, तो यह तुरंत बनी रहती है।

दृश्य परत

अब जब हमारे पास सभी बैकएंड (अच्छी तरह से, फ्रंटएंड बैकएंड) कोड लिखा हुआ है, तो हम व्यू को एक साथ रख सकते हैं। बैकबोन में दृश्य अन्य पारंपरिक एमवीसी ढांचे में विचारों से थोड़ा अलग हैं। जबकि एक दृश्य आम तौर पर केवल प्रस्तुति से संबंधित होता है, एक बैकबोन व्यू व्यवहार के लिए भी जिम्मेदार होता है। इसका मतलब है कि आपका व्यू न केवल यह परिभाषित करता है कि कोई चीज़ कैसी दिखती है, बल्कि यह भी कि उसके साथ बातचीत करते समय उसे क्या करना चाहिए।

एक दृश्य आमतौर पर (लेकिन हमेशा नहीं) कुछ डेटा से जुड़ा होता है, और उस डेटा से प्रस्तुति मार्कअप उत्पन्न करने के लिए तीन चरणों से गुजरता है:

1. व्यू ऑब्जेक्ट को इनिशियलाइज़ किया जाता है, और एक खाली एलिमेंट बनाया जाता है।
2. रेंडर फ़ंक्शन को पिछले चरण में बनाए गए तत्व में सम्मिलित करके दृश्य के लिए मार्कअप उत्पन्न करना कहा जाता है।
3. तत्व डोम से जुड़ा हुआ है।

यह कुछ मार्कअप उत्पन्न करने के लिए बहुत काम की तरह लग सकता है, और हम अभी तक व्यू के व्यवहार हिस्से तक भी नहीं हैं, लेकिन यह महत्वपूर्ण है, और यहाँ क्यों है। हर बार जब आप DOM में मौजूद तत्वों को संशोधित करते हैं, तो आप ब्राउज़र रीफ़्लो नामक किसी चीज़ को ट्रिगर करते हैं। एक रीफ़्लो ब्राउज़र का पुनर्गणना है कि पृष्ठ पर हर चीज़ कैसे स्थित है। ब्राउज़र रीफ़्लो प्रदर्शन के लिए खराब हो सकते हैं यदि उन्हें ड्रैग या रिसाइज़ इवेंट के भीतर बुलाया जाता है, जो बहुत ही कम अंतराल पर सक्रिय होता है, लेकिन इससे भी बदतर, वे टेढ़े-मेढ़े दिखते हैं। जटिल पृष्ठ हेरफेर के साथ, आप वास्तव में पृष्ठ में तत्वों को जोड़े जा रहे हैं, और प्रभावित तत्वों को पुन: स्थापित करते हुए देख सकते हैं। बैकबोन के इनिशियलाइज़, रेंडर और अटैच करने के पैटर्न का अनुसरण करते हुए, आप एक सिंगल रिफ़्लो की गारंटी देते हैं, और पेज में बदलाव तत्व हेरफेर की जटिलता की परवाह किए बिना, तात्कालिक रूप से तात्कालिक होंगे।

फ़्लिकरबॉम्ब इमेज व्यू

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 कीवर्ड = 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); }, इवेंट्स: { "क्लिक करें .setupIcon": "क्लिकसेटअप", "क्लिक करें .flickrbombFlyout a.photo": "selectImage", "क्लिक .flickrbombFlyout a.next": "nextFlickrPhotos", "क्लिक करें। रेंडर: फंक्शन() {$(this.el).html(this.template()); this.image.fetch(); this.resize(); इसे वापस करें;},...});

इस दृश्य के कार्यों को संक्षिप्तता के लिए छोड़ दिया गया है, इसकी संपूर्णता में स्रोत कोड GitHub पर उपलब्ध है: github.com/zurb/flickrbomb

दृश्य के शीर्ष पर, हमारे पास कुछ बैकबोन विशिष्ट विशेषताएं हैं। टैगनाम और क्लासनाम का उपयोग उस टैग और वर्ग को परिभाषित करने के लिए किया जाता है जो इस दृश्य के तत्व पर लागू होगा। याद रखें कि दृश्य निर्माण का चरण एक ऑब्जेक्ट बना रहा है, और चूंकि उस निर्माण को बैकबोन द्वारा नियंत्रित किया जाता है, इसलिए हमें तत्व और वर्ग निर्दिष्ट करने की आवश्यकता है। ध्यान दें कि बैकबोन में समझदार चूक हैं; यदि हम इन विशेषताओं को छोड़ देते हैं, तो डिफ़ॉल्ट रूप से एक डिव का उपयोग किया जाता है, और जब तक आप एक निर्दिष्ट नहीं करते तब तक कोई वर्ग लागू नहीं किया जाएगा।

टेम्पलेट विशेषता एक सम्मेलन है, लेकिन आवश्यक नहीं है। हम इसका उपयोग यहां जावास्क्रिप्ट टेम्पलेट फ़ंक्शन को निर्दिष्ट करने के लिए कर रहे हैं जिसका उपयोग हम इस दृश्य के लिए अपना मार्कअप जेनरेट करने के लिए करेंगे। हम Underscore.js में शामिल _.template() फ़ंक्शन का उपयोग करते हैं, लेकिन आप जो भी टेम्प्लेट इंजन पसंद करते हैं उसका उपयोग कर सकते हैं, हम आपको जज नहीं करेंगे।

हमारे .initialize() फंक्शन में हम इमेज टैग से कीवर्ड स्ट्रिंग निकाल रहे हैं, और फिर उन कीवर्ड्स का उपयोग करके FlickrBombImage मॉडल बना रहे हैं। FlickrImages संग्रह में FlickrImage जोड़े जाने पर हम .addImage() फ़ंक्शन को चलाने के लिए बाध्य कर रहे हैं। यह फ़ंक्शन हमारे छवि चयनकर्ता फ्लाईआउट में नए जोड़े गए FlickrImage को जोड़ देगा। अंतिम और सबसे महत्वपूर्ण पंक्ति .updateSrc() फ़ंक्शन को सक्रिय करने के लिए बाध्य कर रही है जब वर्तमान में चयनित FlickrImage बदल जाता है। जब मॉडल में वर्तमान छवि बदली जाती है, तो यह फ़ंक्शन चलेगा, छवि तत्व की src विशेषता को अपडेट करें, और CSS आकार बदलें और छवि को उपयोगकर्ता द्वारा निर्दिष्ट छवि आयामों के भीतर फिट करने के लिए क्रॉप करें।

ईवेंट: { "क्लिक करें .setupIcon": "क्लिकसेटअप", "क्लिक करें। "}

निम्नलिखित .initialize() हमारे पास व्यू का व्यवहार भाग है। बैकबोन ईवेंट ऑब्जेक्ट का उपयोग करके ईवेंट को बाइंड करने का एक सुविधाजनक तरीका प्रदान करता है। ईवेंट ऑब्जेक्ट, व्यू एलिमेंट के लिए वास्तविक बाइंडिंग करने के लिए jQuery .delegate() मेथड का उपयोग करता है, ताकि व्यू के अंदर एलिमेंट के साथ आप जो भी मैनिपुलेशन करते हैं, उसके बावजूद आपके सभी बाउंड इवेंट्स अभी भी काम करेंगे। यह बिल्कुल jQuery .live() की तरह काम करता है, सिवाय इसके कि पूरे दस्तावेज़ में ईवेंट को बाध्य करने के बजाय, आप उन्हें किसी भी तत्व के दायरे में बाँध सकते हैं। ईवेंट ऑब्जेक्ट में प्रत्येक प्रविष्टि की कुंजी में ईवेंट और चयनकर्ता होते हैं, मान उस फ़ंक्शन को इंगित करता है जो उस ईवेंट के लिए बाध्य होना चाहिए। ध्यान दें कि .delegate() सबमिट जैसे कुछ ईवेंट के साथ काम नहीं करता है, समर्थित ईवेंट की पूरी सूची के लिए jQuery .live() दस्तावेज़ देखें।

प्रस्तुत करना: समारोह() {$(this.el).html(this.template()); this.image.fetch (); यह आकार (); इसे वापस करें;}

अंत में, हमारे पास .render() फ़ंक्शन है जो हमारे मार्कअप को बनाने और किसी भी अतिरिक्त कार्य को करने के लिए जिम्मेदार है जो तब तक नहीं किया जा सकता जब तक कि व्यू मार्कअप को व्यू एलिमेंट में नहीं जोड़ा जाता। अपना टेम्प्लेट प्रस्तुत करने के बाद, हमें अपने FlickrBombImage पर .fetch() को कॉल करना होगा। .fetch() एक बैकबोन फंक्शन है जो हठ परत से मॉडल की नवीनतम प्रति प्राप्त करता है। यदि हमने पहले इस मॉडल को सहेजा होता, तो .fetch() उस डेटा को अब पुनः प्राप्त कर लेता। छवि प्राप्त होने के बाद हमें इसे सही ढंग से स्थिति में लाने के लिए आकार बदलने की आवश्यकता है।

होम स्ट्रेच

सभी टुकड़ों के साथ, अब हमें केवल पृष्ठ पर प्लेसहोल्डर छवियों को ढूंढना है और उन्हें फ़्लिकरबॉम्ब इमेज दृश्यों के साथ बदलना है।

$("img[src^='flickr://']").each(function () { var img = $(this), flickrBombImageView = new FlickrBombImageView({img: img}); img.replaceWith(flickrBombImageView. रेंडर ()। एल);});

इस छोटे से टुकड़े को पृष्ठ के नीचे, या दस्तावेज़ तैयार कॉलबैक में चलाने की आवश्यकता है, यह सुनिश्चित करने के लिए कि यह प्लेसहोल्डर छवियों को ढूंढ सकता है जो इसे प्रतिस्थापित करेगा। हम फ़्लिकर को निर्दिष्ट करने की परंपरा का उपयोग करते हैं: // [कीवर्ड] एक छवि टैग की src विशेषता में यह इंगित करने के लिए कि इसे फ़्लिकर से छवियों के साथ पॉप्युलेट किया जाना चाहिए। हम मिलान करने वाले src विशेषता के साथ छवि तत्व ढूंढते हैं, एक नया FlickrBombImageView बनाते हैं, और फिर छवि को हमारे साथ बदलते हैं। हम मूल छवि की एक प्रति लेते हैं और इसे हमारे FlickrBombView को पास करते हैं, ताकि हम कुछ अतिरिक्त कॉन्फ़िगरेशन विकल्प खींच सकें जो कि तत्व पर निर्दिष्ट हो सकते हैं।

उस कड़ी मेहनत का अंतिम परिणाम पुस्तकालय का उपयोग करने वाले लोगों के लिए एक बहुत ही सरल एपीआई है। वे फ़्लिकर: // कन्वेंशन का उपयोग करके छवि टैग को आसानी से परिभाषित कर सकते हैं, फ़्लिकरबॉम्ब कोड को अपने पृष्ठ के नीचे छोड़ सकते हैं, और बेम, उन्हें फ़्लिकर से प्लेसहोल्डर छवियां मिली हैं।

बड़े पुराने वेब ऐप्स के साथ भी बढ़िया काम करता है

हमारे पास उल्लेखनीय नामक एक बड़ा ओएल वेब ऐप है, जिसे क्लाइंट-साइड सामग्री उत्पन्न करने की चिंता के बिना लिखा गया था। जब हम कंटेंट क्लाइंट साइड जनरेट करके ऐप टर्बो चार्ज के सेक्शन बनाना चाहते थे, तो हमने बैकबोन को चुना। कारण समान थे: हम कोड को व्यवस्थित रखने में मदद करने के लिए एक हल्का ढांचा चाहते थे, लेकिन हमें पूरे आवेदन पर पुनर्विचार करने के लिए मजबूर नहीं करना चाहते थे।

हमने इस साल की शुरुआत में बड़ी सफलता के साथ बदलाव किए, और तब से बैकबोन्स की प्रशंसा गा रहे हैं।

अतिरिक्त संसाधन

इस लेख में मैंने जो कवर किया है, उसकी तुलना में बैकबोन के लिए बहुत कुछ है, शुरुआत के लिए एमवीसी (मॉडल व्यू कंट्रोलर) का सी (नियंत्रक) भाग, जो वास्तव में नवीनतम संस्करण में एक आर (राउटर) है। और यह सब बैकबोन प्रलेखन में शामिल है, शनिवार की सुबह एक प्रकाश पढ़ा:
documentcloud.github.com/backbone/

यदि अधिक पारंपरिक ट्यूटोरियल आपकी चीज हैं, तो बैकबोन में लिखे गए इस टूडू एप्लिकेशन का बहुत अच्छी तरह से प्रलेखित कोड देखें:
documentcloud.github.com/backbone/docs/todos.html