5

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

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

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

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

4

2 回答 2

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;
});

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

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

于 2013-04-05T15:10:30.790 回答
0

*:尝试在要处理这种情况的页面上的路由器中使用catch all 模式。

所以可以说索引将作为一个页面工作，您必须能够自动滚动到 url 中的某些元素。

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

然后...

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

});

因此，如果您有一个 id="elementToScrollTo" 的元素，那么 url /#elementToScrollTo 将加载索引页面并滚动到该元素。

请参阅如何在 Ember.js 中处理“没有匹配的路由”并显示 404 页面？还有一些其他的方法来解决这个问题。

我希望这可以帮助你。

于 2013-05-29T22:00:49.587 回答