Question

目前我正在使用ember cli项目来构建我的ember应用程序，但是我遇到了一个试图配置导航的问题。以下代码块适用于索引路由器，但是，我遇到了其他路由器上的问题。 goToAnchor部分允许我在主页上的单个无限滚动中导航到页面锚点标签，但当我转到其他视图，即我的/术语页面时，我需要菜单才能点击返回主页，理想情况下没有刷新浏览器。

没有刷新，这可能吗？

索引路由器：

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

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

您的条款页面的路线为legal/tou。当您点击条款页面中的导航菜单时，您的操作会通过legal/tou => application路由（子级=＆gt;父级层次结构）冒泡。因此Nothing handled in the action goToAnchor被抛出。因此，第一步是将goToAnchor逻辑从index路由提升到application路由。

其次，在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);              
      });
    });
  }
 }
});

emberjs从另一个视角去锚

1 个答案: