2013-05-10 8 views
6

W mojej aplikacji Ember, jak mogę przeskoczyć do kotwicy HTML wewnątrz jednego z moich szablonów Handlebars? I created a jsFiddle that shows what I want to accomplish.Korzystanie z kotwic HTML w Ember.js

Tło
Model nawigacji Ember za pośrednictwem aplikacji korzysta z kotwic HTML.

mam następujący wymóg: kiedy użytkownik kliknie na Kierownica linkTo pomocnika, aby przejść do nowego Trasa Cel przeglądarka powinien automatycznie przejść do kotwicy wewnątrz szablonu Kierownice związanego z tym nowym Trasa Cel.

+0

jaki [typ adresu URL] (http://emberjs.com/guides/routing/specifying-the-location-api/) używasz? Domyślnie Ember używa skrótu (#), który koliduje z kotwicami. Technicznie, możesz użyć scrollspy (lub czegoś podobnego), jeśli zaimplementujesz adresy URL klientów [hashbang (#!)] (Http://stackoverflow.com/questions/14929170/hashbang-urls-using-ember-js). – MilkyWayJoe

+0

@MilkyWayJoe Używam domyślnej nawigacji opartej na hash Embera. Właśnie wypróbowałem nawigację opartą na historii, ale nie działało to zarówno w mojej własnej aplikacji, jak iw moim jsFiddle wspomnianym powyżej (wyjątek "Żadna trasa nie pasowała do adresu URL"/_display/"") ... dziękuję za sugestie scrollspy i hashbang, które teraz zbadam. – Abdull

+0

możliwy duplikat łącza kotwicy [Ember.js] (http://stackoverflow.com/questions/18445661/ember-js-anchor-link) – givanse

Odpowiedz

0

Aby przewinąć do określonej sekcji, użyj jquery.

$('html,body').animate({ 
    scrollTop: $("a[name='someAnchor']").offset().top 
}); 

Odwołaj się pod tym samym względem this SO answer.

Aby przewinąć do kotwicy po renderowaniu widoku, należy zastąpić didInsertElement w definicji widoku trasy.

Odwołaj się pod tym samym względem this SO answer.

App.LonglistView = Ember.View.extend({ 
    didInsertElement: function() { 
     // Place the scroll to anchor code here. 
     $('html,body').animate({ 
      scrollTop: $("a[name='someAnchor']").offset().top 
     }); 
    } 
}); 

Oto a working example w jsfiddle (nie wprowadził żadnych modeli danych dla jasności)

EDIT: Można również używać non-jquery sposób to zrobić przewijanie

document.getElementsByTagName('a')[name='someAnchor'].scrollIntoView() 

The jsfiddle example za to samo.