ember.js - emberjs - ember onclick

Emberjs se desplaza hacia arriba al cambiar de vista

Question

Cuando se cambia la vista principal de mi aplicación (nueva ruta que vuelve a conectar la salida principal de mi controlador de la aplicación) quiero que la página se desplace hacia arriba. De lo contrario, es un poco extraño que navegue a otra vista similar a una página y la ventana gráfica aún se pierda en algún lugar donde lo dejé.

Hacké una solución y me pregunto si hay una mejor manera o si alguien tiene la misma cosa.

Esto es lo que hago:

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

Answer 1

Ahora es render(name, options) , y si está llamando específicamente a render (es decir, con un modal), quiere pasarlo a super ()

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

Answer 2

Guión de café:

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

Javascript:

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

Answer 3

La solución de @Baruch es buena, pero cuando la implementé, había renderizado en elementos dentro del estado de mi aplicación y causaba un scrollTop cuando no era necesario.

Encontré que esto es mucho más efectivo ya que solo se ejecuta en el cambio de ruta:

App.ApplicationController = Ember.Controller.extend({

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

});

Answer 4

Logré esto con el siguiente código:

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

Answer 5

Probablemente debería intentar extender Ember.Route y agregar su window.scrollTo en la devolución de llamada. Luego, en lugar de utilizar la Route de Ember para sus rutas de hoja, usted llama a su ruta. extend() , por lo que se desplazarán automáticamente hacia arriba cuando ingrese una ruta / estado. Algo similar a esto:

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

¿tiene sentido?