👨🏼 🚤 🐜 डमियों के लिए बैकबोन.जेएस ⏲️ 🚙 🚺

देर शाम, मुझे Backbone.js का अध्ययन करने और इसे पहले से ही jQuery में लिखी गई सेवा से जोड़ने का विचार आया। सेवा पहले से ही गंभीरता से विस्तारित हो गई है और मैं क्लिक, अनुरोध और तर्क संचालकों के इस ढेर से थक गया हूं। इसलिए, मैं एक आधिकारिक स्कूल के दस्तावेज में चढ़ गया। लेकिन या तो मैं बेवकूफ हूं, या मेरी अंग्रेजी ने मुझे, या दोनों को एक साथ छोड़ दिया है, लेकिन मैं लानत की बात नहीं समझ रहा हूं। मैंने इसे दूसरी बार पढ़ा, ध्यान से, और विशेष रूप से उपहार के लिए स्थानों पर मैंने Google अनुवाद का उपयोग किया। मैंने ToDo List का उदाहरण भी पढ़ा। सब कुछ स्पष्ट लग रहा था, बिल्कुल जब तक मैंने लिखना शुरू नहीं किया। जिसके बाद मैंने इस लाइब्रेरी में जो कुछ भी पाया, सब कुछ अंग्रेजी और अनुवाद दोनों में लिया। दस्तावेज़ीकरण का एक गुच्छा पढ़ने के बाद, मैंने फैसला किया कि अब मैं सब कुछ समझ गया। मैंने तंज किया, लेकिन ... एक पत्थर का फूल मास्टर दानीला से नहीं निकला, यानी। यह निकला, लेकिन यह स्पष्ट रूप से एक फूल नहीं था, और पत्थर किसी भी तरह से गलत गंध आ रही थी। फिर, एक मेहनती छात्र के रूप में, मैंने खरोंच से "हैलो, ~~किटी~~ वर्ल्ड" लिखने का फैसला किया। टिप्पणी करते हुए और hg में चरणों को सहेजते हुए, मुझे विशेष रूप से मेरे जैसे उपहार वाले लोगों के लिए बैकबोन.जेएस ढांचे का परिचय मिला।

टास्क।

हम एक साधारण समस्या चुनते हैं। हैलो लिखो, विश्व? बहुत सरल है, बस नमस्ते, <नाम> लिखना पसंद है। क्या हम प्राधिकरण और ऑफलाइन स्टोरेज के साथ GTD क्लाइंट लिख सकते हैं? यह पहले से ही मौजूद है और यह हमारी "रीढ़ की हड्डी" को समझने में मदद नहीं करता है। चलो इसे आसान बनाते हैं। 3 राज्यों के साथ एक पेज बनाएँ। पहले राज्य में, व्यक्ति उपयोगकर्ता नाम में प्रवेश करता है, दूसरे राज्य में उसे बधाई दी जाती है यदि दर्ज नाम पाया जाता है, तीसरे राज्य में यदि नाम नहीं मिला तो वे परेशान हैं। मेरी राय में, यह कार्य अधिक प्रशिक्षण है और कहीं भी आसान नहीं है, और सामान्य तौर पर आपको लगभग हर चीज को देखने और जांचने की अनुमति होगी जो कि बैकऑन में है।

हम सभी चरणों को भाड़े के माध्यम से बचाएंगे। इसलिए, किसी भी चरण को पढ़ना, आप ज़िप संग्रह (+ ड्रॉपबॉक्स , यदि लोग इसे हटाते हैं) को अनज़िप कर सकते हैं, निर्देशिका में जा सकते हैं और कमांड का उपयोग करके वांछित संशोधन पर जा सकते हैं

hg update --rev < >

फिर कोड को देखें और समझें कि आप क्या समझते हैं :)

चरण 0. संरचना और पैटर्न (संशोधन 0)

