परस्परसंवाद गतिमान करण्यासाठी बॅकबोन.जे वापरा

सामग्री

• चला तर मग प्रारंभ करूया
• आमचे पहिले मॉडेल
• प्रतिमांचा संग्रह
• फ्लिकरबॉम्बइमेज
• दृश्य स्तर
• फ्लिकरबॉम्बइमेज व्ह्यू
• होम स्ट्रेच
• मोठ्या ऑल वेब अ‍ॅप्ससह उत्कृष्ट कार्य करते
• अतिरिक्त संसाधने

आपण द्रुतपणे थोडे जावास्क्रिप्ट साधन तयार करण्याचा विचार करीत असाल तर आपण कदाचित फ्रेमवर्क वापरण्याचा विचार करत नाही आहात. नवीन फ्रेमवर्क स्थापित करण्याऐवजी काही jQuery कोड एकत्र खाचणे सोपे आहे, नाही का? राँग, बॅकबोन.जेएस एक सुपर लाइटवेट ग्लू फ्रेमवर्क आहे जो आपण लिहिण्यासाठी नेहमी वापरल्या जाणार्‍या नियमित जुने जावास्क्रिप्टप्रमाणे दिसते.

आम्ही येथे झुर्ब येथे बर्‍याच स्टॅटिक प्रोटोटाइप करतो, कारण कोणताही बॅकएंड कोड न लिहिता पृष्ठांवर क्लिक करण्यास आम्ही सक्षम होऊ इच्छितो. बर्‍याचदा, आम्ही डॅब ग्रे राखाडी प्लेसहोल्डर प्रतिमा खाली टाकतो किंवा काहीवेळा अंतिम मसुद्यात काय असू शकते याची कल्पना करण्यास मदत करण्यासाठी आम्ही नमुना प्रतिमेसाठी फ्लिकर शोधत जाऊ. हे एक जादूई शुक्रवार होईपर्यंत आहे, जेव्हा आम्ही निर्णय घेतला की आमच्या समस्या सोडविण्यासाठी काही जावास्क्रिप्ट लिहिणे छान होईल. आम्हाला फ्लिकरवर थेट प्लेसहोल्डरच्या प्रतिमांकडील फोटो शोधण्यात आणि ते निवडण्यात सक्षम व्हायचे होते. आम्ही याला फ्लिकरबॉम्ब म्हणू आणि आम्ही बॅकबोन.जेज वापरून हे कसे तयार केले त्याची कथा आहे.

वाचन करण्यापूर्वी आपण फ्लिकरबॉम्बवर द्रुत दृष्टीक्षेप घ्यावा अशी शिफारस केली जाते. हे त्यापैकी एक आहे "क्लिक म्हणजे एक हजार शब्दांचे मूल्य आहे" प्रकारचे सौदे. पुढे जा, आम्ही थांबलो.

आजकाल ब्लॉकवर स्प्राउटकोर, जावास्क्रिप्ट एमव्हीसी, स्पाइन, सॅमी, नॉकआउटवर जावास्क्रिप्ट फ्रेमवर्क आहेत. परंतु आम्हाला या विशिष्ट प्रकल्पासाठी काही वेगळ्या कारणांसाठी बॅकबोन.जे आवडले:

1. हे हलके आहे (खरं तर 100% फॅट-फ्री)

• वजनात, नवीनतम पॅक केलेली आवृत्ती सुमारे 4.6kb आहे
• कोडमध्ये, केवळ 1000 ओळींच्या कोडवरुन, आपले मत गमावल्याशिवाय इंटर्नल्समध्ये स्टॅक ट्रेसचे अनुसरण करणे फार कठीण नाही.

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

• कारण हे जावास्क्रिप्ट आहे, तेच आणि ते सर्व
• हे jQuery वापरते, जे आपल्या आजीलाही हे दिवस माहित आहे

3. सुपर सोपी चिकाटी

