एकल पृष्ठ अनुप्रयोग में नामांकित एंकर (एसपीए)

Question

एसपीए में, सैमी.जेएस जैसे नेविगेशन ढांचे का उपयोग करके, मैं इन-पेज नेविगेशन के लिए एंकर नाम वाले पेज में कैसे उपयोग कर सकता हूं?

उदा। मैं localhost/myapp/#/somerecord/1 की तरह एक मार्ग जहां आवेदन भार आईडी = 1.

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

एक लेख तत्व <article id=section-d> ... </article> तरह परिभाषित किया गया है कहो और मैं बस <a href=#section-d>Section D</a> यह तकनीकी रूप से काम करता है की तरह से लिंक है, लेकिन यूआरएल localhost/myapp/#section-d की तरह पढ़ता है, इस नेविगेशन ढेर टूट जाता है। बैक बटन मारना मुझे localhost/myapp/#/somerecord/1 और पर वापस शीर्ष पर वापस कूदता है।

पसंदीदा कार्रवाई या तो शीर्ष पर या पिछले पृष्ठ पर वापस जाने के लिए होगी। इसे पूरा करने के तरीके पर कोई विचार?

Answer 1

मुझे sammy.js के साथ durandal का उपयोग कर एक ही समस्या है। असल में, आपको अपने पृष्ठ पर इच्छित प्रत्येक एंकर के लिए एक (अदृश्य) मार्ग बनाना होगा। मुझे मिले समाधान के बारे में एक पोस्ट देखें: http://papamufflon.blogspot.de/2013/04/durandal-scrollspy.html

Answer 2

प्रभावी रूप से, आपको अपने यूआरएल को नियमित अभिव्यक्ति के रूप में परिभाषित करना होगा, और इसके अंत में एक वैकल्पिक बुकमार्क हैश की अनुमति देना होगा; कुछ की तरह:

• #/somerecord/1
• #/somerecord/1 # (इलाज किया के रूप में अगर कोई लेख आईडी है)
:

get(/#\/somerecord\/(\d+)(#.+)?/, function() { 
    var args = this.params['splat']; 
    var recordId = args[0]; 
    var articleId = args[1]; 
}); 

यह निम्न मार्गों में से किसी से मेल खाना चाहिए

• #/somerecord/1 # खंड-डी (articleId = '# खंड-डी)

फिर आप articleId उपयोग करने के लिए मिलान तत्वों को खोजने के लिए सक्षम होना चाहिए मानसिक और मैन्युअल रूप से स्क्रॉल करें। जैसे ऊपर अंतिम मार्ग, jQuery का उपयोग करने में आप की तरह कुछ कर सकता है:

var $article = $(articleId); 
    $(document.body).animate({ scrollTop: $article.offset().top }); 
}); 

मैं सिर्फ इस बारे में एक अधिक व्यापक लेख ऊपर लिखा है (Durandal का प्रयोग करके), अगर आप रुचि रखते हैं: http://quickduck.com/blog/2013/04/23/anchor-navigation-durandal/

संपादित करें लिंक मर चुका है। आलेख यहां उपलब्ध है http://decompile.it/blog/2013/04/23/anchor-navigation-durandal/