हम एक शैक्षणिक संरचना का उपयोग करेंगे, जैसे कि चित्र में। मैं स्वीकार करता हूं, मुझे नहीं पता कि इस पवित्र गोली के लेखक कौन हैं, जिनसे मैंने इस गाय को पाला है, लेकिन मैं इसे सभी खाली स्थानों में उपयोग करता हूं। एक index.html फ़ाइल। शैलियाँ css फ़ोल्डर में हैं, चित्र i फ़ोल्डर में हैं, स्क्रिप्ट js में हैं। उसी समय, हम स्क्रिप्ट्स में jquery, अंडरस्कोर और बैकबोन स्क्रिप्ट छोड़ते हैं।
Html टेम्पलेट एक खाली पृष्ठ है। यानी खाली शरीर और जुड़े स्क्रिप्ट और शैली के साथ पृष्ठ।
यानी जैसा कि आप देख सकते हैं, कुछ आधुनिक जावास्क्रिप्ट mvc चौखटे के विपरीत, परियोजना को विशेष तैयारी की आवश्यकता नहीं है, इसलिए एक मौजूदा परियोजना रीढ़ पर "फिर से लिखा जा सकता है"।

चरण 1। प्रारंभिक लेआउट (Rev 1)

हमारे पृष्ठ, कार्य के अनुसार, 3 राज्य होने चाहिए: एक उपयोगकर्ता नाम दर्ज करें, एक सफल तुलना के साथ एक राज्य, एक असफल तुलना वाला राज्य। शुरू करने के लिए, हम 3 divas बनाते हैं, इसके स्थान पर प्रत्येक राज्य।

 <div id="start" class="block"> <div class="userplace"> <label for="username"> : </label> <input type="text" id="username" /> </div> <div class="buttonplace"> <input type="button" value="" /> </div> </div> <div id="error" class="block">     . </div> <div id="success" class="block">  . </div>

सीएसएस के साथ आंखों से # शेर और # असफल ब्लॉक छिपाएं।

 #error, #success { ... display: none; }

इस कदम पर, हमने रीढ़ की हड्डी के कार्यान्वयन के लिए पूरी तरह से तैयार किया है। ये चरण कई एकल-पृष्ठ साइट कार्यान्वयन के लिए समान हैं।

चरण 2. रूटर लागू करें (2 रेव)

0.5.0 से पहले, इस वर्ग को नियंत्रक कहा जाता था। इसका उद्देश्य अनुप्रयोग में नेविगेशन के हैश को संभाल रहा है। यानी यह नियंत्रक द्वारा कभी भी पूरी तरह से समझा नहीं गया था, बस हैश नेविगेशन अनुप्रयोग नियंत्रक है। यह देखा जा सकता है कि डेवलपर्स के तर्क ने ऊपरी हाथ प्राप्त कर लिया है और अब हमारे पास राउटर वर्ग है।
स्थान क्या है। यह, इसके लिए क्या उपयोग किया जाता है, और इसे सही तरीके से कैसे उपयोग किया जाए आप हब ( यहां , यहां या यहां ) पर पढ़ सकते हैं।

शुरू करने के लिए, थोड़ी देर के लिए हम index.html में एक impromptu मेनू बनाएंगे

 <div id="menu"> <!--   --> <ul> <li><a href="#!/">Start</a></li> <li><a href="#!/success">Success</a></li> <li><a href="#!/error">Error</a></li> </ul> </div>