• बॉक्सच्या बाहेर तो डेटा बॅकएंडवर टिकून राहतो (आरईएसटी मार्गे), परंतु एका प्लग-इनमध्ये टाकल्यास त्याऐवजी स्थानिक स्टोरेजमध्ये बचत होईल.
• कारण ते चिकाटी एपीएसला दूर करते, आम्ही फक्त स्थानिक स्टोरेज प्लग-इन काढून टाकून आरईएसटी बॅकएंडवर टिकून राहू शकतो.

चला तर मग प्रारंभ करूया

कारण बॅकबोन.जेएस फक्त जावास्क्रिप्ट आहे, आपल्याला त्या पृष्ठावरील अंडरस्कोर.जेसह हे समाविष्ट करणे आवश्यक आहे. बॅकबोन प्रति से jQuery हे अवलंबित अवलंबित्व नाही, परंतु आम्ही ते वापरत आहोत म्हणून आम्ही त्याचा येथे समावेश करू. आम्ही स्थानिक संचयन प्लग-इन देखील दुवा साधू, कारण आम्हाला बॅकएंड सेट करण्यास त्रास होणार नाही. लक्षात घ्या की साध्यापणासाठी येथे फायली थेट दुवा साधत होते परंतु आपण उत्पादनांमध्ये स्वतःची मालमत्ता नेहमीच होस्ट केली पाहिजे.

स्क्रिप्ट src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"> / स्क्रिप्ट> स्क्रिप्ट src = "http://docamentcloud.github.com/backbone/ backbone-min.js "> / स्क्रिप्ट> स्क्रिप्ट src =" http://docamentcloud.github.com/underscore/underscore-min.js "> / स्क्रिप्ट> स्क्रिप्ट src =" https://raw.github.com/ jeromegn / Backbone.localStorage / master / backbone.localStorage-min.js "> / स्क्रिप्ट>

या लेखामधील सर्व खालील कोड आमच्या अनुप्रयोगासाठी विशिष्ट आहेत, म्हणून आम्ही त्यास एखाद्या अ‍ॅप.जेएस फाइलमध्ये समाविष्ट करू शकतो किंवा ती आपली गोष्ट असल्यास फक्त इनलाइन समाविष्ट करू शकतो. हे फक्त बॅकबोन नंतर समाविष्ट करण्याचे लक्षात ठेवा. बॅकबोन आमच्या अनुप्रयोगाचा काही भाग अमूर्त करण्यास, त्या दोहोंसाठी पुन्हा वापरण्यास सुलभ आणि इतरांसाठी वाचनीय बनविण्यासाठी सक्षम करते. त्या अमूर्ततेचे उत्कृष्ट वर्णन करण्यासाठी, फ्लिकरबॉम्बचे डिझाईन तळापासून वरपर्यंत सांगत होते, मॉडेलपासून प्रारंभ करुन, दृश्यांसह समाप्त.

आमचे पहिले मॉडेल

प्रथम कार्य सामोरे जायचे होते ते म्हणजे फ्लिकरमधील फोटो खेचणे. बॅकबोनमध्ये फ्लिक्रीमेजचे मॉडेलिंग करणे सोपे आहे, आम्ही फ्लिक्रॅमॅमेझ नावाचे एक नवीन मॉडेल तयार करू आणि भिन्न आकारातील अंगठे मिळविण्यात मदत करण्यासाठी काही पद्धती जोडा.

