Ancora denominata in un'applicazione a singola pagina (SPA)

Question

In una SPA, utilizzando un framework di navigazione come Sammy.js, come potrei utilizzare nella pagina denominata ancore per la navigazione in-page?

ad es. Dire che ho un percorso come localhost/myapp/#/somerecord/1 dove i carichi applicativi somerecord con id = 1.

Tuttavia somerecord è davvero complicato e lungo. Voglio essere in grado di passare a una determinata sezione usando un'ancora con nome.

Di 'un elemento articolo è definito come <article id=section-d> ... </article> e ho appena collegamento a piacermi <a href=#section-d>Section D</a> funziona tecnicamente, ma l'URL legge come localhost/myapp/#section-d, questo rompe lo stack di navigazione. Premendo il pulsante Indietro mi riporta a localhost/myapp/#/somerecord/1 e senza saltando di nuovo in cima.

L'azione preferita sarebbe quella di tornare in cima o alla pagina precedente. Qualche idea su come realizzare questo?

Answer 1

Ho avuto lo stesso problema con durandal con sammy.js. Fondamentalmente, devi creare una rotta (invisibile) per ogni ancora che vuoi sulla tua pagina. Vedere un post da me sulla soluzione che ho trovato: http://papamufflon.blogspot.de/2013/04/durandal-scrollspy.html

Answer 2

In effetti, è necessario definire l'URL come espressione regolare e consentire un hash di segnalibro opzionale alla fine di esso; qualcosa di simile:

get(/#\/somerecord\/(\d+)(#.+)?/, function() { 
    var args = this.params['splat']; 
    var recordId = args[0]; 
    var articleId = args[1]; 
}); 

Questo deve corrispondere uno dei seguenti percorsi:

• #/somerecord/1
• #/somerecord/1 # (trattato come se non v'è alcun articolo id)
• #/somerecord/1 # sezione-d (articleId = '# sezione-d')

Si dovrebbe quindi essere in grado di utilizzare l'articleId per trovare l'abbinamento ele e scorrere manualmente. per esempio. nell'ultima percorso sopra, usando jQuery si potrebbe fare qualcosa di simile:

var $article = $(articleId); 
    $(document.body).animate({ scrollTop: $article.offset().top }); 
}); 

ho appena scritto un articolo più completo su questo (usando Durandal), se siete interessati: http://quickduck.com/blog/2013/04/23/anchor-navigation-durandal/

Modifica Il collegamento è morto. L'articolo disponibile qui http://decompile.it/blog/2013/04/23/anchor-navigation-durandal/