Backbone.js और हैश के बिना मार्गों

लगभग हर किसी को जो रीढ़ की हड्डी के साथ काम करना था, कल्पना करें कि यह किस तरह का है - राउटर। बेशक, एप्लिकेशन में आप इसके बिना कर सकते हैं, लेकिन आवेदन की उपयोगिता बहुत खो जाएगी।

तो, राउटर यह निर्धारित करता है कि ब्राउज़र लाइन में URL के आधार पर किस फ़ंक्शन (नियंत्रक) का उपयोग किया जाना चाहिए। या, सटीक होने के लिए, एक हैश पर। यानी आप अपने एप्लिकेशन के इंटरफ़ेस में निम्न लिंक सेट कर सकते हैं:

<a href="http://myapp.com/catalog/#action1"> - </a>

या भी

<a href="http://myapp.com/catalog/#action1/42"> - </a>

और सब कुछ पूरी तरह से काम किया। उपयोगकर्ता, बदले में, इनमें से प्रत्येक लिंक को बचा सकता है, और, बाद में, वांछित कार्यक्षमता को सक्रिय करते हुए, तुरंत उन पर क्लिक करें। इस सभी भव्यता में एकमात्र नकारात्मक बिंदु प्रतीक "#" (पाउंड साइन) की उपस्थिति है। ऐसा नहीं है कि यह अपने आप में बुरा था, लेकिन पठनीयता और "सुंदरता" (किसी और ने मुझे पिछली पंक्तियों से रेस्टफुल के बारे में कुछ बताया) ने URL को खराब कर दिया।

एचटीएमएल 5 के आगमन से पहले इसे लगाना था। नए html के आगमन के साथ, ब्राउज़र के ब्राउज़िंग इतिहास को नियंत्रित करना संभव हो गया (और इसके साथ एड्रेस बार में URL की उपस्थिति)। बैकबोन में समान कार्यक्षमता दिखाई देती है (स्वाभाविक रूप से, पुराने ब्राउज़र के लिए फ़ॉलबैक का समर्थन किया जाता है)। हम अपने एप्लिकेशन को फैशनेबल और आधुनिक बनाने के लिए इसका उपयोग करने का प्रयास करेंगे।

इस बारे में प्रलेखन (और यहां तक ​​कि StackOverflow) बस हमें कहते हैं: "क्या आप बिना हैश के रूटिंग करना चाहते हैं? आवेदन शुरू करने पर ऐसा करें: "

Backbone.history.start({pushState: true})

बेशक, जैसे ही हम अपने मौजूदा कोड में पुशस्टेट पैरामीटर की परिभाषा जोड़ते हैं, सब कुछ उम्मीद के मुताबिक हो जाता है। यानी कुछ भी काम नहीं करता। यह दो समस्याओं के कारण है:

1. अब एप्लिकेशन को यह नहीं पता है कि URL का कौन सा हिस्सा खुद पता है, और कौन सा हिस्सा बैकबोन नियंत्रक का नाम है (इसलिए, डिफ़ॉल्ट रूप से यह डोमेन नाम के बाद सब कुछ इस नाम पर विचार करता है);
2. यदि लिंक बिना हैश के URL के साथ href में निर्दिष्ट है, तो ब्राउज़र समझ नहीं पाएगा कि हम वास्तव में वहां क्या चाहते थे, लेकिन बस निर्दिष्ट पते पर जाएं (जो कि हमारे आवेदन का मतलब है, सबसे अच्छा, पूर्ण पुनरारंभ)।

पहली समस्या को अपेक्षाकृत सरल रूप से हल किया जा सकता है। पुशस्टेट पैरामीटर के अलावा, प्रारंभ विधि में कुछ और पैरामीटर हैं। हम विशेष रूप से जड़ में रुचि रखते हैं। हमारे उदाहरण के लिए, पाठ की शुरुआत में, राउटर का प्रक्षेपण इस तरह दिखाई देगा:

Backbone.history.start({pushState: true, root: "/catalog"})

अब आप सुरक्षित रूप से लिख सकते हैं:

<a href="http://myapp.com/catalog/action1/42"> - </a>

लेकिन जबकि पेज अभी भी पुनः लोड हो रहा है। प्रलेखन के आगे पढ़ने से हमें पता चलता है कि लिंक को अब थोड़ा और अधिक जटिल बनाना होगा। उदाहरण के लिए:

<a onclick="Router.navigate("http://myapp.com/catalog/action1/42", {trigger: true} )" href="javascript:"> - </a>

यानी अब हम हर क्लिक के साथ एप्लिकेशन की स्थिति को अपडेट करते हैं। हमें ट्रिगर पैरामीटर सेट करने के लिए नहीं भूलना चाहिए ताकि हमारे राउटर को अभी भी कहा जाता है (और पता बार में केवल URL नहीं बदला)।

यह उपयोगकर्ता को लिंक कॉपी करने की क्षमता प्रदान करने के लिए बना हुआ है। ऐसा करने के लिए, हम एक सरल लिंक हैंडलर फ़ंक्शन करेंगे जिसे हम इतिहास से पहले कॉल करेंगे। मेरे पास आईडी = "बैकबोन" के साथ सभी लिंक के लिए ऑनक्लिक हैंडलर लटका हुआ है, लेकिन (मैं इस दृष्टिकोण की विशिष्टता पर जोर नहीं देता):

<a id="barebone" href="/catalog/action1/42"> - </a>

यह मत भूलो कि URL को अभी भी संकेतित किया गया है, न कि मार्गों को (हालाँकि मैं व्यक्तिगत रूप से केवल "एक्शन 1/42") लिखने के लिए लुभा रहा हूँ। ठीक है, फ़ंक्शन ही (jQuery का उपयोग करके, जो बिल्कुल भी आवश्यक नहीं है):

var fRouterLinks = function()
{
$("#barebone").click(function(){
Router.navigate($(this).attr("href"), {trigger: true, replace: true} );
return false;
});
}

वह सब है। सुंदर यूआरएल का आनंद लें।

जैसा कि आप देख सकते हैं, ट्यूटोरियल काफी प्राथमिक निकला, लेकिन यह इस मुद्दे पर जानकारी का विखंडन था जिसने मुझे इसे लिखा।