var फ्लिक्रिमेज = बॅकबोन.मॉडेल.एक्सएंड ({फुलसाइज_उर्ल: फंक्शन () {हे आयमाइज_उर्ल ('मध्यम') परत करा आकार) {var आकार_कोड; स्विच (आकार) {केस 'स्क्वेअर': आकार_कोड = '_ एस'; ब्रेक; // 75x75 केस 'मध्यम': आकार_कोड = '_z'; ब्रेक; // 640 सर्वात लांब बाजूच्या प्रकरणात 'मोठा ': आकार_कोड =' _बी '; ब्रेक; // 1024 प्रदीर्घ बाजूच्या डीफॉल्टवर: आकार_कोड =' ';} परत "http: // فارم" + this.get (' फार्म ') + ".static.flickr.com / "+ this.get ('सर्व्हर') +" / "+ this.get ('id') +" _ "+ हे.ेट ('सीक्रेट') + आकार_कोड +" .webp ";}})

बॅकबोनमधील मॉडेल्स अशी वस्तू आहेत जी टिकून राहू शकतात आणि त्यांच्याशी काही कार्ये संबंधित असतात जसे की इतर एमव्हीसी फ्रेमवर्कमधील मॉडेलसारखे. बॅकबोन मॉडेल्सचा जादूचा भाग म्हणजे आम्ही इव्हेंटला गुणधर्मांशी बांधू शकतो, जेणेकरून जेव्हा हे गुणधर्म बदलते तेव्हा आम्ही त्या दर्शविण्यासाठी आपले मत अद्यतनित करू शकतो. पण आम्ही स्वतःहून थोड्या पुढे आहोत.

जेव्हा आम्ही फ्लिकरवरील फोटो खेचतो, तेव्हा आम्हाला सर्व आकारांसाठी URL तयार करण्यासाठी पुरेशी माहिती मिळणार आहे. तथापि, विधानसभा आमच्याकडे राहिली आहे, म्हणून आम्ही .image_url () फंक्शन लागू केले जे आकार मापदंड घेते आणि सार्वजनिक लिंक परत करते. हे एक कणा मॉडेल आहे म्हणूनच, आम्ही मॉडेलवरील विशेषतांमध्ये प्रवेश करण्यासाठी हे .get () वापरू शकतो. तर या मॉडेलसह, आम्ही फ्लिकर प्रतिमेची URL मिळविण्यासाठी कोडमध्ये इतरत्र देखील करू शकतो.

फ्लिकरआयमेज.इमेज_उर्ल (’मोठे’)

खूप संक्षिप्त, होय? हे मॉडेल आमच्या अनुप्रयोगासाठी विशिष्ट असल्याने आम्ही संपूर्ण आकार आणि थंब प्रतिमा आकारासाठी काही रॅपर फंक्शन्स जोडू.

प्रतिमांचा संग्रह

फ्लिकरबॉम्ब एकल प्रतिमा नसून प्रतिमांच्या संग्रहात काम करतो आणि बॅकबोनला हे मॉडेलिंग करण्यासाठी सोयीस्कर मार्ग आहे. योग्य नावाचा संग्रह म्हणजे आम्ही एकाच प्लेसहोल्डरसाठी फ्लिकर प्रतिमा एकत्रित करण्यासाठी वापरु.

var फ्लिकरिमेजेस = बॅकबोन.कलेक्शन.एक्सएंड ({मॉडेल: फ्लिकरइमेज, की: फ्लिकरॉम्बॅपीआयके, पृष्ठ: 1, प्राप्त करा: कार्य (कीवर्ड्स, यश) self वर सेल्फ = हे; यश = यश || no. नूप; हे.कीवर्ड्स = कीवर्ड || this.keyवर्ड; aj .Jax ({url: 'http://api.flickr.com/services/rest/', डेटा: {api_key: self.key, format: 'json', पद्धत: 'फ्लिकर. फोटो.सर्च ', टॅग्ज: this.keyवर्ड्स, प्रति_पृष्ठ: 9, पृष्ठ: this.page, परवाना: flickrbombLicenseType}, डेटाटाइप:' jsonp ', jsonp:' jsoncallback ', यश: कार्य (प्रतिसाद) {self.add (प्रतिसाद) .फोटोस.फोटो); यश ();}});}, नेक्स्टपेज: फंक्शन (कॉलबॅक) {हे.पृष्ठ + = 1; हे.मोरेव्ह (हे.मोडेल्स); हे.फेच (शून्य, कॉलबॅक);}, prevPage: फंक्शन (कॉलबॅक) {if (हे.पृष्ठ> 1). this.page - = 1;} this.remove (this.models); this.fetch (शून्य, कॉलबॅक);}});

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

इथली मोठी पद्धत .fetch () आहे जी फ्लिकर एपीआय वरून फोटो पुलिंगचा तपशील दूर करते. क्रॉस-डोमेन विनंत्यांसह समस्या टाळण्यासाठी, आम्ही जेएसओएनपी वापरत आहोत, जे फ्लिकर एपीआय आणि जेक्यूरी दोन्ही समर्थन देतात. आम्ही API वर अन्य पॅरामीटर्स स्वयं स्पष्टीकरणात्मक असावे. विशेष म्हणजे बॅकबोन फंक्शन्स येथे कॉल केल्या जातात. सक्सेस कॉलबॅकमध्ये आम्ही .add () वापरत आहोत, एक असे फंक्शन जे मॉडेल एट्रिब्यूटचा अ‍ॅरे घेते, त्या अ‍ॅक्ट्रिब्यूट्स मधून मॉडेल इन्स्टान्स तयार करते आणि नंतर त्यास कलेक्शनमध्ये जोडते.

.NextPage () आणि .prevPage () कार्ये प्रथम आम्ही प्रदर्शित करू इच्छित असलेले पृष्ठ बदलतात,
वरून विद्यमान सर्व मॉडेल्स काढण्यासाठी संग्रह कार्य वापरा. ​​(हटवा) वर काढा
वर्तमान पृष्ठासाठी फोटो मिळविण्यासाठी संग्रह आणि नंतर फोन आणा (आम्ही फक्त
बदलले).

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

आमच्या बॅक अप मार्गावर कार्य करत असताना, प्लेसहोल्डर प्रतिमेचे प्रतिनिधित्व करण्यासाठी आम्हाला आणखी एक मॉडेल आवश्यक आहे, ज्यामध्ये फ्लिकरिमेजचा संग्रह आणि निवडलेली निवडलेली फ्लिक्रिमेज असेल. आम्ही या मॉडेलला फ्लिकरबॉम्बइमेज म्हणतो.

var लोकल स्टोरेज = (सपोर्ट_लॉकल_स्टोरेज ())? नवीन स्टोअर ("फ्लिकरबॉम्बइमेजेस"): शून्य; var फ्लिकरबॉम्बइमेज = बॅकबोन.मॉडेल.एक्सेंड ({लोकल स्टोरेज: लोकल स्टोरेज, इनिशिएलाइझ: फंक्शन () {_.बिंडल (हे, 'लोडफर्स्टइमेज'); हे.फ्लिकरमेजेस = नवीन फ्लिकरमेजेस (); this.flickrImages.fetch (this.get ('कीवर्ड्स'), this.लोडफर्स्टइमेज); हे.सेट (id: this.get ("id")); this.bind ('change: src', this.changeSrc) ;}, changeSrc: फंक्शन () {this.save (); load, लोडफर्स्टइमेजः फंक्शन () {if (this.get ('src') === अपरिभाषित) {this.set ({src: this.flickrImages. प्रथम (). image_url ()});}}});

हे मॉडेल पृष्ठ लोड दरम्यान सध्या निवडलेल्या प्रतिमेचा मागोवा ठेवण्यास जबाबदार असल्याने, लोकल स्टोरेज काय वापरावे हे माहित असणे आवश्यक आहे.प्रथम ओळ लोकल स्टोअरेजसाठी समर्थन असल्याचे सुनिश्चित करेल आणि नंतर निवडलेली प्रतिमा टिकवण्यासाठी आम्ही स्टोअर तयार करू.

बॅकबोन आम्हाला एक .initialize () फंक्शन परिभाषित करण्यास अनुमती देते जे मॉडेलचे उदाहरण तयार होते तेव्हा म्हटले जाईल. आम्ही फ्लिकरबॉम्बइमेजमध्ये हे फंक्शन फ्लिकरबामेज संकलनाची नवीन घटना तयार करण्यासाठी वापरतो, या प्रतिमेसाठी वापरल्या जाणार्‍या कीवर्डला पास करा आणि नंतर फ्लिकरमधून प्रतिमा आणू.

फ्लिकरवरून प्रतिमा लोड केल्यावर .लोडफर्स्टइमेज () फंक्शन चालण्यासाठी कॉलबॅक म्हणून दिले गेले आहे. जसे आपण अंदाज लावू शकता, हे कार्य सध्याची प्रतिमा फ्लिकरमधील संग्रहातील प्रथम असलेली सेट करते. सध्याची प्रतिमा आधीपासून सेट केली असल्यास हे असे करत नाही.

जेव्हा आम्ही या मॉडेलचा एसआरसी गुणविशेष बदलतो तेव्हा आम्ही आमचा .ચેन्च एसआरसी () फंक्शन काढून टाकण्यासाठी बॅकबोनचे विशेषता कॉलबॅक देखील वापरणार आहोत. हे सर्व कॉलबॅक म्हणजे कॉल .save (), एक बॅकबोन मॉडेल फंक्शन आहे जे मॉडेलचे गुणधर्म कायम ठेवते जे स्टोअर लेयर लागू केले गेले आहे (आमच्या बाबतीत लोकल स्टोअरमध्ये). या मार्गाने, जेव्हा जेव्हा निवडलेली प्रतिमा बदलली जाते, तेव्हा ती त्वरित कायम राहते.

दृश्य स्तर

आता आपल्याकडे सर्व बॅकएंड (बरं, फ्रंटएन्ड बॅकएंड) कोड लिहिला आहे, त्यामुळे आम्ही व्ह्यूज एकत्र ठेवू शकतो. इतर पारंपारिक एमव्हीसी फ्रेमवर्कमधील बॅकबोनमधील दृश्ये थोडी वेगळी आहेत. दृश्यासाठी केवळ सादरीकरणाशीच संबंधित असते, तर बॅकबोन व्ह्यू देखील वर्तनासाठी जबाबदार असते. याचा अर्थ असा आहे की आपले दृश्य केवळ काहीतरी कसे दिसते तेच परिभाषित करत नाही तर संवाद साधताना काय केले पाहिजे हे देखील परिभाषित करते.

दृश्य सामान्यपणे (परंतु नेहमीच नसते) काही डेटाशी बांधलेले असते आणि त्या डेटामधून प्रेझेंटेशन मार्कअप व्युत्पन्न करण्यासाठी तीन टप्प्यांमधून जातात:

1. व्ह्यू ऑब्जेक्ट आरंभ केला आहे आणि रिक्त घटक तयार केला आहे.
२. रेंडर फंक्शनला म्हणतात, मागील टप्प्यात तयार केलेल्या एलिमेंटमध्ये समाविष्ट करून दृश्यासाठी मार्कअप तयार करते.
3. घटक डीओएमशी जोडलेले आहेत.

हे कदाचित काही मार्कअप व्युत्पन्न करण्यासाठी बरेच काम वाटू शकते आणि आम्ही अद्याप दृश्याच्या वर्तन भागाकडे देखील नाही, परंतु ते महत्वाचे आहे, आणि म्हणूनच. प्रत्येक वेळी जेव्हा आपण डोममध्ये असलेले घटक सुधारित करता तेव्हा आपण ब्राउझर रीफ्लो नावाचे काहीतरी ट्रिगर करता. रिफ्लो म्हणजे ब्राउझरचे पृष्ठावरील प्रत्येक वस्तू कशा स्थितीत असतात हे पुन्हा मोजणे. ड्रॅग किंवा रीसाइझ इव्हेंटमध्ये कॉल केला तर अगदी कमी अंतरावर आग लागल्यास ब्राउझर रीफ्लो करणे कार्यक्षमतेसाठी खराब असू शकते, परंतु त्याहून वाईट म्हणजे ते सुस्त दिसत आहेत. जटिल पृष्ठ हाताळणीसह आपण पृष्ठामध्ये घटक जोडले जाणे आणि प्रभावी घटकांचे पुनर्स्थित करणे पाहू शकता. बॅकबोनच्या आरंभ, रेंडर आणि अॅटॅचच्या पद्धतीनुसार आपण एकाच रीफ्लोची हमी देता आणि तत्सम हाताळणीच्या अवघडपणाकडे दुर्लक्ष करून पृष्ठावरील बदल समजूतदारपणे त्वरित येतील.

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

var फ्लिकरबॉम्बइमेजव्यू = बॅकबोन.व्ह्यू.एक्सएंड ({टॅगनेम: "डिव्ह", क्लासनेम: "फ्लिकरबॉम्बकॉन्टेनर", लॉक: खोटा, टेम्पलेट: _.template ('div id = "% = this.image.id.replace (" ", "")%> "... / div> '), आरंभ करा: फंक्शन (पर्याय). _.bindAll (हे,' Iडमेज ',' updateSrc ',' setDimetions ',' updateDimetions '); var कीवर्ड्स = पर्याय. img.attr ('src') .replace ('flickr: //', ''); हे.. el = $ (this.el); this.image = नवीन फ्लिकरबॉम्बइमेज ({कीवर्ड: कीवर्ड, आयडी: पर्याय) img.attr ('id')}); this.image.flickrImages.bind ('जोडा', this.addImage); this.image.bind ('बदला: src', this.updateSrc);}, कार्यक्रम: { "क्लिक करा .सेटअपआयकॉन": "क्लिक सेटअप", "क्लिक करा .फ्लिकरबॉम्बफ्लायट ए.फोटो": "सिलेक्टइमॅग्ज", "क्लिक करा. फ्लिकरबॉम्बफ्लायट ए.एन्क्स्ट": "नेक्स्ट फ्लिकरफोटोस", "क्लिक करा. फ्लिकरबॉम्बफ्लायट ए.प्रेव्ह": "प्रॉप्लिकफोटो"}, प्रस्तुत करा: कार्य () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); हे परत द्या;}, ...});

