Question

我想知道如何使用Ember制作this website中的菜单？

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

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

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

Answer 1

有些人可能会争辩说，但是对于像你所展示的网站登陆页面来说，Ember可能有点过分。对于具有多个视图和需要连接的数据的强大Web应用程序而言，Ember意味着更多。

首先，如果您look at their script，他们会使用jQuery将body的{{1}}位置设为相应的div并将scrollTop设置为{{ 1}}菜单元素的window.location.hash也恰好是hash href滚动到的标识：

<section/>

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

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

Answer 2

尝试在您要处理此方案的页面上的路由器中使用*: catch all模式。

所以我们假设索引将作为单个页面运行，您必须能够自动滚动到网址中的某些元素。

您还可以通过链接从索引页面访问帖子和关于子页面。

...然后

App.Router.map(function() {
  this.route('about');
  this.route('posts');
  this.route('index',{path:'*:'});

});

所以如果你有一个id =“elementToScrollTo”的元素，那么url /＃elementToScrollTo将加载索引页面并滚动到该元素。

我希望这会对你有所帮助。