【问题标题】:Meteor Iron Router - Router.go callback possible?Meteor Iron Router - Router.go 回调可能吗?
【发布时间】:2015-06-20 01:10:35
【问题描述】:

我有一个希望用户按下的链接。当他们按下它时,路由器将转到某个模板,然后运行 ​​Smoothscroll.js 代码以动画并向下滚动到锚标记。

      //When the user clicks on the link to get to the #contact anchor...
      //The code below does not work.
      Router.go('index');
      $('html,body').animate({
          scrollTop: $('#contact').offset().top
      }, 1200);

Router.go('index') 工作正常。

      $('html,body').animate({
          scrollTop: $('#contact').offset().top
      }, 1200);

在索引模板上也可以单独使用。

但是当我尝试将它们一起运行时,路由器会进入索引,但滚动不起作用。

知道我该怎么做吗?

编辑

这是我最新的 Meteor 1.0+ 和类似 /#contact 的路径

Router.route('/', {
  name: 'index'
});

Router.onAfterAction(function() {
    var self = this;
    // always start by resetting scroll to top of the page
    $(window).scrollTop(0);
    // if there is a hash in the URL, handle it
    if (this.params.hash) {
        // now this is important : Deps.afterFlush ensures that iron-router rendering
        // process has finished inserting the current route template into DOM so we
        // can manipulate it via jQuery, if you skip this part the HTML element you
        // want to scroll to might not yet be present in the DOM (this is probably
        // why your code fails in the first place)
        Tracker.afterFlush(function() {

            if (typeof $("#" + self.params.hash).offset() != "undefined"){
                var scrollTop = $("#" + self.params.hash).offset().top;

                $("html,body").animate({
                    scrollTop: scrollTop
                });

            }

        });
    }
});

【问题讨论】:

    标签: meteor iron-router


    【解决方案1】:

    除非您正在做一些花哨的事情,否则您可能不想使用Router.go,而是让 Iron-router 像往常一样在锚点单击时管理路由。

    就滚动到元素而言,这是我正在使用的 onAfterAction 钩子,它支持任何路由和任何哈希 (/anyroute#anyhash)。

    Router.onAfterAction(function() {
      // always start by resetting scroll to top of the page
      $(window).scrollTop(0);
      var hash=this.params.hash;
      // if there is a hash in the URL, handle it
      if (hash) {
        // now this is important : Tracker.afterFlush ensures that iron-router
        // rendering process has finished inserting the current route template
        // into DOM so we can manipulate it via jQuery, if you skip this part
        // the HTML element you want to scroll to might not yet be present in
        // the DOM (this is probably why your code fails in the first place)
        Tracker.afterFlush(function() {
          var element=$("#"+hash);
          var scrollTop = element.offset().top;
          $("html,body").animate({
            scrollTop: scrollTop
          });
        });
      }
    });
    

    【讨论】:

    • 酷,我会试一试。你在哪里找到Deps.autoFlush?我在文档中找不到任何提及。绝对不在流星手册中。
    • 您好,只是想知道最新的流星 1.0.2.1 会是什么样子?此外,我在 $(#.. 通话中得到“未定义”。
    • 仅供参考在这里创建了 Meteor 1.0 版本并发布为 Iron-router 问题:github.com/EventedMind/iron-router/issues/1171
    • @aginsburg,我更新了我的 OP 以突出显示最新 Meteor 的代码。
    • 谢谢@fuzzybabybunny
    猜你喜欢
    • 2016-08-26
    • 1970-01-01
    • 2014-05-07
    • 2013-11-21
    • 1970-01-01
    • 2023-03-12
    • 2014-07-06
    • 1970-01-01
    • 2017-06-17
    相关资源
    最近更新 更多