या दृश्याची कार्ये ब्रेव्हिटीसाठी वगळली गेली आहेत, संपूर्णपणे स्त्रोत कोड गिटहब वर उपलब्ध आहे: github.com/zurb/flickrbomb

दृश्याच्या शीर्षस्थानी, आमच्याकडे काही बॅकबोन विशिष्ट वैशिष्ट्ये आहेत. टॅगनाव आणि वर्गनाव या दृश्याच्या घटकांवर लागू केले जाणारे टॅग आणि वर्ग परिभाषित करण्यासाठी वापरले जातात. लक्षात ठेवा की दृश्य निर्मितीतील एक चरण एक ऑब्जेक्ट तयार करीत आहे आणि ती निर्मिती बॅकबोनने हाताळली असल्याने आम्हाला घटक आणि वर्ग निर्दिष्ट करणे आवश्यक आहे. लक्षात घ्या की बॅकबोनला समजूतदार डीफॉल्ट आहेत; आम्ही हे गुणधर्म वगळल्यास डीफ डीफॉल्टनुसार वापरले जाते आणि आपण निर्दिष्ट केल्याशिवाय कोणताही वर्ग लागू केला जाणार नाही.

टेम्पलेट विशेषता एक अधिवेशन आहे, परंतु आवश्यक नाही. आम्ही या दृश्यासाठी आमचे मार्कअप व्युत्पन्न करण्यासाठी जावास्क्रिप्ट टेम्पलेट फंक्शन निर्दिष्ट करण्यासाठी येथे वापरत आहोत. आम्ही अंडरसोर.जेएस मध्ये समाविष्ट केलेल्या _.टेम्पलेट () फंक्शनचा वापर करतो, परंतु आपण ज्या टेंप्लेटिंग इंजिनला प्राधान्य देता ते आपण वापरू शकता, आम्ही आपला न्याय करणार नाही.

