Backbone.js पृष्ठ को पुनः लोड किए बिना यूआरएल बदलें

Question

मेरे पास एक ऐसी साइट है जिसमें उपयोगकर्ता पृष्ठ है। उस पृष्ठ पर, कई लिंक हैं जो आपको उपयोगकर्ता की प्रोफ़ाइल का पता लगाने देते हैं। मैं इसे बनाना चाहता हूं, जब उन लिंक में से एक क्लिक किया जाता है, तो यूआरएल बदलता है, लेकिन उपयोगकर्ता के बैनर वाले पृष्ठ का शीर्ष तीसरा पुनः लोड नहीं होता है।

मैं Backbone.js

उपयोग कर रहा हूँ मुझे लगता है कि मैं उन स्थिति है जहाँ मैं इस समस्या मुझे लगता है कि के साथ काम कर रहा हूँ मैं गलत पूछ रहा हूँ के इस तरह के एक गरीब समझ है में से एक में हूँ है प्रश्न, तो कृपया मुझे बताएं कि क्या यह मामला

Answer 1

मेरी गलती यह मान रही थी कि रीढ़ की हड्डी में ऐसा करने का एक विशेष, अंतर्निहित तरीका था। नहीं है

सीधे शब्दों में कोड

window.history.pushState('object or string', 'Title', '/new-url'); 

की निम्न पंक्ति अपने ब्राउज़र के यूआरएल पृष्ठ पुनः लोड करने के बिना परिवर्तन के कारण होगा चल रहा है। आप अभी अपने ब्राउज़र में जावास्क्रिप्ट कंसोल खोल सकते हैं और इसे इस पेज से आजमा सकते हैं। This article बताता है कि यह अधिक विस्तार से कैसे काम करता है (जैसा कि this SO post में उल्लेख किया गया है)।

bindEvents:() -> 
    $(document).on('click', 'a', @pushstateClick) 


pushstateClick: (e) -> 
    href = e.target.href || $(e.target).parents('a')[0].href 
    if MyApp.isOutsideLink(href) == false 
     if e.metaKey 
         #don't do anything if the user is holding down ctrl or cmd; 
         #let the link open up in a new tab 
     else 
      e.preventDefault() 
      window.history.pushState('', '', href); 
      Backbone.history.checkUrl() 

अधिक जानकारी के लिए this post देखें:

अब मैं सिर्फ दस्तावेज़ ऑब्जेक्ट के लिए निम्न इवेंट (मैं एक ही पृष्ठ साइट चल रहा हूँ) के लिए बाध्य कर दिया है।

ध्यान दें कि आप Backbone.history.start() पर अपने कॉल पर pushstate: true विकल्प को पार कर सकते हैं, लेकिन यह केवल इसे बनाता है ताकि किसी निश्चित पृष्ठ पर सीधे नेविगेट किया जा सके (उदाहरण के लिए example.com/exampleuser/followers) एक ट्रिगर करेगा बस कहीं भी अग्रणी होने के बजाय रीढ़ की हड्डी मार्ग।

Answer 2

रूटर इस स्थिति में आपका मित्र हैं। असल में, एक राउटर बनाएं जिसमें कई अलग-अलग मार्ग हैं। आपके मार्ग अलग-अलग विचारों को कॉल करेंगे। ये विचार केवल उस पृष्ठ के उन हिस्सों को प्रभावित करेंगे जिन्हें आप परिभाषित करते हैं। मुझे यकीन है कि अगर इस वीडियो में मदद मिलेगी नहीं कर रहा हूँ, लेकिन यह आप कैसे रूटर पेज के साथ बातचीत के कुछ विचार दे सकता है:

myapp.Router = Backbone.Router.extend({ 

    routes: { 
     'link1': 'dosomething1', 
     'link2': 'dosomething2', 
     'link3': 'dosomething3' 
    }, 

    dosomething1: function() { 
     new myapp.MyView(); 
    }, 
    dosomething2: function() { 
     new myapp.MyView2(); 
    }, 
    dosomething3: function() { 
     new myapp.MyView3(); 
    } 

}); 

फिर अपने यूआरएल इस तरह दिखेगा: http://www.youtube.com/watch?v=T4iPnh-qago

यहाँ एक अल्पविकसित उदाहरण है : www.mydomain.com/#link1।

इसके अलावा, क्योंकि <a href=''></a> टैग स्वचालित रूप से एक पेज रीफ्रेश कॉल करेंगे, सुनिश्चित करें कि आप कॉल कर रहे हैं .preventDefault(); उन पर यदि आप पृष्ठ को रीफ्रेश नहीं करना चाहते हैं।