बैकबोन का उपयोग करके केस स्टडी

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

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

तो, आपने हैब्रैट की रेखा पार कर ली है। मैं अपने लक्ष्य को पुस्तकालय के मूल सिद्धांतों की व्याख्या के रूप में सेट नहीं करता, पहले से ही बहुत सारे लेख थे:
habrahabr.ru/blogs/javascript/129928
habrahabr.ru/blogs/javascript/118782
habrahabr.ru/blogs/webdev/123130

मैं ध्यान देता हूं कि तीनों बैकबोन के मानक उपयोग का वर्णन करते हैं, लेकिन यह बहुत दुर्लभ रूप से आवश्यक है, उदाहरण के लिए, एक राउटर का उपयोग करने के लिए। या आपको सर्वर से संपर्क करने की आवश्यकता है - लेकिन इसे कैसे करें? सभी Backbone.sync को संदर्भित करते हैं, लेकिन किसी कारण से कोई भी उदाहरण प्रदान नहीं करता है। इस वाक्य को लिखने के मुख्य कारणों में से एक के रूप में पिछले वाक्य पर विचार करें। यदि आप उससे सहमत नहीं हैं, तो आप आगे नहीं पढ़ सकते हैं।

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

आरंभ करने के लिए हमें क्या करने की आवश्यकता है? हम एक मानक संरचना के साथ एक खाली एक्सएचटीएमएल पेज बनाते हैं, जोक्वेरी, अंडरस्कोर, बैकबोन (उस क्रम में) को जोड़ते हैं। अंत में, हमारी स्क्रिप्ट का लिंक जोड़ें। सर्वर की तरफ, हम एक php फाइल बनाते हैं जो डेटा पढ़ने / लिखने के लिए जिम्मेदार होगी (यह पुरालेख, app.php में है, मैं कोड नहीं दूंगा, स्क्रिप्ट बस फॉर्म के अनुरोधों को संसाधित करता है? विधि =)।

जब तैयारी पूरी हो जाएगी, तो हम js में एक स्क्रिप्ट लिखना शुरू करेंगे। चलो मॉडल और लॉग को संग्रहीत करने के लिए एक कंटेनर बनाएं:

app = { debug: true, log: function(obj) { if(this.debug) { console.log(obj); } }, models: {} } 

Backbone.sync फ़ंक्शन को डिज़ाइन किया गया है ताकि किसी भी चीज़ को गड़बड़ किए बिना इसे फिर से बनाना आसान हो। इसके अलावा, प्रत्येक मॉडल की अपनी सिंक्रनाइज़ेशन विधि हो सकती है (अनुमान करें कि इसे क्या कहा जाना चाहिए?)। हम अपनी पूरी स्क्रिप्ट के लिए एक वैश्विक फ़ंक्शन लिखेंगे। हमारे द्वारा लिए गए उद्देश्य:

• हमारे बैकएंड के साथ काम करने के लिए बैकबोन प्राप्त करें
• जब डेटा फ्रंट-एंड द्वारा प्राप्त किया जाता है, तो चेकों के लिए लॉग में aukat
• त्रुटि ध्वज के लिए सर्वर से डेटा की जाँच करें (is_error - हमारी स्क्रिप्ट द्वारा सेट)
• जोड़ने / सहेजने को सरल बनाएं (तरीकों को एक में मिलाते हुए)
• इनपुट सत्यापन करें
• नए के साथ पुराने अनुरोध को रद्द करें (केवल मॉडल / विधि जोड़ी के लिए)