आमच्या .initialize () फंक्शनमध्ये आम्ही इमेज टॅगमधून कीवर्डची स्ट्रिंग काढत आहोत आणि मग ते कीवर्ड वापरून फ्लिकरबॉम्बइमेज मॉडेल तयार करीत आहोत. फ्लिक्रॅमेजेस संग्रहात फ्लिकर्यॅमॅशन्स जोडली जाईल तेव्हा चालवण्याकरिता आम्ही .addImage () फंक्शन देखील बंधनकारक करतो. हे फंक्शन आमच्या इमेज सिलेक्टर फ्लायआऊटमध्ये नवीन जोडलेले फ्लिकरॅमॅजेस जोडेल. सध्या निवडलेली फ्लिकरॅमॅजिमेंट बदलली असता शेवटची आणि सर्वात महत्वाची ओळ .updateSrc () फंक्शनला फायर करण्यास बांधली जाते. जेव्हा मॉडेलमध्ये सद्य प्रतिमा बदलली जाईल, तेव्हा हे कार्य चालू होईल, प्रतिमा घटकांचे एसआरसी विशेषता अद्यतनित करेल आणि वापरकर्त्याने निर्दिष्ट केलेल्या प्रतिमेच्या आकारात सीएसएस आकार बदलू आणि प्रतिमा क्रॉप करेल.

