Backbone.js

Question

में

मैं निम्नलिखित लेआउट है कि एक ही पृष्ठ अनुप्रयोग में काम कर रहा हूँ रूटर होते देखा गया प्रबंध स्क्रीन:

var AppRouter = Backbone.Router.extend({ 
    routes: { 
     ""    : "list", 
     "content1"  : "content1", 
     "content1/cont3": "cont3" 
    }, 

    list: function() { 
     var list = new List().render().$el; //view 
     $("#List").html(list); 
    }, 

    content1: function(){ 
     var cont1 = new Content1().render().$el; //view 
     $("#Content1").html(cont1); 
    }, 

    content3: function(){ 
     var cont3 = new Content3().render().$el; //view 
     $("#Cont3").html(cont3); 
    }   

}); 

हर मैं #List में किसी सूची आइटम पर क्लिक करें, # सामग्री 1 उत्पन्न हो जाता है, और जब मैं # सामग्री 1 पर ब्लॉक पर यह करते हैं, # Cont3 प्रकट होता है।

मुझे जिस समस्या का सामना करना पड़ रहा है वह यह है कि अगर किसी कारण से, मैं उस पृष्ठ को रीफ्रेश करता हूं जब एड्रेस स्थानीयहोस्ट/सामग्री 1 है, उदाहरण के लिए; # सूची में तत्व गायब हो जाते हैं।

मैं चाहता हूं कि लोड होने पर # सूची हमेशा मौजूद रहें, यूआरएल क्या हो सकता है, साथ ही साथ # सामग्री 1 में सामग्री भी स्वतंत्र हो। क्या रीढ़ की हड्डी राउटर का उपयोग करके इसे हासिल करने का कोई तरीका है?

धन्यवाद

Answer 1

आप मैच के लिए 1 मार्ग < की जरूरत नहीं है -> 1 देखें।
मैं कुछ इस तरह के मार्गों बदल जाएगा:

"सूची": "displayContent",
"सूची /: c1": "displayContent",
"सूची /: c1 /: सी 3" : "displayContent",

तो यह केवल एक कॉलबैक है जो व्यवस्थित करता है कि कौन से विचार प्रस्तुत किए जाते हैं या नहीं।

displayContent: समारोह (सी 1, सी 3) {

स्टोर सामग्री 1 चर, और देखें कि क्या पहले से ही है या नहीं प्रस्तुत किए, आदि

इस सवाल का एक नज़र: How to handle initializing and rendering subviews in Backbone.js?

या अधिक जटिल ऐप्स के लिए, शायद बैकबोन के शीर्ष पर एक लेआउट फ्रेमवर्क मदद कर सकता है, हालांकि जब तक आप समझते हैं कि बैकबोन कैसे काम करता है, तब तक मैं अपनी खुद की सामग्री करने की सलाह दूंगा।

https://github.com/tbranyen/backbone.layoutmanager
https://github.com/derickbailey/backbone.marionette

Answer 2

मुझे लगता है कि आप इस कोशिश कर सकते हैं:

..... 
    list: function() { 
     var list = new List().render().$el; //view 
     $("#List").html(list); 
    }, 

    content1: function(){ 
     var cont1 = new Content1().render().$el; //view 
     $("#Content1").html(cont1); 
     //Pseudo code 
     if (listisempty){ 
      list();//If the list is empty, then the initialization list. 
     }; 
    }, 

.....