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?