इव्हेंट्स:. "क्लिक .सेटअपआयकॉन": "क्लिक सेटअप", "क्लिक करा. फ्लिकरबॉम्बफ्लायट ए.फोटो": "सिलेक्टइमेश", "क्लिक करा. फ्लिकरबॉम्बफ्लायट ए.एन्क्स्ट": "नेक्स्टफ्लिकरफोटो", "क्लिक करा .फ्लिकरबॉम्बफ्लायट ए.प्रेव्ह": "प्रॉप्लिकफोटोस" "}

.Initialize () चे अनुसरण करून आमच्याकडे दृश्याचा वर्तन भाग आहे. बॅकबोन इव्हेंट ऑब्जेक्टचा वापर करून इव्हेंट्सना बांधण्यासाठी सोयीचा मार्ग प्रदान करतो. इव्हेंट ऑब्जेक्ट व्ह्यू घटकास वास्तविक बंधनकारक करण्यासाठी jQuery .delegate () पद्धत वापरते, जेणेकरून आपण दृश्यामध्ये असलेल्या घटकाशी कोणतीही कुशलतेने कार्य करता, तरीही आपल्या सर्व बाउंड इव्हेंट्स कार्य करतील. हे jQuery .live () प्रमाणेच कार्य करते, त्याऐवजी इव्हेंट्सला संपूर्ण दस्तऐवजावर बंधन घालण्याऐवजी आपण त्यास कोणत्याही घटकाच्या दालनात बांधू शकता. इव्हेंट ऑब्जेक्टमधील प्रत्येक प्रविष्टीची की इव्हेंट आणि निवडकर्ता असते, मूल्य त्या घटनेस सूचित करते जे त्या कार्यक्रमास बंधनकारक असावे. लक्षात ठेवा की .delegate () सबमिट सारख्या काही इव्हेंटसह कार्य करत नाही, समर्थित इव्हेंटच्या पूर्ण सूचीसाठी jQuery .live () दस्तऐवजीकरण पहा.

