Geek asks and answers

How to make a one-page menu in Ember?

I am wondering how can I make a menu, for example, in this website with Ember?

The page is divided into different sections, and we can scroll it to go to each section by clicking on the menu so that the page scrolls to the desired section.

I am not sure that for this behavior I should have different routes in the router, I would suggest that this is not so, since when we change the route, the view is removed from the DOM.
Then, how do I build a binding for each section?

The best solution will automatically update the route when you scroll the page, but any solution for link processing and URL recognition will be fine.

+5
source share
2 answers

, Ember , . Ember -, , .

, script, jQuery body scrollTop div window.location.hash hash href, <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;
});

-, . , . , http://emberjs.com/#download.

Ember , , , - , /, Ember, -.

+1

*: catch all , .

, , URL.

, .

...

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

});

, id = "elementToScrollTo", url/# elementToScrollTo .

. " " Ember.js 404? .

, .

0

More articles:


All Articles