और फिर कलाई के एक गुच्छे के साथ हम एक उदाहरण के लिए रूटिंग कार्य को जोड़ते हैं:

 var Controller = Backbone.Router.extend({ routes: { "": "start", //  hash- "!/": "start", //   "!/success": "success", //   "!/error": "error" //   }, start: function () { $(".block").hide(); //    $("#start").show(); //   }, success: function () { $(".block").hide(); $("#success").show(); }, error: function () { $(".block").hide(); $("#error").show(); } }); var controller = new Controller(); //   Backbone.history.start(); //  HTML5 History push

इस सरल कोड के साथ, हमने पृष्ठों को बुकमार्क करने की क्षमता के साथ सबसे सरल टैब-उन्मुख वेबसाइट बनाई।

चरण 3. सबसे सरल दृश्य (Rev 3)

बैकबोन में देखें नियंत्रक का एक मिश्रण है और मानक एमवीसी मॉडल से देखें। यह बस कहा जा सकता है, यहां देखें एक पृष्ठ पर एक विजेट / घटक है जो खुद को प्रदर्शित कर सकता है, घटनाओं का जवाब दे सकता है और घटनाओं को बना सकता है। आइए आशा करते हैं कि निर्माता इसके बारे में सोचते हैं और व्यू टू विदागेट (या घटक) का नाम बदलते हैं, जैसा कि उन्होंने पहले राउटर के साथ किया था।
हमारे पास एक स्थापित उपयोगकर्ता नाम सत्यापन विजेट है, यह स्टार्ट ब्लॉक है। आइए सुनिश्चित करें कि यदि "परीक्षण" नाम दर्ज किया गया है, तो हम हैश टैग #! / सफलता पर स्विच करेंगे, जो सफलता ब्लॉक दिखाएगा। और अगर कुछ और दर्ज किया जाता है, तो हम हैश टैग #! / त्रुटि से गुज़रेंगे, जो त्रुटि ब्लॉक दिखाएगा। वैसे, एक ही समय में हम मेनू को हटा देंगे, हमें अब इसकी आवश्यकता नहीं होगी।

 var Start = Backbone.View.extend({ el: $("#start"), // DOM  widget' events: { "click input:button": "check" //     "" }, check: function () { if (this.el.find("input:text").val() == "test") //   controller.navigate("success", true); //    success else controller.navigate("error", true); //    error } }); var start = new Start();

वैसे, क्या आपने देखा कि परिणाम पृष्ठ पर जाने के बाद, आप सुरक्षित रूप से बैकस्पेस बटन पर क्लिक करके वापस जा सकते हैं? यह नेविगेशन के हैश का जादू है।

Remarque। JQuery का रास्ता (Rev 4)

क्या आपने देखा है कि हम पहले से ही कितना कोड लिख चुके हैं? मुझे ऐसा लगता है, जो लोग इस प्रस्ताव को पढ़ चुके हैं उनमें से कई को ~~कॉग्नेक~~ एक्सक्लूसिव ~~मिलेगा~~ : "यह jQuery पर तेजी से और आसानी से किया जाता है।" मैं बहस नहीं करता। प्रारंभिक लेआउट में आपको जो कोड लिखना है वह बहुत सरल है:

  $("#start input:button").click(function () { //    var username = $("#username").val(); //     $("#start").hide(); //    if (username == "test") $("#success").show(); //   else $("#error").show(); //   });

लेकिन ... यह कोड हैश नेविगेशन का समर्थन नहीं करता है, खराब तरीके से फैलता है और बहुत खराब तरीके से समर्थित है।
यह कोई रहस्य नहीं है कि अपने काम में एक प्रोग्रामर केवल 20% समय के लिए नए एप्लिकेशन बना रहा है। अपने समय का 80%, वह मॉड्यूल को डॉक करेगा, त्रुटि सुधार से निपटेगा और पहले से ही बनाई गई परियोजनाओं की कार्यक्षमता का विस्तार करेगा। और jQuery के नूडल समर्थन बहुत महंगा हो सकता है। उंगलियों पर बवासीर से बचने का एक स्पष्ट तरीका परियोजनाओं का अपघटन करना है, जिसके लिए वे मुख्य रूप से साइकिल का आविष्कार करते हैं। बैकबोन एक तैयार बाइक है। जब एक अच्छा चाचा आपके लिए किया तो कुछ नया क्यों करें?

चरण 4. टेम्पलेट के माध्यम से दृश्य के साथ काम करना (रिवाइज 5)

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

 <div id="block" class="block"> </div> <!--     --> <script type="text/template" id="start"> <div class="start"> <div class="userplace"> <label for="username"> : </label> <input type="text" id="username" /> </div> <div class="buttonplace"> <input type="button" value="" /> </div> </div> </script> <!--   --> <script type="text/template" id="error"> <div class="error"> .  <%= username %>  . <a href="#!/">Go back</a> </div> </script> <!--   --> <script type="text/template" id="success"> <div class="success">  <%= username %> . <a href="#!/">Go back</a> </div> </script>

डायनामिक्स दिखाने के लिए, हमने एक यूज़रनेम को रिजल्ट टेम्प्लेट में जोड़ा।
हम उपयोगकर्ता नाम संग्रहीत करेंगे और इसे AppState चर में टेम्पलेट में पास करेंगे

 var AppState = { username: "" }

प्रत्येक टेम्पलेट के लिए एक दृश्य लिखें।

 var Views = { }; var Start = Backbone.View.extend({ el: $("#block"), // DOM  widget' template: _.template($('#start').html()), events: { "click input:button": "check" //     "" }, check: function () { AppState.username = this.el.find("input:text").val(); //    if (AppState.username == "test") //    controller.navigate("success", true); //    success else controller.navigate("error", true); //    error }, render: function () { $(this.el).html(this.template()); } }); var Success = Backbone.View.extend({ el: $("#block"), // DOM  widget' template: _.template($('#success').html()), render: function () { $(this.el).html(this.template(AppState)); } }); var Error = Backbone.View.extend({ el: $("#block"), // DOM  widget' template: _.template($('#error').html()), render: function () { $(this.el).html(this.template(AppState)); } }); Views = { start: new Start(), success: new Success(), error: new Error() };

नोट। हम पर 3 दृश्य एक ही DOM तत्व के लिए भेजे गए हैं। वास्तव में, यह नहीं होना चाहिए। तार्किक रूप से, यह एक विजेट होना चाहिए। मैंने काम करने के लिए कई दृश्य की क्षमता दिखाने के लिए जानबूझकर गलत तरीके से इस कदम को डिजाइन किया। बाद में मैं दिखाऊंगा कि इस पंचर से कैसे बचा जाए।

नियंत्रक छोटे परिवर्तनों से भी गुजरेगा।

 var Controller = Backbone.Router.extend({ routes: { "": "start", //  hash- "!/": "start", //   "!/success": "success", //   "!/error": "error" //   }, start: function () { if (Views.start != null) { Views.start.render(); } }, success: function () { if (Views.success != null) { Views.success.render(); } }, error: function () { if (Views.error != null) { Views.error.render(); } } });

इस प्रकार हमने अपने एप्लिकेशन में स्पीकर जोड़े हैं।

चरण 5. कई उपयोगकर्ताओं के लिए परीक्षण (संशोधित 6)

न केवल परीक्षण के लिए, बल्कि अन्य उपयोगकर्ताओं के लिए भी जांचने का सबसे आसान तरीका है, उपयोगकर्ताओं के सरणी में नाम की जांच करना।
चलिए फैमिली ऐरे बनाते हैं, जिसमें हम सभी नामों को जोड़ेंगे।

 var Family = ["", "", ""]; //

और हम प्रारंभ दृश्य के कोड में जांच करेंगे। क्योंकि अंडरस्कोर पहले से ही एप्लिकेशन में शामिल है, इसे _.detect के माध्यम से करते हैं

 ... if (_.detect(Family, function (elem) { return elem == AppState.username })) //    ...

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

टिप्पणी 2. jQuery रास्ता। निरंतरता (7 वर्ष)

और कई उपयोगकर्ताओं को समर्थन देने के लिए हमें jQuery कोड में कितना कोड जोड़ना पड़ा? बहुत कम:

 $(function () { var Family = ["", "", ""]; $("#start input:button").click(function () { //    var username = $("#username").val(); //     $("span.username").text(username); $("#start").hide(); //    $("#" + ($.inArray(username, Family) != -1 ? "success" : "error")).show(); }); $("#error a, #success a").click(function () { $(".block").hide(); $("#start").show(); }); });

ठीक है, तदनुसार, लेआउट लेआउट को सही करें:

  ... <div id="error" class="block"> <!--   --> .  <span class="username"></span>  . <a href="javascript:void(0);">Go back</a> </div> <div id="success" class="block"> <!--   -->  <span class="username"></span> . <a href="javascript:void(0);">Go back</a> </div> ...

याद रखें कि मैंने समर्थन, 80/20% और अन्य dregs के बारे में कुछ कहा है? तो यहाँ है। इसे भूल जाओ। इस एप्लिकेशन के लिए jQuery की शैली में कोड लिखने के लिए कुछ भी शर्मनाक नहीं है। आप बैकबोन के माध्यम से यह सब लिखने की तुलना में 10-20 गुना कम समय खर्च करेंगे। और कोड का आकार आपको आधे लीटर के बाद रात में भी इस एप्लिकेशन का समर्थन करने की अनुमति देता है। इस तरह से लिखने और अपने $ 5 कमाने में शर्मनाक कुछ भी नहीं है। जो सहमत नहीं है, उसे टिप्पणी में अपनी राय देने दें।
मुझे यह वाक्यांश दोहराना पसंद है कि सभी रूपरेखाएँ 2 उद्देश्यों की सेवा करती हैं, एक बिलियन-डॉलर प्रोजेक्ट से एक मिलियन के लिए एक प्रोजेक्ट बनाने के लिए, और एक $ 100 प्रोजेक्ट से कुछ मिलियन प्रोजेक्ट। इस तथ्य का लाभ उठाएं कि यह आपके समय और धन को अधिक प्रभावी ढंग से बचाएगा।

चरण 6. मॉडल के माध्यम से आवेदन नियंत्रक (8 संशोधन)

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

 var AppState = Backbone.Model.extend({ defaults: { username: "", state: "start" } }); var appState = new AppState();

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

  var Block = Backbone.View.extend({ templates: { //     "start": _.template($('#start').html()), "success": _.template($('#success').html()), "error": _.template($('#error').html()) },

दृश्य इनिशियलाइज़र में, हम मॉडल परिवर्तन घटना की सदस्यता लेते हैं। इस घटना में हम एक ब्लॉक redraw लटकाएंगे।

  initialize: function () { //     this.model.bind('change', this.render, this); },

Redraw फ़ंक्शन मॉडल के राज्य क्षेत्र के आधार पर, हमारे मुख्य मॉडल को उपयुक्त टेम्पलेट के साथ प्रस्तुत करेगा:

  render: function () { var state = this.model.get("state"); $(this.el).html(this.templates[state](this.model.toJSON())); return this; }

चेक फ़ंक्शन भी बदल जाएगा। वह उपयुक्त मॉडल फ़ील्ड सेट करेगी:

  check: function () { var username = this.el.find("input:text").val(); var find = (_.detect(Family, function (elem) { return elem == username })); //    appState.set({ //      "state": find ? "success" : "error", "username": username }); },

वैसे, इन सभी मामलों के बाद, कुछ भी प्रदर्शित नहीं किया जाएगा, क्योंकि इससे पहले कि हम दृश्य का वर्णन करें, मॉडल बनाया गया था। इसलिए, हम दृश्य बनाने के बाद परिवर्तन की घटना को बढ़ाते हैं:

  var block = new Block({ model: appState }); appState.trigger("change");

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

  var Controller = Backbone.Router.extend({ routes: { "": "start", //  hash- "!/": "start", //   "!/success": "success", //   "!/error": "error" //   }, start: function () { appState.set({ state: "start" }); }, success: function () { appState.set({ state: "success" }); }, error: function () { appState.set({ state: "error" }); } });

मैनुअल नेविगेशन ने काम किया, लेकिन जब आप चेक बटन पर क्लिक करते हैं, तो पेज एड्रेस का हैश नहीं बदलता है। हम मॉडल के राज्य क्षेत्र को बदलने की घटना की सदस्यता लेकर इस कष्टप्रद दोष को ठीक करेंगे:

  appState.bind("change:state", function () { //       var state = this.get("state"); if (state == "start") controller.navigate("!/", false); // false ,     //    Router else controller.navigate("!/" + state, false); });

इवेंट्स बैकबोन में एक अलग गाना है। ऑब्जेक्ट-ओरिएंटेड और इवेंट-ओरिएंटेड प्रोग्रामिंग का एक अद्भुत विंटेज बनाते हुए, सरलतम ईवेंट, DOM ईवेंट्स और मॉडल या कलेक्शन चेंज ईवेंट्स को उपयोगकर्ता-वर्णित ईवेंट्स के साथ जोड़ा जा सकता है। मेरी सलाह है कि आप अपने प्रोजेक्ट में Backbone.js का उपयोग शुरू करने से पहले उनका अध्ययन करें।

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

चरण 7. संग्रह के माध्यम से कई उपयोगकर्ताओं के लिए परीक्षण (Rev 9)

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

  var UserNameModel = Backbone.Model.extend({ //   defaults: { "Name": "" } });

UserNameModel मॉडल से एक परिवार संग्रह बनाएँ

  var Family = Backbone.Collection.extend({ //   model: UserNameModel, });

इस संग्रह में निर्दिष्ट नाम के साथ उपयोगकर्ता के स्थान की जाँच करने के लिए संग्रह में एक विधि जोड़ें

  checkUser: function (username) { //   var findResult = this.find(function (user) { return user.get("Name") == username }) return findResult != null; }

परिवार संग्रह का एक उदाहरण बनाएँ

  var MyFamily = new Family([ //   { Name: "" }, { Name: "" }, { Name: "" } ]);

उसके बाद, MyFamily उदाहरण में सत्यापन विधि को कॉल करने के लिए व्यू में उपयोगकर्ता सत्यापन कम हो जाता है

 var find = MyFamily.checkUser(username); //

निष्कर्ष

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

डमियों के लिए बैकबोन.जेएस