प्रस्तुत करा: कार्य () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); हे परत करा;

शेवटी, आमच्याकडे .reender () फंक्शन आहे जे आमच्या मार्कअप तयार करण्यासाठी आणि व्यू व्यू घटकात व्यू मार्कअप जोपर्यंत जोपर्यंत करता येणार नाही असे कोणतेही अतिरिक्त काम करण्यास जबाबदार आहे. आम्ही आपले टेम्पलेट प्रस्तुत केल्यानंतर आमच्या फ्लिकरबॉम्बइमेजवर .fetch () वर कॉल करणे आवश्यक आहे. .fetch () हे बॅकबोन फंक्शन आहे ज्यास पर्सिस्टंट लेयरमधून मॉडेलची नवीनतम प्रत मिळते. आम्ही आधी हे मॉडेल जतन केले असते तर .fetch () आता तो डेटा पुनर्प्राप्त करेल. प्रतिमा आणल्यानंतर आम्हाला त्यास योग्य स्थितीत ठेवण्यासाठी आकार बदलण्यासाठी कॉल करणे आवश्यक आहे.

होम स्ट्रेच

सर्व तुकड्यांच्या जागी, आता आपल्याला फक्त पृष्ठावरील प्लेसहोल्डर प्रतिमा शोधणे आणि त्या प्रस्तुत केलेल्या फ्लिकरबॉम्बइमेज दृश्यांसह पुनर्स्थित करणे आवश्यक आहे.

