बैकबोन राउटर नेविगेट और एंकर href

Question

रीढ़ की हड्डी-सक्षम ऐप में, मैंने कोड देखा है जो <a href="#foo"></a> का उपयोग जारी रखता है, जबकि एंकर क्लिक को रीढ़ की हड्डी के ईवेंट हैंडलर द्वारा नियंत्रित किया जाता है।

वैकल्पिक रूप से, #foo करने के लिए नेविगेशन द्वारा नियंत्रित किया जा सकता है:

Router.history.navigate("foo"); 

मेरा मानना ​​है कि क्योंकि यह करने के लिए और एचटीएमएल 5 के pushState कार्यक्षमता से आसान प्रवास का विकल्प भी बाद के बेहतर तरीका है। और यदि हम पुशस्टेट का उपयोग करते हैं, तो बैकबोन उन ब्राउज़रों के लिए #foo पर गहराई से अपनाने में सक्षम होगा जो pushState का समर्थन नहीं करते हैं।

जैसा कि मैं अभी भी बैकबोन के लिए नया हूं, क्या कोई और अनुभवी और जानकार पुष्टि कर सकता है कि यह मामला है?

Answer 1

मैं व्यक्तिगत रूप से pushState सक्षम किया हुआ है और दृष्टिकोण adding a click handler के टिम Branyen की रीढ़ की हड्डी-बॉयलरप्लेट में ले लिया है कि navigate लिए सभी लिंक क्लिक भेजता का उपयोग जब तक कि वे एक data-bypass विशेषता है:

$(document).on("click", "a:not([data-bypass])", function(evt) { 
    var href = { prop: $(this).prop("href"), attr: $(this).attr("href") }; 
    var root = location.protocol + "//" + location.host + Backbone.history.options.root; 

    if (href.prop && href.prop.slice(0, root.length) === root) { 
    evt.preventDefault(); 
    Backbone.history.navigate(href.attr, true); 
    } 
}); 

यह बहुत अच्छी तरह से काम करता है और @nickf के उल्लेखों का लाभ यह है कि आपको हैश/हैशबैंग हैक का उपयोग करने की ज़रूरत नहीं है, यहां तक ​​कि उन ब्राउज़रों के लिए भी जो pushState का समर्थन नहीं करते हैं।

Answer 2

हां मैं जितना राउटर.history.navigate का उपयोग करने की कोशिश करता हूं जैसा कि मैं अपने बैकबोन ऐप्स में कर सकता हूं। इसका लाभ यह भी है कि उपयोगकर्ता अपने ब्राउज़र में यूआरएल "/ foo" में टाइप करता है, बैकबोन इसे सही तरीके से रूट करता है। जाहिर है अगर यह एक बाहरी लिंक या कुछ है जिसे आप बैकबोन से संभाल नहीं करना चाहते हैं तो आपको इसे शामिल नहीं करना चाहिए।

Answer 3

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

$(document).on('click', 'a[href^="/"]', function (event) { 
    // here, ensure that it was a left-mouse-button click. middle click should be 
    // allowed to pass through 
    event.preventDefault(); 
    Backbone.history.navigate(this.href); 
}); 

Answer 4

क्रिस का जवाब बहुत बढ़िया है, लेकिन इसमें एक जोड़ा है जो इसे और भी बेहतर बनाता है। Backbone.history.navigate() असल में सच या झूठ बोलता है अगर यह आंतरिक रूप से मार्ग पर जा सकता है। इसलिए हम data-bypass विशेषता छोड़ सकते हैं और कर के बजाय निम्न कर सकते हैं: बाहर

$(document).on("click", "a", function(evt) { 
    var href = { prop: $(this).prop("href"), attr: $(this).attr("href") }; 
    var root = location.protocol + "//" + location.host + Backbone.history.options.root; 

    if (href.prop && href.prop.slice(0, root.length) === root) { 
    if (Backbone.history.navigate(href.attr, true)) { 
     evt.preventDefault(); 
    } 
    } 
});