2011-10-05 12 views
12

मैं कुछ जटिल दृश्य संबंधों के निर्माण backbone.js साथ काम कर रहा हूँ, और अगर वहाँ कुछ है कि इस तरह दिखता है करने का एक जावास्क्रिप्ट प्रदर्शन के दृष्टिकोण से कोई समस्या है मैं सोच रहा हूँ:नेस्टिंग दृश्य रीढ़ js

var viewOne = Backbone.View.extend({ 
     tagName : 'li', 
     initialize : function() { 
       this.v2 = new viewTwo({parent:this}); 
     }, 
     clickHideOne : function() { 
       $(this.el).removeClass('selected'); 
     } 
}); 

var viewTwo = Backbone.View.extend({ 
     tagName : 'a', 
     initialize : function() { 
       this.bind('click', this.clickHide, this); 
     }, 
     clickHide(){ 
       $(this.el).removeClass('selected'); 
       this.options.parent.clickHideOne(); 
     } 
}); 

जहां यह दो दृश्यों के बीच एक परिपत्र संदर्भ का एक बहुत ही सरल उदाहरण है, ताकि एक दृश्य में घटनाओं को आसानी से दृश्यों की एक श्रृंखला को प्रसारित किया जा सके, या माता-पिता के विचारों में वस्तुओं के किसी भी संदर्भ को बनाए रखा जा सके। क्या ऐसी कोई परिस्थितियां हैं जहां यह एक समस्या होगी, विशेष रूप से आईई 7 + में डीओएम तत्व संदर्भों के साथ संभावित रिसाव के संबंध में, या माता-पिता के विचारों के संदर्भ में एक और अनुशंसित सर्वोत्तम अभ्यास है।

इसके अलावा, मैं समझता हूं कि मैं केवल $ (this.el) .parent ('li') कर सकता हूं। RemoveClass ('चयनित'); दृश्य में दो, यह बात नहीं है ... यह परिपत्र संदर्भ के बारे में मेरे प्रश्न का एक बहुत ही सरल उदाहरण है।

उत्तर

15

बच्चे के विचारों के लिए ज़िम्मेदार माता-पिता का दृष्टिकोण एक बुरा विचार नहीं है और रीढ़ की हड्डी में काफी आम परिदृश्य है। उपरोक्त कोड के साथ मैं जो समस्या देखता हूं वह यह तथ्य है कि बच्चे के दृष्टिकोण में उसके मूल दृष्टिकोण का ज्ञान है। मैं दृश्य में कस्टम घटनाओं का उपयोग करने का सुझाव दूंगा दो और देखें कि उन घटनाओं से जुड़ें और फिर तदनुसार जवाब दें।

यह ट्रिगर() विधि और बाइंड() विधि का उपयोग करके रीढ़ की हड्डी के साथ काफी आसान है।

+0

यह एक अच्छी विधि की तरह लगता है, मुझे लगता है कि मैं यह भी सोच रहा हूं कि बच्चे के दृश्य के बारे में जानने के लिए यह विशेष रूप से हानिकारक क्यों होगा? – tgriesser

+3

क्योंकि बच्चे वस्तु ऑब्जेक्ट के निर्माण के लिए ज़िम्मेदार नहीं है क्योंकि उसे इसका कोई ज्ञान नहीं होना चाहिए और पूरी तरह से स्वतंत्र होना चाहिए। आप मूल रूप से अनावश्यक निर्भरता बना रहे हैं। –

+1

लेकिन अगर यह मूल वस्तु पर निर्भरता हो तो यह समझ में नहीं आएगा ... जैसे कि मूल वस्तु के बिना बाल वस्तु मौजूद नहीं हो सकती - और यह कि आप केवल उस वस्तु को स्विच कर सकते हैं जो दृश्य के "पैरेंट" थे बाइंड और ट्रिगर को फिर से परिभाषित करने की तुलना में – tgriesser

0

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

2

परिपत्र संदर्भ एक बुरा विचार है। काइल ने कहा कि यह भी अच्छा अभ्यास नहीं है, कि एक बच्चे के विचार के माता-पिता के दृष्टिकोण का स्पष्ट संदर्भ है। स्पष्ट संदर्भ केवल दृश्य पदानुक्रम नीचे जाना चाहिए। यही है, यह माता-पिता के विचारों के लिए अपने सभी बच्चों के विचारों के स्पष्ट संदर्भ होने और उनके साथ बातचीत करने के लिए बाल विचारों के तरीकों को कॉल करने के लिए ठीक है, और सामान्य है। (बच्चे के विचार बनाने और प्रबंधित करने के लिए प्रत्येक तरीके के लिए Backbone.Subviews मिश्रण देखें)। हालांकि, सर्वोत्तम encapsulation अभ्यास एक दृष्टिकोण को स्पष्ट संदर्भ कभी नहीं होना चाहिए या सीधे अपने भाई बहनों या उसके माता-पिता के सीधे तरीके से कॉल नहीं करना चाहिए।

क्रम भाई बहन या माता-पिता के साथ संवाद करने के लिए, आपके पास तीन विकल्प है कि मैं के बारे में पता कर रहा हूँ है:

  1. उपयोग view.trigger() बच्चे दृश्य (या भाई) पर एक घटना को गति प्रदान करने, और उसके बाद का जनक (या भाई) उस घटना को view.listenTo() का उपयोग करके सुनें। यह दृष्टिकोण काम करता है लेकिन जब आप अपने दादा के साथ संवाद करने के लिए एक बच्चे को देखना चाहते हैं तो टूटना शुरू हो जाता है। इसके अलावा, यदि आप भाई बहनों के साथ इस दृष्टिकोण का उपयोग करते हैं तो आप अनियंत्रित स्पष्ट निर्भरताएं बनाते हैं।

  2. आप Backbone.Courier का उपयोग कर सकते हैं, जो एक प्लगइन है जो दृश्य पदानुक्रम में घटनाओं को बुलबुला करना आसान बनाता है। भाई के विचारों के बीच संचार के लिए, एक भाई माता-पिता को एक घटना बुलबुले करता है, और फिर माता-पिता सीधे दूसरे भाई की एक विधि को बुलाता है।

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

+0

ये 3 विकल्प विचारों के बीच संचार को संभालने के लिए बहुत अच्छे हैं .. लेकिन मैं सिर्फ इस मामले में सोच रहा हूं कि मेरे पास 'ए' है जिसमें बच्चे के विचार हैं और उनमें से एक कॉल करता है मोडल, जब मोडल खत्म हो जाता है तो यह ट्रिगर होता है। मोडल पदानुक्रम तोड़ता है, इसलिए मुझे अपने दृश्य 'ए' के ​​लिए इवेंट एग्रीगेटर का उपयोग करना चाहिए? – mateusmaso

संबंधित मुद्दे