javascript - emberjs 从另一个 View 锚定

Question

目前我正在使用 ember cli项目来构建我的 ember 应用程序，但我在尝试配置导航时遇到了问题。以下代码块适用于索引路由器，但是，我在其他路由器上遇到了问题。 goToAnchor 部分允许我导航到单个无限滚动(如主页)上的页面 anchor 标记，但是当我转到其他 View (即我的/terms 页面)时，我需要菜单能够单击返回主页，理想情况下无需刷新浏览器。

如果不刷新，这可能吗？

索引路由器:

export default Ember.Route.extend({
    actions: {
        goToAnchor: function(item,anchor) {
            var $elem, $scrollTo;
            $elem = $('#' + anchor);
            $scrollTo = $('body').animate({
                scrollTop: $elem.offset().top-15
            }, parseInt(ENV.CONFIG.PRODUCT.SCROLL_SPEED));
            this.transitionTo(item.route).then($scrollTo);
        }
    }
});

导航:

<section class="top-bar-section center">
    <ul class="nav-header">
        <li><a {{action goToAnchor 'index' 'menu1'}}>menu1</a></li>
        <li><a {{action goToAnchor 'index' 'menu2'}}>menu2</a></li>
        <li><a {{action goToAnchor 'index' 'menu3'}}>menu3</a></li>
        <li><a {{action goToAnchor 'index' 'menu4'}}>menu4</a></li>
    </ul>
</section>

发表本文时的当前设置:

DEBUG: ------------------------------- 
DEBUG: Ember      : 1.5.1 
DEBUG: Ember Data : 1.0.0-beta.7+canary.b45e23ba 
DEBUG: Handlebars : 1.3.0 
DEBUG: jQuery     : 2.1.1 
DEBUG: ------------------------------- 

Answer 1

嗨，克里斯，我刚刚查看了您的代码，并能够识别出问题

1. 您的条款页面的路径是legal/tou。当您从术语页面单击导航菜单时，您的操作将通过 legal/tou => application 路由(子级 => 父级层次结构)进行冒泡。因此，抛出了 Nothing Handling in the actions goToAnchor 。因此，第一步是将您的 goToAnchor 逻辑从 index 路由上移到 application 路由。

2. 其次，在 goToAnchor 操作中，您尝试在渲染模板之前查询 DOM。因此，它爆炸了。模板渲染后需要查询 DOM。您应该使用 Ember RunLoop 的 afterRender 队列。要了解有关 Ember Runloops 的更多信息，请参阅 docs here

   //routes/application.js
   
   export default Ember.Route.extend({
   actions: {
    goToAnchor: function(route,anchor) {
       var $elem, $scrollTo;
       this.transitionTo(route).then(function() {
         Em.run.schedule('afterRender', function(){
           $elem = $('#' + anchor);
           $('html,body').animate({
               scrollTop: $elem.offset().top-15
           }, 500);              
         });
       });
     }
    }
   });