5

Ember を使用して、この Web サイトのようなメニューを作成するにはどうすればよいでしょうか?

ページはさまざまなセクションに分割されており、スクロールして各セクションに移動できます。メニューをクリックすると、ページが目的のセクションにスクロールします。

この動作のためにルーターに異なるルートを設定する必要があるかどうかはわかりませんが、ルートを変更するとビューが DOM から削除されるため、そうではないと思います。
では、各セクションへのアンカー リンクをどのように作成すればよいでしょうか。

ページをスクロールするとルートが自動的に更新されるのが最適なソリューションですが、リンクと URL 認識を処理するソリューションはどれでも問題ありません。

4

2 に答える 2

1

そうでないと主張する人もいるかもしれませんが、Ember は、あなたが示したようなウェブサイトのランディング ページには少しやり過ぎかもしれません。Ember は、接続する必要がある複数のビューとデータを持つ堅牢な Web アプリ向けです。

まず、スクリプトを見ると、 jQuery を使用してbodyのscrollTop位置をそれぞれの divにアニメートし、メニュー要素の に設定window.location.hashしています。これはたまたまスクロールのID にもなっています。hashhref<section/>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 に答える