मीटियर जेएस

Question

का उपयोग करके किसी पृष्ठ में किसी स्थिति की गहरी लिंक, मेरे पास एकाधिक पृष्ठों वाले एक उल्का ऐप है। मैं पृष्ठ के आधे रास्ते कहीं एक लंगर को डिप्लिंक करने में सक्षम होना चाहता हूं।

परंपरागत रूप से, सामान्य एचटीएमएल में, आप अपने पृष्ठ में कहीं और बनायेंगे, और /mypage.html#chapter5 के माध्यम से इसे लिंक करेंगे।

यदि मैं ऐसा करता हूं, तो मेरा उल्का ऐप उस स्थान पर स्क्रॉल नहीं करेगा।

इसके आसपास सबसे अच्छा तरीका क्या है?

Answer 1

क्या आप किसी प्रकार का जावास्क्रिप्ट राउटर का उपयोग कर रहे हैं? उल्का राउटर?

आप किसी जावास्क्रिप्ट आधारित स्क्रॉलिंग विधि की तरह कुछ उपयोग कर सकते हैं। ऐसा ही एक उदाहरण JQuery के साथ है: (आप अपने लिंक में इस जगह कर सकते हैं/बटन क्लिक करें हैंडलर)

Template.hello.events({ 
    'click #theitemtoclick':function(e,tmpl) { 
     e.preventDefault(); 
     $('html, body').animate({ 
      scrollTop: $("#item_id").offset().top 
     }, 600); 
    } 
}); 

फिर अपने एचटीएमएल आइटम को टैग जहां आईडी के साथ अपने लंगर डाल दिया जाएगा:

<h1 id="item_id">Section X</h1> 

Answer 2

@ अक्षत का जवाब उसी पृष्ठ पर काम करता है, लेकिन यदि आप इसमें एक यूआरएल w/"#" के आसपास गुजरने में सक्षम होना चाहते हैं तो क्या होगा? मैंने यह किया कि उल्का दस्तावेज़ों ने कैसे किया।

Template.myTemplate.rendered = function() { 
    var hash = document.location.hash.substr(1); 
    if (hash && !Template.myTemplate.scrolled) { 
    var scroller = function() { 
    return $("html, body").stop(); 
    }; 

    Meteor.setTimeout(function() { 
    var elem = $('#'+hash); 
    if (elem.length) { 
     scroller().scrollTop(elem.offset().top); 
     // Guard against scrolling again w/ reactive changes 
     Template.myTemplate.scrolled = true; 
    } 
    }, 
    0); 
    } 
}; 

Template.myTemplate.destroyed = function() { 
    delete Template.myTemplate.scrolled; 
}; 

चोरी source to the meteor docs.

Answer 3

से वर्तमान में, IronRouter में एक मुद्दा जहां हैश यूआरएल से निकाल दिया जाता है। इस पर here और here पर चर्चा की गई है। सौभाग्य से there is a fix भले ही यह स्थिर संस्करण में दिखाई न दे।

पारंपरिक लंगर टैग के साथ

मेरे आयरन रूटर समाधान:

1)

2 ऊपर IronRouter सुधार लागू)

Router.configure({ 
    ... 
    after: function() { 
     Session.set('hash', this.params.hash); 
    }, 
    ... 
}); 

3)

function anchorScroll() { 
    Deps.autorun(function(){ 
     var hash = Session.get('hash'); 
     if (hash) { 
      var offset = $('a[name="'+hash+'"]').offset(); 
      if (offset){ 
       $('html, body').animate({scrollTop: offset.top},400); 
      } 
     } 
     Session.set('hash', ''); 
    }); 
} 

Template.MYTEMPLATE.rendered = function(){ 
    anchorScroll(); 
}; 

दुर्भाग्य से यह करना पड़ता है प्रत्येक टेम्पलेट के .rendered() में सेट किया जाना चाहिए अन्यथा एंकर टैग एन है ओओएम में होने की गारंटी है।

बेहतर या बदतर के लिए यह कोड पुश के साथ फिर से स्क्रॉल करेगा।

Answer 4

Mike's Answer मेरे लिए काफी काम नहीं किया। ऑनशेंड कॉलबैक में हैश खाली लौट रहा था। मैंने कोड को Meteor.setTimeout

fyi में कोड को निहित किया है। मैं ब्लेज़ का उपयोग कर रहा हूं।

नीचे एक आकर्षण :)

Template.myTemplate.onRendered(function() { 
    Meteor.setTimeout(function(){ 
    var hash = document.location.hash.substr(1); 
    if (hash && !Template.myTemplate.scrolled) { 
    var scroller = function() { 
    return $("html, body").stop(); 
    }; 

    Meteor.setTimeout(function() { 
    var elem = $("a[name='" + hash + "']"); 
    if (elem.length) { 
     scroller().scrollTop(elem.offset().top); 
     // Guard against scrolling again w/ reactive changes 
     Template.myTemplate.scrolled = true; 
    } 
    }, 
    0); 
    } 
    },0); 
}); 

Template.myTemplate.destroyed = function() { 
    delete Template.myTemplate.scrolled; 
};