Emberjs scrollen Sie nach oben, wenn die änderung anzeigen

Wenn der Haupt-anzeigen für meine Anwendung ist umschaltbar (neue route, verbindet die Steckdose meiner Bewerbung controller) ich möchte, dass die Seite gescrollt werden, an die Spitze. Ansonsten ist es ein bisschen seltsam, dass ich das navigieren zu einer anderen Seite-wie der Ansicht und der viewport ist noch irgendwo verloren, wo ich aufgehört habe.

Ich gehackt eine Lösung und Frage mich, ob es eine bessere Möglichkeit oder hat jemand die gleiche Sache.

Hier ist was ich tun:

App.ApplicationController = Ember.Controller.extend({
  connectOutlet: function(){
    window.scrollTo(0, 0);
    this._super.apply(this, arguments);
  }
});

InformationsquelleAutor xMartin | 2012-10-29

ember.js

6

Sollten Sie wahrscheinlich versuchen und erweitern Ember.Route und fügen Sie Ihre window.scrollTo im enter Rückruf. Dann anstelle der Verwendung von Ember Route für Ihr Blatt Routen, rufen Sie Ihre route .extend(), so werden Sie automatisch nach oben scrollen, wenn Sie geben Sie eine route/Staat. Etwas ähnliche dieser:
```
//define your custom route and extend "enter"
var MyRoute = Em.Route.extend({
    enter: function(router) {
        //for now on, all the routes that extend this, 
        //will fire the code in this block every time
        //the application enters this state
        //do whatever you need to do here: scroll and whatnot
    }
});

App.Router = Em.Router.extend({
    enableLogging: true,
    location: 'hash',
    index: Em.Route.extend({
            route: '/',
            connectOutlets: function(router) {
                ...
            },
            //on your leaf routes, use your own custom route that 
            //does your scroll thing or whatever you need to do 
            home: MyRoute.extend({
                route: '/',
                connectOutlets: function (router, context) {
                     ...
                }
            }),
            //other routes...
       })
});
```
macht es Sinn?
- Ihr Ansatz, die perfekt Antwort auf die Frage. Ja, es scheint an den Routen lassen und nicht über den application-controller.
- Könnte man auch wieder öffnen Ember.Route und überprüfen Sie auf jedem "enter" - Ereignis falls dieses.childStates.Länge 0 ist, so wissen Sie, es ist ein verlassen der route. Beide Ansätze lassen die Verantwortung, die Sie diesen Aufruf._super wenn Sie müssen, verwenden Sie die "enter" - Ereignis in bestimmten Routen.
- Nur Bedenken Sie, dass die Wiedereröffnung Ember.Route ist, die Sie würde overtiring die enter Funktion für alle Routen. Sie vielleicht wollen, halten Sie die original-Funktionalität in das framework und der Erweiterung auf Ihrem eigenen lib.
- Für neuere ember-Nutzer stolpern auf diesem Route#enter ist ein privates Haken, die Sie verwenden sollten Route#activate. In jedem Fall stellen Sie sicher, Sie rufen this._super.apply(this, arguments); innerhalb Ihrer Methode.
InformationsquelleAutor MilkyWayJoe
19

@Baruch ' s Lösung ist gut, aber wenn ich es umgesetzt hatte ich die Anzeige auf Elemente innerhalb meiner Anwendung, Staat und würde einen scrollTop, wenn es nicht notwendig war.

Ich fand, dass dies sehr viel effektiver als läuft er nur über den Pfad ändern:
```
App.ApplicationController = Ember.Controller.extend({

  currentPathChanged: function () {
    window.scrollTo(0, 0);
  }.observes('currentPath')

});
```
- Ich mag diesen Ansatz auch, vielen Dank für die Buchung.
InformationsquelleAutor Michael Benin

Ich erreichte dies mit dem folgenden code:

Ember.Route.reopen({
  render: function(controller, model) {
    this._super();
    window.scrollTo(0, 0);
  }
});

InformationsquelleAutor Baruch

7

Kaffee-Skript:
```
Ember.Route.reopen
    activate: ->
      @_super()
      window.scrollTo(0, 0)
```
Javascript:
```
Ember.Route.reopen({
  activate: function() {
      this._super();
      window.scrollTo(0, 0);
  }
});
```
- Für was es Wert ist diese Vorgehensweise vorgeschrieben ist, das offiziell durch die Glut docs, zumindest in dem Kochbuch: guides.emberjs.com/v1.11.0/cookbook/... Und dies ist auch der einzige Ansatz, der arbeitete, für meine situation, mit der neuesten ember-cli, ich hatte zum erstellen einer mixin und ziehen Sie es auf jeder betroffenen Strecke. Konnte es nicht das Feuer auf die Anwendung die route für alle Kinder Strecken.
InformationsquelleAutor Zach Winkler

Es ist jetzt render(name, options), und wenn Sie speziell den Aufruf render (dh mit einer modal), die Sie übergeben möchten, dass super()

Ember.Route.reopen({
  render: function(name, options) {
    if (name != null) {
      return this._super(name, options);
    } else {
      return this._super();
    }
  }
});

InformationsquelleAutor andorov

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.