Emberjs прокручивает вверх, когда меняется вид

При переключении основного вида моего приложения (новый маршрут, который соединяет основную розетку моего контроллера приложения), я хочу, чтобы страница была прокручена вверх. В противном случае немного странно, что я перехожу к другому виду в виде страницы, и окно просмотра все равно потеряно где-то там, где я остановился.

Я взломал решение и задаюсь вопросом, есть ли лучший способ или кто-то имеет то же самое.

Вот что я делаю:

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

Ответ 1

Вероятно, вы должны попробовать и расширить Ember.Route и добавить window.scrollTo в обратный вызов enter. Затем вместо использования Ember Route для ваших листовых маршрутов вы вызываете свой маршрут. extend(), поэтому они автоматически прокручиваются, когда вы вводите маршрут/состояние. Что-то похожее на это:

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

это имеет смысл?

Ответ 2

@Baruch решение хорошо, но когда я его реализовал, я отобразил элементы в моем состоянии приложения и вызвал бы scrollTop, когда это было не нужно.

Я обнаружил, что это намного эффективнее, поскольку оно работает только при изменении пути:

App.ApplicationController = Ember.Controller.extend({

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

});

Ответ 3

Я достиг этого с помощью следующего кода:

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

Ответ 4

Кофе Script:

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

Javascript:

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

Ответ 5

@michael-benin кажется хорошим решением, но не работает, когда url содержит параметр like/post/post_id.

Изменение текущего пути использует имя маршрута, например "post.index", и не изменяет только изменения параметра "post_id"

Ответ 6

Теперь он render(name, options), и если вы специально вызываете render (т.е. с модальным), вы хотите передать это super()

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