1. घर
  2. सवाल और जवाब
  3. रीढ़ की हड्डी में नेस्टेड विचारों की मूल बातें समझने में मदद की आवश्यकता

रीढ़ की हड्डी में नेस्टेड विचारों की मूल बातें समझने में मदद की आवश्यकता

2013-03-07 11 views
7

मैं backbone.js में घोंसला वाले विचारों के बारे में पढ़ने का एक गुच्छा कर रहा हूं और मैं इसकी अच्छी मात्रा समझता हूं, लेकिन एक चीज जो अभी भी मुझे परेशान कर रही है ..रीढ़ की हड्डी में नेस्टेड विचारों की मूल बातें समझने में मदद की आवश्यकता

यदि मेरे एप्लिकेशन में एक खोल दृश्य है जिसमें पृष्ठ नेविगेशन, एक पाद लेख इत्यादि जैसे उप-दृश्य शामिल हैं जो एप्लिकेशन का उपयोग करने के दौरान नहीं बदलते हैं, तो क्या मुझे प्रत्येक मार्ग के लिए खोल प्रस्तुत करने की आवश्यकता है या क्या मैं यह देखने के लिए किसी प्रकार की जांच कर रहा हूं कि यह पहले से मौजूद है या नहीं?

अगर ऐसा लगता है कि किसी ने ऐप में आगे बढ़ने से पहले "घर" मार्ग नहीं मारा है तो ऐसा लगता है।

मुझे अपने गुगल में इस बारे में कुछ भी उपयोगी नहीं मिला है, इसलिए किसी भी सलाह की सराहना की जाती है।

धन्यवाद!

स्रोत

2013-03-07 Charles

+1

चार्ल्स, पहिया को पुनर्निर्मित करने में बहुत अधिक समय खर्च करने से पहले [backbone.marionette] (https://github.com/marionettejs/backbone.marionette) पर एक नज़र डालें। यह आपकी ज़रूरतों को पूरा कर सकता है या नहीं भी हो सकता है, लेकिन मेरी इच्छा है कि मैंने इसके बारे में जान लिया था जब मैंने अपना घोंसला दृश्य प्रोजेक्ट शुरू किया था :) – Kato

उत्तर

15

के बाद से अपने "खोल" या "लेआउट" दृश्य कभी नहीं बदलता, तो आप इसे आवेदन स्टार्टअप पर (किसी भी मार्गों को ट्रिगर से पहले) प्रस्तुत करना चाहिए, और लेआउट दृश्य में आगे विचारों प्रस्तुत करना ।

<body> 
    <section id="layout"> 
    <section id="header"></section> 
    <section id="container"></section> 
    <section id="footer"></section> 
    </section> 
</body>

आपका लेआउट दृश्य कुछ इस तरह दिख सकता है::

मान लें कि आपका लेआउट कुछ इस तरह लग रही थीं

var LayoutView = Backbone.View.extend({ 
    el:"#layout", 
    render: function() { 
    this.$("#header").html((this.header = new HeaderView()).render().el); 
    this.$("#footer").html((this.footer = new FooterView()).render().el); 
    return this; 
    }, 

    renderChild: function(view) { 
    if(this.child) 
     this.child.remove(); 
    this.$("#container").html((this.child = view).render().el); 
    } 
});

आप होगा तो सेटअप आवेदन स्टार्टअप पर लेआउट:

var layout = new LayoutView().render(); 
var router = new AppRouter({layout:layout}); 
Backbone.history.start();

और आपके राउटर कोड में:

var AppRouter = Backbone.Router.extend({ 
    initialize: function(options) { 
    this.layout = options.layout; 
    }, 

    home: function() { 
    this.layout.renderChild(new HomeView()); 
    }, 

    other: function() { 
    this.layout.renderChild(new OtherView()); 
    } 
});

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

स्रोत

2013-03-07 18:15:37 jevakallio

+0

कभी-कभी यह सबसे स्पष्ट समाधान है जो देखने के लिए सबसे कठिन हैं! इस पर कुछ प्रकाश चमकाने के लिए धन्यवाद। बहुत अच्छा। – Charles

+0

आपके उदाहरण में फिनक्लिफ, इस लाइन के अंत में .el आवश्यक है? ।। 'इस $ (" # कंटेनर ") एचटीएमएल ((this.child = दृश्य) .render() एल।);' यह "संपत्ति नहीं पढ़ सकते हैं अपरिभाषित के 'एल'" – Charles

+0

@Charles एक त्रुटि फेंक रहा है , काम करने के लिए आपको दृश्य की 'रेंडर' विधि से 'इसे वापस' करने की आवश्यकता है - काफी आम पैटर्न। यदि आप ऐसा नहीं करना चाहते हैं, तो बस अलग-अलग पंक्तियों पर 'रेंडर()' कॉल और '.html (view.el)' को विभाजित करें। – jevakallio

संबंधित मुद्दे
नवीनतम प्रश्न

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