如何在Ember中製作單頁菜單？

我想知道如何在Ember中製作像this website這樣的菜單？如何在Ember中製作單頁菜單？

頁面被分割成不同的部分，我們可以滾動到每個部分，點擊菜單使頁面滾動到想要的部分。

我不確定在路由器中是否應該爲此行爲設置不同的路由，我猜測情況並非如此，因爲當我們更改路由時，視圖將從DOM中刪除。
那麼，我應該如何建立每個部分的錨鏈接？

當我們滾動頁面時，最好的解決方案會自動更新路線，但任何處理鏈接和URL識別的解決方案都可以。

來源

2013-03-25 Adrien Coquio

如果您找到了解決方案，您會很高興將您的解決方案發布回來。 – brg 2013-04-26 18:11:37

我會但實際上我沒有找到一個適當的解決方案...仍然在等待相關答案。 – 2013-04-27 20:02:25

好的歡呼，如果我設法得到解決方案，我也會回到這裏。 – brg 2013-04-29 07:55:52

有些人可能會反對，但是Ember對於像您所示的網站登陸頁面可能有點矯枉過正。 Ember意味着更強大的Web應用程序，它們需要連接多個視圖和數據。

首先，如果你look at their script，他們正在使用jQuery scrollTop位置動畫body的到相應的股利和設置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做這件事，你最終可能會做一些類似於從/路徑加載的單一視圖，所以我甚至不會擔心Ember，直到你的網站成爲一個完整的網站應用程序。

來源

2013-04-05 15:10:30 Corey

感謝您的回答@Corey！其實，我不想爲簡單的應用程序提供這種菜單。我有一個完整的Ember應用程序，我需要這種菜單在應用程序中的一個頁面。我瞭解它是如何在我給出的網站上製作的，但我需要在一個Ember應用程序的頁面中實現此功能，以便URL末尾的錨點不能幫助我。我錯過了什麼？您的索引頁中的 – 2013-04-05 17:56:10

嘗試使用*:捕獲要處理此方案的頁面中路由器上的所有模式。

因此可以說索引將作爲單個頁面工作，您必須能夠自動滾動到URL中的某些元素。

還你帖子和約，你可以通過鏈接到從索引頁子頁面。

然後...

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?還有一些其他解決方法。

我希望這可以幫助你。

來源

2013-05-29 22:00:49

使用句柄{{＃link-to'about'}}關於{{/ link-to}}語法以獲得這些路線 – 2013-11-24 11:29:22

如何在Ember中製作單頁菜單？

回答

相關問題