Emberjs : défilement vers le haut lors d'un changement de vue

Question

Lorsque la vue principale de mon application est changée (nouvelle route qui reconnecte la sortie principale du contrôleur de mon application), je veux que la page soit déroulée vers le haut. Sinon, il est un peu étrange que je navigue vers une autre vue de type page et que la vue soit toujours perdue quelque part là où je l'ai laissée.

J'ai trouvé une solution et je me demande s'il existe un meilleur moyen ou si quelqu'un a le même problème.

Voilà ce que je fais :

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

Answer 1

La solution de @Baruch est bonne, mais lorsque je l'ai mise en œuvre, j'avais des éléments de rendu dans l'état de mon application et cela provoquait un scrollTop alors que ce n'était pas nécessaire.

J'ai trouvé cette méthode beaucoup plus efficace car elle ne fonctionne que lors du changement de chemin :

App.ApplicationController = Ember.Controller.extend({

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

});

Answer 2

J'ai obtenu ce résultat avec le code suivant :

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

Answer 3

Café script :

Ember.Route.reopen
    activate: ->
      @_super()
      window.scrollTo(0, 0)

Javascript :

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

Answer 4

Vous devriez probablement essayer d'étendre Ember.Route et ajoutez votre window.scrollTo dans le enter le rappel. Ensuite, au lieu d'utiliser la méthode d'Ember Route pour vos routes de feuilles, vous appelez votre route . extend() afin qu'ils défilent automatiquement vers le haut lorsque vous entrez une route/un état. Quelque chose similaire à ça :

// 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...
       })
});

Est-ce que ça a un sens ?

Answer 5

C'est maintenant render(name, options) et si vous appelez spécifiquement render (c'est-à-dire avec une modale), vous devez le passer à super().

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