बैकबोन और मैरियनेट में अतिरिक्त रैपर

Question

बैकबोन और मैरियनेट का उपयोग करके, मैंने एक नया लेआउट बनाया है जो मेरे पृष्ठ पर मुख्य सामग्री div में जाता है। लेआउट इस तरह दिखता है:

<div id='dash-sidebar'> 
    <div id='dash-profile'></div> 
    <div id='dash-nav'></div> 
</div> 
<div id='dash-content'></div> 

मुद्दा यह है कि जब मैं लेआउट प्रस्तुत करना, रीढ़ स्वचालित रूप से इसे एक div में मुख्य सामग्री div में इसे इस तरह डालने से पहले लपेटता है:

<div id='main-content'>  
    <div> 
    <div id='dash-sidebar'> 
     <div id='dash-profile'></div> 
     <div id='dash-nav'></div> 
    </div> 
    <div id='dash-content'></div> 
    </div> 
</div> 

मुझे पता है कि मैं टैगनाम के साथ तत्व बदल सकता हूं, लेकिन क्या यह टेम्पलेट को पूरी तरह से लपेटने से बचाना संभव है और इसे सीधे पृष्ठ पर मुख्य सामग्री div में डालें?

Answer 1

प्रत्येक बैकबोन व्यू को एक तत्व द्वारा दर्शाया जाना चाहिए। आपके पहले एचटीएमएल ब्लॉक में दो तत्व हैं, यही कारण है कि इसे बिना किसी बाहरी div में लपेटे बिना किसी दृश्य द्वारा प्रदर्शित किया जा सकता है।

क्या आप main-content क्षेत्र को भी शामिल करने के लिए अपने लेआउट को दोबारा कर सकते हैं? फिर लेआउट का el पूरे बाहरी div के अनुरूप होगा।

कोशिश करने की एक और चीज बैकबोन का उपयोग करेगा। व्यू setElement() बाहरी div के निर्माण को ओवरराइड करने के लिए विधि, और मैन्युअल रूप से HTML में इंजेक्ट करें जिसे आप दृश्य में तत्व के लिए चाहते हैं।कुछ की तरह:

onRender: function() { 
    this.setElement(/* the HTML you want for your layout */); 
} 

मुझे यकीन है कि यह कैसे करता है, तो आप HTML कि सिर्फ एक के बजाय दो माता पिता तत्व था में पारित काम करेगा लेकिन, नहीं हूँ।

Answer 2

अद्यतन: Marionette.Layout बैकबोन दृश्य का एक विस्तार है, तो यह सामान्य व्यवहार है, रीढ़ की हड्डी दस्तावेज़ देखें:

"एल" संपत्ति का संदर्भ ब्राउज़र में बनाया डोम वस्तु। प्रत्येक बैकबोन.जेएस व्यू में "एल" संपत्ति है, और यदि यह परिभाषित नहीं है, बैकबोन.जेएस अपना स्वयं का निर्माण करेगा, जो एक खाली div तत्व है।

तो मेरे पिछले उत्तर में आपकी समस्या से कोई लेना देना नहीं था, क्षमा करें।

अद्यतन:

मिले एक issue 546 इस विषय पर रीढ़ GitHub (जो wontfix के रूप में बंद हो गया) में, jashkenas इस टिप्पणी पोस्ट की व्याख्या करने के लिए कारण है कि यह आसान लागू करने के लिए नहीं है:

एक बड़ा हिस्सा बैकबोन व्यूज़ का उपयोग करने के लाभ का यह तथ्य है कि उनके पास उनके तत्व हमेशा उपलब्ध हैं - चाहे कोई टेम्पलेट प्रस्तुत किया गया हो (कई विचारों में एकाधिक टेम्पलेट्स हैं) - गीलेर के दृश्य में मौजूद नहीं है डोम या नहीं

यह आपको डीओएम में विचार बनाने और जोड़ने के लिए अनुमति देता है, बाद में प्रस्तुत करता है और सुनिश्चित करें कि आपकी सभी घटनाएं सही तरीके से बाध्य हैं (क्योंकि उन्हें view.el से प्रतिनिधि दिया गया है)।

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

Answer 3

EDIT3: चेतावनी! यह उत्तर पुराना हो सकता है। मुझे एक टिप्पणी मिली कि यह उत्तर अब काम नहीं करता है और जांच करने का समय नहीं है (मैं व्यक्तिगत रूप से इस विधि का उपयोग नहीं करता)।

मैं अपने यूआई पुस्तकालय के रूप में ट्विटर/बूटस्ट्रैप उपयोग करने के लिए और डिफ़ॉल्ट टैग रैपिंग (मेरी <tbody> और मेरे <tr> रों के बीच विशेष रूप से एक <div>) की वजह से तालिका स्टाइल के साथ कुछ मुद्दों पर हो रही थी की तरह।