$ ("img [src ^ = 'फ्लिकर: //']") .आच (फंक्शन () {var img = $ (हे), फ्लिकरबॉम्बइमेज व्ह्यू = नवीन फ्लिकरबॉम्बइमेज व्ह्यू ({img: img}); img.replaceWith (फ्लिकरबॉम्बइमेज व्ह्यू). रेंडर (). एल);});

हे बदलण्यासाठी पृष्ठाच्या तळाशी किंवा कागदजत्र तयार कॉलबॅकमध्ये चालविणे आवश्यक आहे ज्यामुळे ते पुनर्स्थित करेल प्लेसहोल्डर प्रतिमा शोधू शकतील. फ्लिकरमधील प्रतिमांसह पॉप्युलेटेड असावे हे दर्शविण्यासाठी आम्ही प्रतिमा टॅगच्या src विशेषता मध्ये फ्लिकर: // [KEYWORD] निर्दिष्ट करण्याचे अधिवेशन वापरतो. आम्हाला जुळणारे एसआरसी विशेषता असलेले प्रतिमा घटक सापडतात, एक नवीन फ्लिकरबॉम्बइमेज व्ह्यू तयार करा आणि नंतर आमच्यासह प्रतिमेची जागा घ्या. आम्ही मूळ प्रतिमेची एक प्रत हस्तगत करतो आणि ती आमच्या फ्लिकरबॉमव्यूव्हवर पाठवितो, जेणेकरून आम्ही घटकांवर निर्दिष्ट केलेले काही अतिरिक्त कॉन्फिगरेशन पर्याय खेचू शकू.

त्या सर्व परिश्रमांचा शेवटचा परिणाम म्हणजे लायब्ररी वापरणार्‍या लोकांसाठी एक अगदी सोपी एपीआय. ते फक्त फ्लिकरः // कन्व्हेन्शन वापरून प्रतिमा टॅग परिभाषित करू शकतात, त्यांच्या पृष्ठाच्या तळाशी फ्लिकरबॉम्ब कोड ड्रॉप करा आणि तथापि, त्यांना फ्लिकरमधून प्लेसहोल्डर प्रतिमा मिळाल्या आहेत.

मोठ्या ऑल वेब अ‍ॅप्ससह उत्कृष्ट कार्य करते

आमच्याकडे नोटबॉल नावाचे एक मोठे ओएल वेब अॅप आहे जे सामग्री क्लायंट-साइड तयार करण्याबद्दल काळजी न घेता लिहिलेले होते. जेव्हा आम्हाला सामग्री क्लायंटची बाजू तयार करुन अ‍ॅप टर्बोचे काही भाग आकारायचे होते, तेव्हा आम्ही बॅकबोन निवडले. कारणे सारखीच होतीः कोड व्यवस्थित ठेवण्यात मदत करण्यासाठी आम्हाला हलके फ्रेमवर्क हवे होते, परंतु संपूर्ण अनुप्रयोगाचा पुनर्विचार करण्यास भाग पाडले नाही.

आम्ही या वर्षाच्या सुरुवातीच्या काळात बदल यशस्वीरित्या सुरू केले आणि तेव्हापासून बॅकबॉन्सचे गुणगान गात आहोत.

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

या लेखात मी कव्हर केले त्यापेक्षा बॅकबोनसाठी बरेच काही आहे, स्टार्टर्ससाठी एमव्हीसीचा सी (कंट्रोलर) भाग (मॉडेल व्ह्यू कंट्रोलर), जो नवीनतम आवृत्तीमध्ये प्रत्यक्षात आर (राउटर) आहे. आणि हे सर्व बॅकबोन दस्तऐवजीकरणात झाकलेले आहे, शनिवारी पहाटे एक प्रकाश वाचाः
डॉक्युमेंटक्लाउड.github.com/backbone/

जर अधिक पारंपारिक शिकवण्या तुमची असतील तर बॅकबोनमध्ये लिहिलेल्या या टूडो ofप्लिकेशनचा अगदी चांगला कागदपत्र असलेला कोड पहा:
डॉक्युमेंटक्लाउड.github.com/backbone/docs/todos.html