यह एक बड़ा सवाल है। बैकबोन महान है क्योंकि यह मान्यताओं की कमी के कारण होता है, लेकिन इसका मतलब यह है कि आपको खुद को इस तरह की चीजों को लागू करना है (कैसे तय करें)। अपने स्वयं के सामान के माध्यम से देखने के बाद, मुझे लगता है कि मैं (तरह का) परिदृश्य 1 और परिदृश्य 2 के मिश्रण का उपयोग करता हूं। मुझे नहीं लगता कि एक 4 वां जादुई परिदृश्य मौजूद है, क्योंकि बस, पर्याप्त है, जो कुछ भी आप परिदृश्य 1 और 2 में करते हैं। किया हुआ।
मुझे लगता है कि यह स्पष्ट करना आसान होगा कि मैं इसे एक उदाहरण के साथ कैसे संभालना चाहता हूं। कहो कि मेरे पास यह सरल पृष्ठ निर्दिष्ट विचारों में टूट गया है:
कहो HTML है, गाया जाने के बाद, कुछ इस तरह:
<div id="parent">
<div id="name">Person: Kevin Peel</div>
<div id="info">
First name: <span class="first_name">Kevin</span><br />
Last name: <span class="last_name">Peel</span><br />
</div>
<div>Phone Numbers:</div>
<div id="phone_numbers">
<div>#1: 123-456-7890</div>
<div>#2: 456-789-0123</div>
</div>
</div>
उम्मीद है कि यह बहुत स्पष्ट है कि HTML आरेख के साथ कैसे मेल खाता है।
ParentView2 बच्चे दृश्य, रखती है InfoViewऔर PhoneListViewसाथ ही साथ कुछ अतिरिक्त divs, जिनमें से एक, #name, कुछ बिंदु पर निर्धारित करने की आवश्यकता। PhoneListViewअपने स्वयं के बच्चे के विचारों को रखता है, PhoneViewप्रविष्टियों की एक सरणी ।
तो अपने वास्तविक प्रश्न पर। मैं शुरुआती प्रकार को देखता हूं और दृश्य प्रकार के आधार पर अलग-अलग प्रतिपादन करता हूं। मैं अपने विचारों को दो प्रकारों, Parentविचारों और Childविचारों में तोड़ता हूं ।
उनके बीच का अंतर सरल है, Parentविचार बच्चे के विचारों को Childरखते हैं जबकि विचार नहीं करते हैं। तो मेरी उदाहरण में, ParentViewऔर PhoneListViewकर रहे हैं Parent, विचार करते हुए InfoViewऔर PhoneViewप्रविष्टियों Childबार देखा गया।
जैसा कि मैंने पहले उल्लेख किया है, इन दो श्रेणियों के बीच सबसे बड़ा अंतर है जब उन्हें रेंडर करने की अनुमति दी जाती है। एक आदर्श दुनिया में, मैं Parentकेवल एक बार प्रस्तुत करना चाहता हूं । मॉडल (नों) में बदलाव होने पर किसी भी री-रेंडरिंग को संभालना उनके बच्चे के विचारों पर निर्भर करता है। Childदूसरी ओर, मैं किसी भी समय उन्हें फिर से प्रस्तुत करने की अनुमति देता हूं क्योंकि उनके पास उन पर भरोसा करने वाले कोई अन्य विचार नहीं हैं।
कुछ और बातें करने के लिए Parentमेरे initializeकार्यों को पसंद करने वाले विचारों के लिए, थोड़ा और विस्तार से :
- मेरे अपने दृष्टिकोण को आरम्भिक करें
- मेरे अपने विचार प्रस्तुत करें
- किसी भी बच्चे के विचार बनाएं और आरंभ करें।
- असाइन करें कि प्रत्येक बच्चे को मेरे विचार में एक तत्व दिखाई देता है (जैसे
InfoViewअसाइन किया जाएगा #info)।
चरण 1 बहुत आत्म व्याख्यात्मक है।
चरण 2, प्रतिपादन, ऐसा किया जाता है कि बच्चे द्वारा देखे जाने से पहले ही कोई भी तत्व जिस पर भरोसा करता है, वह पहले से ही मौजूद है। ऐसा करने से, मुझे पता है कि सभी बच्चे eventsसही ढंग से सेट हो जाएंगे, और मैं उनके ब्लॉकों को कई बार फिर से प्रस्तुत कर सकता हूं, जैसा कि मैं चाहता हूं कि किसी भी चीज को फिर से सौंपने की चिंता किए बिना। मैं वास्तव में यहां renderकिसी भी बच्चे के विचार नहीं करता हूं , मैं उन्हें अपने भीतर ऐसा करने की अनुमति देता हूं initialization।
चरण 3 और 4 वास्तव में उसी समय को संभाला जाता है जब मैं elबच्चे को देखने के दौरान पास करता हूं । मुझे यहां एक तत्व पास करना पसंद है क्योंकि मुझे लगता है कि माता-पिता को यह निर्धारित करना चाहिए कि अपने स्वयं के दृश्य में बच्चे को अपनी सामग्री डालने की अनुमति कहां है।
प्रतिपादन के लिए, मैं इसे Parentविचारों के लिए बहुत सरल रखने की कोशिश करता हूं । मैं चाहता हूं कि renderफंक्शन पैरेंट व्यू को रेंडर करने से ज्यादा कुछ नहीं करे। कोई घटना प्रतिनिधि, बच्चे के विचारों का कोई प्रतिपादन, कुछ नहीं। बस एक साधारण रेंडर।
हालांकि यह हमेशा काम नहीं करता है। उदाहरण के लिए ऊपर मेरे उदाहरण में, #nameतत्व को किसी भी समय मॉडल परिवर्तन के नाम से अपडेट करना होगा। हालाँकि, यह ब्लॉक ParentViewटेम्प्लेट का हिस्सा है और एक समर्पित Childदृश्य द्वारा नियंत्रित नहीं किया जाता है , इसलिए मैं इसके चारों ओर काम करता हूं। मैं कुछ प्रकार के subRenderफ़ंक्शन बनाऊंगा जो केवल#name तत्व की सामग्री को प्रतिस्थापित करता है , और पूरे #parentतत्व को कचरा नहीं करना पड़ता है । यह एक हैक की तरह लग सकता है, लेकिन मैंने वास्तव में पाया है कि यह पूरे डोम और रीटचिंग तत्वों और इस तरह के पुन: प्रतिपादन के बारे में चिंता करने से बेहतर काम करता है। अगर मैं वास्तव में इसे साफ करना चाहता था, तो मैं एक नया Childदृश्य (उसी के समान InfoView) बनाऊंगा जो #nameब्लॉक को हैंडल करेगा ।
अब Childविचारों के लिए, विचारों के initializationसमान सुंदर है Parent, बस किसी भी आगे के Childविचारों के निर्माण के बिना । इसलिए:
- मेरे विचार को प्रारंभ करें
- मैं जिस मॉडल की परवाह करता हूं, उसके बदलाव के लिए सेटअप बाइंडिंग सुनता है
- मेरे विचार का प्रतिपादन करें
Childदेखें प्रतिपादन भी बहुत सरल है, बस प्रस्तुत करना और मेरी सामग्री सेट करना el। फिर, प्रतिनिधिमंडल के साथ कोई खिलवाड़ या ऐसा कुछ नहीं।
यहाँ कुछ उदाहरण कोड है जो मेरे ParentViewजैसा दिख सकता है:
var ParentView = Backbone.View.extend({
el: "#parent",
initialize: function() {
// Step 1, (init) I want to know anytime the name changes
this.model.bind("change:first_name", this.subRender, this);
this.model.bind("change:last_name", this.subRender, this);
// Step 2, render my own view
this.render();
// Step 3/4, create the children and assign elements
this.infoView = new InfoView({el: "#info", model: this.model});
this.phoneListView = new PhoneListView({el: "#phone_numbers", model: this.model});
},
render: function() {
// Render my template
this.$el.html(this.template());
// Render the name
this.subRender();
},
subRender: function() {
// Set our name block and only our name block
$("#name").html("Person: " + this.model.first_name + " " + this.model.last_name);
}
});
आप subRenderयहाँ मेरा कार्यान्वयन देख सकते हैं । के subRenderबजाय बाध्य परिवर्तन होने से render, मुझे नष्ट करने और पूरे ब्लॉक के पुनर्निर्माण के बारे में चिंता करने की ज़रूरत नहीं है।
यहाँ InfoViewब्लॉक के लिए उदाहरण कोड है :
var InfoView = Backbone.View.extend({
initialize: function() {
// I want to re-render on changes
this.model.bind("change", this.render, this);
// Render
this.render();
},
render: function() {
// Just render my template
this.$el.html(this.template());
}
});
बाँध यहाँ का महत्वपूर्ण हिस्सा हैं। अपने मॉडल से जुड़कर, मुझे कभी भी renderखुद को फोन करने की चिंता नहीं करनी चाहिए। यदि मॉडल बदलता है, तो यह ब्लॉक किसी अन्य दृश्य को प्रभावित किए बिना खुद को फिर से प्रस्तुत करेगा।
के PhoneListViewसमान होगा ParentView, आपको संग्रह को संभालने के लिए बस अपने initializationऔर renderकार्यों दोनों में थोड़ा और तर्क की आवश्यकता होगी । आप संग्रह को कैसे संभालते हैं यह वास्तव में आप पर निर्भर करता है, लेकिन आपको कम से कम संग्रह की घटनाओं को सुनना होगा और यह निर्णय लेना होगा कि आप कैसे प्रस्तुत करना चाहते हैं (जोड़ना / हटाना, या पूरे ब्लॉक को फिर से प्रस्तुत करना)। मुझे व्यक्तिगत रूप से नए विचारों को जोड़ना और पुराने लोगों को हटाना पसंद है, न कि पूरे दृश्य को फिर से प्रस्तुत करना।
PhoneViewलगभग समान हो जाएगा InfoView, केवल मॉडल परिवर्तन इसके बारे में परवाह करता है को सुन।
उम्मीद है कि इसने थोड़ी मदद की है, कृपया मुझे बताएं कि क्या कुछ भ्रामक है या पर्याप्त विस्तृत नहीं है।