0

目前我正在使用ember cli项目来构建我的 ember 应用程序，但我在尝试配置导航时遇到了问题。以下代码块适用于索引路由器，但是，我在其他路由器上遇到了问题。goToAnchor 部分允许我导航到单个无限滚动（如主页）上的页面锚标记，但是当我转到其他视图（即我的 /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: -------------------------------
4

1 回答 1

1

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

  1. 您的条款页面的路线是legal/tou. 当您从条款页面单击导航菜单时，您的操作会通过legal/tou => application路由（子 => 父层次结构）冒泡。因此Nothing handled in the action goToAnchor被抛出。所以第一步是将你的goToAnchor逻辑从index一个路由移动到application另一个路由。

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

    //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);              
      });
    });
  }
 }
});
于 2014-05-26T17:32:58.080 回答