emberjs 从另一个视图转到锚点答案

【问题标题】：emberjs go to anchor from another viewemberjs 从另一个视图转到锚点
【发布时间】：2014-05-23 03:16:08
【问题描述】：

目前我正在使用 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: -------------------------------

【问题讨论】：

我不明白你的问题。一个简单的 jsfiddle 可能会有所帮助
这很难描述，但我有 goToAnchors 工作的索引视图，但是，在其他视图上，如何使菜单链接回到索引视图？
所以你点击一个链接到一个视图，但是新菜单是如何工作的，所以它可以点击回到带有锚点的主页？
当你想从车把模板过渡到任何路线时，你应该使用link-to helper。 emberjs.com/guides/templates/links
也可以看看这个帖子来保留滚动位置reefpoints.dockyard.com/2014/05/05/…

标签： javascript jquery ember.js ember-cli

【解决方案1】：

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

您的条款页面的路径是legal/tou。当您从条款页面单击导航菜单时，您的操作会通过 legal/tou => application 路由（子 => 父层次结构）冒泡。因此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);              
      });
    });
  }
 }
});

【讨论】：