如何在Ember中制作单页菜单？

Question

我想知道如何在这个网站上用Ember 制作菜单？

页面分为不同的部分,我们可以滚动到每个部分,点击菜单使页面滚动到想要的部分.

我不确定路由器中是否应该有这种行为的不同路由,我猜不会是这种情况,因为当我们改变路由时,视图是从DOM中删除的.
那么,我应该如何构建每个部分的锚链接？

当我们滚动页面时,最佳解决方案将自动更新路线,但处理链接和URL识别的任何解决方案都可以.

Answer 1

有些人可能会反驳，但 Ember 对于您所展示的网站登陆页面来说可能有点大材小用。Ember 更适合具有多个视图和需要连接的数据的强大 Web 应用程序。

首先，如果你看一下他们的脚本，他们使用 jQuery 将body的scrollTop位置设置为相应 div 的动画，并设置window.location.hash为hash菜单元素的href，这也恰好是滚动的<section/>ID body：

$(document).on('click', '#nav a, .clients-capabilities a', function(){
    var target = $(this);
    var hash = this.hash;
    var destination = $(hash).offset().top;

    stopAnimatedScroll();

    $('#nav li').removeClass('on');
    target.parent().addClass('on');

     $('html, body').stop().animate({ 
        scrollTop: destination
    }, 400, function() { window.location.hash = hash; });
    return false;
});

其次，他们没有做任何特殊的事情来加载到页面加载的特定位置。如果您使用哈希加载网络上的任何页面，浏览器将查找具有该 ID 的元素并在该位置加载。例如，http://emberjs.com/#download。

即使您仍然想为此使用 Ember，您最终可能会使用从路线加载的单个视图执行类似的操作，/因此在您的网站成为成熟的 Web 应用程序之前，我什至不会担心 Ember。