मुझे क्या हुआ (आपका कार्यान्वयन भिन्न हो सकता है):

 Backbone.sync = function(method, model, options) { //     var method = (method=='update'||method=='create')?'save':method; //    if(model.loading && model.loading.method == method) { model.loading.xhr.abort(); } app.log('  "'+model.url(method)+'"'); var xhr = $.ajax({ type: 'POST', url: model.url(method), data: (model instanceof Backbone.Model)?model.toJSON():{}, success: function(ret) { //    if(ret.is_error) { app.log(' '); } else { app.log(' '); (function(data){ app.log('Backbone.sync  :', data); if(data.res) { //  - ,   model.trigger('load:res', data.res); } else { //  - ,   options.success(data.rows?data.rows:data); } model.trigger((method=='save')?'save':'load', data); })(ret.data); } }, error: function (req_obj, msg, error) { app.log(' '); }, dataType: 'json' }); //       model.loading = { method: method, xhr: xhr } }; 

मैं थोड़ा चालाक था। यदि आप मॉडल विधियों को इस तरह कहते हैं: पढ़ी गई सूची पढ़ें, तो अंतिम रीड पहले नहीं टूटेगा, लेकिन लेख उस बारे में नहीं है, इसलिए हम एक विशाल बोल्ट डालते हैं।

रिकॉर्ड मॉडल कोड:

 app.models.note = (Backbone.Model.extend({ defaults: { id: 0, text: '' }, url: function(method){ return './app.php?method='+method; } })); app.models.Note = (Backbone.View.extend({ tagName: 'li', className: 'entity', render: function(){ var data = this.model.toJSON(); var that = this; $(this.el).html('').data('rowId', data.id); $(this.el).append($('<input type="text" />').val(data.text)); $(this.el).append($('<button></button>').click(function(){ app.models.page.trigger('post:save', { 'id': $(this).closest('li').data('rowId'), 'text': $(this).closest('li').find('input').val() }); })); $(this.el).append($('<button></button>').click(function(){ if(!confirm(' ,     ?')) return; app.models.notes.get($(this).closest('li').data('rowId')).destroy(); })); return this; } })); 

प्रविष्टियों की सूची:

 app.models.notes = new (Backbone.Collection.extend({ model: app.models.note, initialize: function(){ this.bind('destroy', function(){ this.reload(); }, this); }, reload: function(){ var that = this; var options = ({ error:function(){ app.log('  !'); that.trigger('change'); }, success: function(){ app.log(' '); that.trigger('change'); } }); app.log(' ...'); this.fetch(options); }, url: function(method){ return './app.php?method=list'; } })); 

और अंतिम, पृष्ठ मॉडल:

 app.models.page = new (Backbone.View.extend({ el: null, el_list: null, notes: null, initialize: function(){ this.bind('page:load', this.pageLoad, this); this.bind('list:reload', this.listReload, this); this.bind('post:save', this.postSave, this); this.notes = app.models.notes; this.notes.bind('change', this.onListChange, this); this.notes.bind('load:res', this.onListChange, this); return this; }, pageLoad: function(data) { var that = this; this.el = $('.layout'); this.el_list = this.el.find('.items-list'); //   this.el.find('.title .refresh').bind('click', function(){ that.trigger('list:reload') }); //   this.el.find('.items-add-submit').bind('click', function(){ that.trigger('post:save', { id: false, text: $('.items-add-text').val() }); }); this.trigger('list:reload'); }, render: function(ret){ $(this.el_list).html(''); if(!ret) { app.log(' . : '+this.notes.length); _(this.notes.models).each(function(item){ this.appendItem(item); }, this); } else { app.log(' . : "'+ret+'"'); $(this.el_list).html('').append($('<li class="res"></li>').text(ret)); } return this; }, appendItem: function(item) { var view = new app.models.Note({ model: item }); $(this.el_list).append(view.render().el); }, onListChange: function(ret){ this.render(ret); }, postSave: function(obj){ var model = new app.models.note(); if(obj.id) { model.set({ id:obj.id }); } model.set({ text:obj.text }); model.save(); this.trigger('list:reload'); }, listReload: function(){ this.notes.reload(); } })); 

वे कुछ भूल गए ... ओह हाँ, हम प्रस्तुत करना शुरू करते हैं:

 $(document).ready(function(){ app.models.page.trigger('page:load'); }); 

जैसा कि आप देख सकते हैं, सब कुछ सरल है। मैंने जानबूझकर प्रत्येक फ़ंक्शन को चबाने के बजाय, टुकड़ों में कोड का हवाला दिया, क्योंकि लेख एक ऐसे व्यक्ति पर केंद्रित है जो कम से कम js / रीढ़ की हड्डी से परिचित है। यदि यह आपके बारे में नहीं है, तो मैंने ऊपर लिंक दिए, सब कुछ वहां विस्तार से वर्णित है। यदि आपको समझने में कठिनाई हो या कोड के लिए अतिरिक्त स्पष्टीकरण की आवश्यकता हो - तो लिखें।
कोड इन एक्शन: युरोव.मार्ट / कार्ट
संग्रह में सभी कोड: yurov.me/art/art.tar.gz

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

PPS कॉमरेड oWeRQ ने कोड को क्रम में रखा, मैं बाद में लेख को अपडेट करूंगा (इसका कोड बहुत साफ है):
owerq.dyndns.org/test/art