Verwendung von HTML-Ankern in Ember.js

Wie kann ich in meiner Ember-Anwendung zu einem HTML-Anker innerhalb einer meiner Lenker-Vorlagen springen? I created a jsFiddle that shows what I want to accomplish.Verwendung von HTML-Ankern in Ember.js

Hintergrund
Ember Modell der Navigation durch eine Anwendung verwendet HTML-Anker.

Ich habe folgende Anforderung: wenn ein Benutzer auf einem Helfer Lenker linkTo klickt auf ein neues Route Ziel zu navigieren, der Browser automatisch auf einen Anker innerhalb des Lenkers Vorlage zu diesem neuen Routenziel zugeordnet bewegen sollte.

Quelle

2013-05-10 Abdull

Was [Art der URL] (http://emberjs.com/guides/routing/specifying-the-location-api/) verwenden Sie? Standardmäßig verwendet Ember einen Hash (#), der mit Ankern kollidiert. Technisch gesehen könnten Sie scrollspy (oder etwas Ähnliches) verwenden, wenn Sie [hashbang (#!)] (Http://stackoverflow.com/questions/14929170/hashbang-urls-using-ember-js) Client-URLs implementieren. – MilkyWayJoe

@MilkyWayJoe Ich verwende Embers standardmäßige Hash-basierte Navigation. Ich habe nur die Geschichte-basierte Navigation versucht, aber es hat nicht funktioniert sowohl in meiner eigenen App und meine jsFiddle oben erwähnt (Ausnahme "' No Route entsprach der URL '/ _display /' "') ... danke für die scrollspy und hashbang Vorschläge, die ich jetzt untersuchen werde. – Abdull

mögliches Duplikat von [Ember.js Ankerlink] (http://stackoverflow.com/questions/18445661/ember-js-anchorlink) – givanse

Verwenden Sie jquery, um zu einem bestimmten Abschnitt zu blättern.

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

Siehe this SO answer in Bezug auf die gleiche.

Um zum Anker zu scrollen, nachdem die Ansicht gerendert wurde, überschreiben Sie die didInsertElement in Ihrer Definition für die Ansicht Ihrer Route.

Siehe this SO answer in Bezug auf die gleiche.

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

ist hier a working example in jsfiddle (Ich habe keine Datenmodelle für Klarheit hinzugefügt)

EDIT: Sie könnten auch nicht-jquery Weise nutzen das Scrollen

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

Die jsfiddle example zu tun für das Selbe.

Quelle

2014-06-25 09:49:28

Verwendung von HTML-Ankern in Ember.js

Antwort

Verwandte Themen