Backbone.js नियंत्रण और विजेट्स का उपयोग

Question

क्या Backbone.js में लिखे गए यूआई घटकों का पुन: उपयोग करने के लिए कोई अच्छा मॉडल है?

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

एक अच्छी बात यह है कि jQuery प्लगइन मॉडल ऑफ़र पुन: उपयोग की आसानी है। आप उचित आईडी के साथ कुछ HTML तत्व बना सकते हैं और $(function(){}) के साथ उन्हें तार बना सकते हैं। अगर हमने इसे अपनाया तो हमें निश्चित रूप से बैकबोन के समान कुछ हासिल करने की आवश्यकता होगी।

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

एक अन्य विचार यह है कि हमारे पास एक जावास्क्रिप्ट बंडलिंग समाधान है। मुझे चिंता है कि कई बैकबोन तत्वों को एक साथ जोड़कर इसका मतलब यह हो सकता है कि हम पृष्ठभूमि में लोडिंग और चलने वाले हेडलेस नियंत्रणों के साथ समाप्त होते हैं।

क्या आप बैकबोन नियंत्रण बना सकते हैं और उन्हें jQuery प्लगइन के रूप में पैकेज कर सकते हैं? क्या इस तरह के वास्तुकला के बारे में कोई अच्छा संसाधन उपलब्ध है?

Answer 1

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

उदाहरण के लिए, आप एक नियंत्रण कक्षा बना सकते हैं, और उस पर foo विधि को ट्रिगर करने के लिए एक क्लिक ईवेंट बांध सकते हैं।

var Control = Backbone.View.extend({ 
    id:null, 
    events: { 
     'click' : 'foo' 
    }, 
    foo: function(){ 
     console.log(this.id); 
    } 
}) 

हर बार जब आप एक डोम तत्व इस व्यवहार का उपयोग करना चाहते हैं, तो आप एक नया नियंत्रण वस्तु बनाने, और तत्व jQuery का उपयोग करने के लिए यह बाँध।

//I say foo when you click me 
var foo = new Control({el: $("#foo"), id:'foo' }); 

//I say bar when you click me 
var bar = new Control({el: $("#bar"), id:'bar' }); 

दिखाने के लिए क्या कार्यप्रवाह होगा

यह एक वास्तव में सरल उदाहरण (आप feasibly एक jQuery प्लगइन में उन कॉल लपेट सकता है), तुम सच में रीढ़ के मॉडल/संग्रह और अंडरस्कोर के साथ तीव्र प्राप्त कर सकते हैं टेम्पलेटिंग इंजन कुछ वास्तव में मजबूत गतिशील & पुन: प्रयोज्य वर्ग बनाने के लिए।