我想知道如何使用 Ember 制作类似于 this website 的菜单？
页面分为不同的部分，我们可以滚动到每个部分，单击菜单使页面滚动到想要的部分。
我不确定我是否应该在路由器中为这种行为设置不同的路由，我想这不是因为当我们更改路由时，视图会从 DOM 中删除。
那么，我应该如何建立每个部分的锚链接呢？
当我们滚动页面时，最好的解决方案会自动更新路由，但任何处理链接和 URL 识别的解决方案都可以。
【问题讨论】：
标签： ember.js ember-router
有些人可能会反对，但 Ember 对于您展示的网站着陆页来说可能有点矫枉过正。 Ember 更适用于需要连接多个视图和数据的强大网络应用。
首先，如果您look at their script，他们使用 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;
});
其次，他们没有做任何特殊的事情来加载到页面加载时的特定位置。如果您使用哈希加载 Web 上的任何页面，浏览器将查找具有该 ID 的元素并在该位置加载。例如，http://emberjs.com/#download。
即使您仍然想为此使用 Ember，您最终可能会使用从 / 路由加载的单个视图执行类似的操作，因此在您的网站成熟之前我什至不会担心 Ember网络应用程序。
【讨论】：
尝试在您要处理这种情况的页面上的路由器中使用*: 捕获所有模式。
所以可以说索引将作为单个页面工作，您必须能够自动滚动到 url 中的某些元素。
您还有 posts 和 about 子页面，您可以通过链接从索引页面转到这些子页面。
那么……
App.Router.map(function() {
this.route('about');
this.route('posts');
this.route('index',{path:'*:'});
});
因此，如果您有一个 id="elementToScrollTo" 的元素，那么 url /#elementToScrollTo 将加载索引页面并滚动到该元素。
请参阅How to handle 'no route matched' in Ember.js and show 404 page? 了解解决此问题的其他方法。
希望对你有帮助。
【讨论】：