backbone.js

Question

के साथ लिंक बनाने का पसंदीदा तरीका मैं बैकबोन.जेएस के आसपास अपने सिर को लपेटने की कोशिश कर रहा हूं लेकिन मुझे अच्छे उदाहरणों (आईएमओ) की कमी के कारण यह कठिन लगता है।

सबसे पहले, किसी ऑब्जेक्ट को लिंक प्राप्त करने का सबसे अच्छा तरीका क्या है।
यदि मैं Album मॉडल का संपादन यूआरएल प्राप्त करना चाहता हूं तो मैं album.url() + '/edit' कर सकता हूं, क्या यह वास्तव में सबसे अच्छा तरीका है?

इसके अलावा, मैं जावास्क्रिप्ट के बिना अपना आवेदन 100% काम करने की कोशिश कर रहा हूं, इसलिए मैं नहीं चाहता कि मेरे यूआरएल/लिंक /albums/#1/edit कहें, मैं चाहता हूं कि यह /albums/1/edit हो और जेएस में इसे ओवरराइड करें।

मैं सोच रहा हूँ मैं सामान्य यूआरएल बनाने और jQuery.live का उपयोग backbone.js
मैं इस हालांकि काम करने के लिए नहीं मिला में router.navigate कॉल करने के लिए, जब मैं router.navigate('/albums/2', true) URL परिवर्तन फोन, लेकिन मेरे शो कार्रवाई कभी नहीं कहा जाता है

। अगर मैं इसे ताज़ा करता हूं तो इसे रूट किया जाता है।

मुझे क्या याद आ रही है?

Answer 1

मूल उत्तर, जो निराशाजनक है, "कोई पसंदीदा तरीका नहीं है!"। Backbone.js आपको लिंक सेट अप करने के बारे में नहीं बताता है, आप इसे किसी भी तरह से कर सकते हैं। मुझे यह लचीलापन उतना ही परेशान लगता है जितना आप करते हैं, कम से कम पहले।

तो यहाँ

तरह से मैं my current project पर इस आ रहा हूँ, (बड़ा) चेतावनी के साथ है कि यह सिर्फ रीढ़ में काम करने के लिए कई मायनों में से एक है:

• अधिकांश भाग के लिए, मैं डॉन वास्तविक लिंक का उपयोग नहीं करते हैं। इसका कोई स्पष्ट कारण नहीं है, लेकिन इसका मतलब है कि आपको यूआरएल स्ट्रिंग्स के समूह का ट्रैक रखना होगा जो लगातार होना चाहिए। मैं अपने राउटर में सभी यूआरएल प्रारूपण को छूंगा और इसे कहीं और सौदा नहीं करूँगा।

• एक नया "शीर्ष-स्तर" दृश्य खोलने के लिए, एक संपादन स्क्रीन की तरह, मैंने कुछ ऐसा सेट किया जो किसी ईवेंट को चलाता है। आवेदन में मैं वर्तमान में काम कर रहा हूं, मेरे पास एक वैश्विक राज्य मॉडल है, और एक नया दृश्य खोलने के लिए मैं state.set({ topview: MyTopView }) पर कॉल करता हूं। यह change:topview को ट्रिगर करने के लिए state ऑब्जेक्ट का कारण बनता है।

• यूआई का कोई भी टुकड़ा जिसे शीर्ष-स्तरीय दृश्य परिवर्तनों में बदलने की आवश्यकता है, change:topview तक अद्यतन विधि है। जब घटना आग लगती है, तो वे state.get('topview') देखते हैं और आवश्यकतानुसार अपडेट करते हैं।

• मैं अपने राउटर को यूआई के केवल मामूली विशेष भागों के रूप में मानता हूं - वे अनिवार्य रूप से दृश्य हैं जो विंडो के बजाए ब्राउज़र पता बार में प्रस्तुत करते हैं। अन्य विचारों की तरह, वे यूआई घटनाओं (यानी एक नया यूआरएल) पर state ऑब्जेक्ट अपडेट करते हैं, और अन्य विचारों की तरह, वे state ऑब्जेक्ट को उन परिवर्तनों के लिए सुनते हैं जो उन्हें अपडेट करते हैं। तर्क है कि संपादन स्क्रीन में URL albums/<albumid>/edit राउटर में पूरी तरह से समाहित है, और मैं इसे कहीं और संदर्भित नहीं करता हूं।

यह मेरे लिए अच्छी तरह से काम है, लेकिन यह पूरी तरह से नया पैटर्न, वैश्विक राज्य वस्तु, रीढ़ संरचना करने के लिए कहते हैं, तो मैं शायद ही इस "पसंदीदा" दृष्टिकोण कॉल कर सकते हैं।

अद्यतन: भी ध्यान रखें कि .url(), रीढ़ मुहावरा में, मॉडल के URL बैक-एंड एपीआई में संदर्भित करता है, नहीं सामने के अंत यूआरएल (यह Django के get_absolute_url की तरह नहीं है)।डिफ़ॉल्ट बैकबोन सेटअप में कोई विधि नहीं है जो आपको अपने मॉडल के लिए उपयोगकर्ता का सामना करने वाला यूआरएल देता है - आपको इसे स्वयं लिखना होगा।

Answer 2

इसके अलावा, मैं जावास्क्रिप्ट के बिना अपना आवेदन 100% करने का प्रयास कर रहा हूं; इसलिए मैं नहीं चाहता कि मेरे यूआरएल/लिंक /albums/#1/edit कहें, मैं चाहता हूं कि यह /albums/1/edit हो और जेएस में इसे ओवरराइड करें।

आप वास्तव में यह w/pushState कर सकते हैं। बस अपने Backbone.history.start कॉल में सक्षम:

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

इस जो पूर्ण यूआरएल बिल्कुल जैसे आप चाहते रहे हैं का उपयोग करता है एचटीएमएल 5 इतिहास एपीआई (यानी "pushstate"), उपयोग करने के लिए रीढ़ बताता है।

इतिहास एपीआई यहाँ पर पढ़ें: http://diveintohtml5.ep.io/history.html

और मैं pushstate डब्ल्यू /, रीढ़ की हड्डी में प्रगतिशील वृद्धि पर ध्यान केंद्रित कर दूसरे भाग का उपयोग कर आप क्या ज़रूरत रहे हैं करने के लिए पर एक 2 भाग श्रृंखला लिखा है:

http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-1-introducing-pushstate/

और

http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-2-progressive-enhancement-with-backbone-js/

आशा वें मदद करता है :)