हम बैकबोन में टेम्प्लेट के साथ काम का अनुकूलन करते हैं

मैंने अपने परिचित को बैकबोन जावास्क्रिप्ट फ्रेमवर्क के साथ शुरू किया, जैसे कई, टूडू ट्यूटोरियल के साथ , जिसके आधार पर मेरी परियोजनाओं में फ्रेमवर्क के आगे उपयोग का निर्माण किया गया था।

लेकिन ट्यूटोरियल समाप्त होते हैं और कार्यदिवस शुरू होते हैं।


मुझे लगता है कि कई लोग इस अनुभाग के कोड से परिचित हैं (उपरोक्त ट्यूटोरियल से):

window.AppView = Backbone.View.extend({ // Instead of generating a new element, bind to the existing skeleton of // the App already present in the HTML. el: $("#todoapp"), // Our template for the line of statistics at the bottom of the app. statsTemplate: _.template($('#stats-template').html()), ... 

आइए करीब से देखें:

• DOM पेड़ तैयार होने के बाद, AppView प्रकार की घोषणा अवश्य की जानी चाहिए, जो कि jQuery (फ़ंक्शन () {...}) में लिपटी है, जो हमेशा सुविधाजनक नहीं होती है।
• आँकड़ेटेम्पलेट टेम्पलेट को दृश्य घोषणा के चरण में लोड किया गया है ताकि इंस्टेंसेस इसे अतिरिक्त लोडिंग और प्रोसेसिंग के बिना उपयोग कर सकें
• टेम्पलेट HTML पेज के नीचे है और पेज लोड होने पर DOM में लोड किया जाता है

बेशक, छोटे अनुप्रयोगों के लिए कोई सवाल नहीं है। और यदि एप्लिकेशन बड़ा है और दर्जनों टेम्प्लेट हैं?
एक बार में सभी टेम्प्लेट डाउनलोड और आरंभ क्यों करें? हमें उनमें से अधिकांश की आवश्यकता नहीं हो सकती है।

टेम्पलेट डाउनलोड करें

अच्छा होगा कि आप केवल टेम्प्लेट लोड करें जब हमें उनकी आवश्यकता हो और उन्हें कैश करें।

इसके आधार पर, हम बूटलोडर लिखते हैं:

  Core.Template = { cache: {}, //     pending: {}, //  callback-,       load: function(url, callback) { callback = callback || function() {}; if (this.cache[url]) { //   ,   callback callback(this.cache[url]); return; } //  callback   if (this.pending[url]) { this.pending[url].push(callback); return; } this.pending[url] = [callback]; jQuery.ajax({ //  url : url, dataType: 'text', complete: function(resp) { var cache = this.cache[url] = _.template(resp.responseText); //      _.each(this.pending[url], function(cb) { //   cb(cache); }); delete this.pending[url]; //   }.bind(this), error: function() { throw new Error("Could not load " + url); } }); } }; 

अजाक्स के माध्यम से टेम्पलेट अपलोड करके, हमारे पास ब्राउज़र का उपयोग करके इसे कैश करने की अतिरिक्त क्षमता है।
कतार इसलिए बनाई गई है कि लोडर हमारे संग्रह से प्रत्येक प्रकार के मॉडल के लिए एक टेम्पलेट को लोड नहीं करता है, लेकिन यह एक बार करता है और प्रत्येक दृश्य के लिए काम के लिए तैयार टेम्पलेट को पास करता है।

मुझे उम्मीद है कि कोड पर टिप्पणी यह ​​समझने के लिए पर्याप्त है कि सब कुछ कैसे काम करता है।
इसके बाद, हमें नए तरीके से टेम्प्लेट के साथ काम करने के लिए अपने विचारों को सिखाना होगा।

टेम्पलेट्स के साथ काम करने के लिए बेस क्लास

हम प्रकार का एक आधार वर्ग लिखेंगे ताकि यह हमारे टेम्पलेट लोडर के साथ काम कर सके।

  Core.View = Backbone.View.extend({ renderQueue: false, //     initialize: function() { if (this.templateUrl) { Core.Template.load(this.templateUrl, function(data) { this.template = data; //   if (this.renderQueue !== false) { //     _.each(this.renderQueue, function(item) { this._render.apply(this, item); }.bind(this)); this.renderQueue = false; } }.bind(this)); } }, _render: function() {}, //        render render: function() { if (!this.template) { //     -      this.renderQueue = this.renderQueue || []; this.renderQueue.push(arguments); return this; } return this._render.apply(this, arguments); //   } }); 

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

के उपयोग

अभ्यास क्या है?
इस तरह से लेख की शुरुआत में दिखाए गए कोड का संशोधित भाग कैसा दिखेगा:

 window.AppView = Core.View.extend({ el: $("#todoapp"), //    templateUrl: '/templates/app.html', initialize: function() { AppView.__super__.initialize.apply(this); //    ... }, //  render  _render  statsTemplate  template _render: function() { this.$('#todo-stats').html(this.template({ total: Todos.length, done: Todos.done().length, remaining: Todos.remaining().length })); }, ... 

हो गया!

यहां बूटलोडर कोड उपलब्ध है ।
संशोधित टूडू ट्यूटोरियल का एक उदाहरण यहां देखा जा सकता है ।
यदि दिलचस्पी है, तो टूडू में क्या बदलाव आया है: अंतर

आपका ध्यान के लिए धन्यवाद!