कुछ खोदने के बाद, मुझे Region पर how the View attaches the el पर मेरियनेट दस्तावेज़ों में कुछ मिला। Backbone builds the el विभिन्न View विशेषताओं से और निर्मित तत्व को अद्यतित रखता है ताकि इसे किसी भी समय प्रस्तुत किया जा सके। तो मैंने सोचा, अगर view.el माता-पिता है, तो क्यों न केवल HTML सामग्री का उपयोग करें? मैरियनेट create a custom Region

का एक तरीका भी प्रदान करता है I open फ़ंक्शन के साथ एक कस्टम Region बनाकर मैं सबकुछ चलाने में सक्षम था। इस तरह से मैं निर्दिष्ट कर सकता हूं कि मैं किन क्षेत्रों को टैग के साथ लपेटना चाहता हूं और जो मैं नहीं करता हूं। निम्न उदाहरण स्निपेट में, मैं अपना कस्टम गैर-रैपिंग Region (NowrapRegion) बना देता हूं और इसे अपने (MyLayout) में अपने <tbody> के लिए उपयोग करता हूं (मेरे वास्तविक प्रोग्राम में देखे गए विचार <tr> एस) बनाते हैं।

var NowrapRegion = Marionette.Region.extend({ 
    open: function(view){ 
    this.$el.html(view.$el.html()); 
    } 
}); 

var MyLayout = Marionette.Layout.extend({ 
    template: templates.mylayout, 
    regions: { 
    foo: '#foo', 
    columns: '#columns', //thead 
    rows: { selector: '#rows', regionType: NowrapRegion } //tbody 
    } 
}); 

BOOM! जब मैं इसे चाहता हूं तो लपेटना और जब मैं नहीं करता तो कोई नहीं।

संपादित करें: यह events को प्रभावित करता है *View स्तर पर लागू होता है। मैंने अभी तक इसे नहीं देखा है, लेकिन चेतावनी दीजिये कि वे ट्रिगर नहीं लग रहे हैं।

चाहे यह करने का "सही" तरीका है या नहीं, मुझे यकीन नहीं है। मैं @ derick-bailey से किसी भी प्रतिक्रिया का स्वागत करता हूं, उसे यह देखना चाहिए।

EDIT2: @ क्रिस-नेले ने निम्नलिखित का सुझाव दिया, मैंने अभी तक यह सत्यापित नहीं किया है लेकिन ऐसा लगता है। धन्यवाद!

पर एक गहरे क्लोन का उपयोग करके, एचटीएमएल दृश्य को कॉपी करने की बजाय, बच्चे नोड घटनाओं और डेटा को बनाए रखेंगे।

var NowrapRegion = Marionette.Region.extend({ 
    open: function(view){ 
    view.$el.children().clone(true).appendTo(this.$el); 
    } 
}); 

Answer 4

मैं बहुत ज्यादा एक ही बात को प्राप्त करना चाहता था। मैं अपने टेम्पलेट्स में सभी एचटीएमएल मार्कअप रखना चाहता हूं और बैकबोन बाकी कर दूंगा। इसलिए मैंने निम्नलिखित स्निपेट लिखा जो अतिरिक्त 'div' को हटा देता है।

सबसे पहले, आप टैग नाम को 'पहचान' पर सेट करते हैं और फिर पहले प्रस्तुत करने के बाद आप अपने दृश्य के अंदर पहले तत्व के टैग नाम का पता लगाते हैं। जाहिर है यह केवल तभी काम करता है जब आप अपने टेम्पलेट में अपना स्वयं का रैपर प्रदान करते हैं।

// Single table row inside tbody 
tableRowView = Backbone.Marionette.ItemView.extend({ 
    tagName: 'detect', 
    template: function(data) { 
    return Handlebars.templates['tablerow/single'](data); 
    }, 
    onRender: function() { 
    if (this.tagName == 'detect') 
     this.tagName = this.$el.children().first().prop('tagName').toLowerCase(); 
    this.setElement(this.$el.children(this.tagName)); 
    var $parent = this.$el.parent(this.tagName); 
    if ($parent.length) { 
     this.$el.detach(); 
     this.$el.insertAfter($parent); 
     $parent.remove(); 
    } 
    }, 
    modelEvents: { 
    "change": "render" 
    } 
}); 

टेम्पलेट:

<tr> 
    <td>{{artist}}</td> 
    <td>{{title}}</td> 
    <td>{{length}}</td> 
</tr> 

हालांकि, मैं बस के चारों ओर इसके साथ खेला है एक छोटे - अगर किसी को भी किसी भी समस्याओं को देखता है कि इस दृष्टिकोण (प्रदर्शन, स्मृति, लाश, आदि) मैं कारण बन सकता है उनके बारे में जानने के लिए बहुत खुले रहें।

बीटीडब्ल्यू, यह शायद आसानी से एक प्लगइन में पैक किया जा सकता है।