Come creare un menu a una pagina in Ember?

Question

Mi chiedo come posso creare un menu come in this website con Ember?

La pagina è suddivisa in diverse sezioni e possiamo scorrere per andare a ciascuna sezione, un clic sul menu far scorrere la pagina verso la sezione desiderata.

Non sono sicuro se dovrei avere percorsi diversi nel router per questo comportamento, direi che non è il caso, perché quando cambiamo percorso la vista viene rimossa dal DOM.
Quindi, come dovrei creare il collegamento dell'ancora ad ogni sezione?

La soluzione migliore aggiorna automaticamente il percorso quando si scorre la pagina ma qualsiasi soluzione per gestire il collegamento e il riconoscimento URL andrà bene.

Answer 1

Alcuni possono sostenere il contrario, ma Ember può essere un po 'eccessivo per una pagina di destinazione sito come hai mostrato. Ember si intende più per robuste applicazioni web che hanno più viste e dati con cui devono essere connessi.

Prima di tutto, se si look at their script, si sta utilizzando jQuery per animare s' il bodyscrollTop posizione al rispettivo div e l'impostazione window.location.hash alla hash dell'Enciclopedia di href elemento di menu, che avviene anche per essere l'ID del <section/> del body scorre a:

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

in secondo luogo, non stanno facendo nulla di speciale per caricare ad una posizione specifica al caricamento della pagina. Se carichi una pagina sul Web con un hash, il browser cercherà un elemento con quell'ID e verrà caricato in quella posizione. Ad esempio, http://emberjs.com/#download.

Anche se si desidera ancora utilizzare Ember per questo, probabilmente si finirà per fare qualcosa di simile con una singola vista caricata dal percorso / quindi non mi preoccuperei nemmeno di Ember finché il tuo sito non diventerà un vero e proprio sito web app.

Answer 2

Provare a utilizzare uno *: catturare tutti gli schemi del router nella pagina che si desidera gestire questo scenario.

quindi diciamo che l'indice funzionerà come una singola pagina che devi essere in grado di scorrere automaticamente verso determinati elementi dall'URL.

Inoltre si ha messaggi e circa sottopagine che si può andare dalla pagina di indice tramite link.

poi ...

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

}); 

quindi se avete un elemento con id = "elementToScrollTo" quindi l'url/# elementToScrollTo sarebbe caricare la pagina indice e scorrere fino a tale elemento.

Vedere How to handle 'no route matched' in Ember.js and show 404 page? anche per altri modi per risolvere questo problema.

Spero che questo ti aiuti.