Ember.js против скроллинг амнезии

В публикации «Семь принципов создания современных веб-приложений» ^[1] в скроллинг-амнезии были уличены Facebook и Twitter.

При чтении статьи подумал, что в Ember приложении состояние скроллинга можно сохранять в queryParams ^[2]. Вкратце: это такая магия, позволяющая связывать переменные контроллера и параметры URL, сохраняя таким образом состояние приложения.

Буквально на следующий день после прочтения статьи мне попался вопрос на StackOverflow ^[3], где вопрошавший удивляется, почему у него не запоминается позиция скроллинга после перехода по ссылке и возврата обратно. Заинтересовался, насколько просто (или непросто) на самом деле решается эта проблема в Ember.

После недолгих экспериментов с queryParams и привязкой jQuery Events к Ember, пришел к коду контроллера в девять строк:

App.ApplicationController = Ember.Controller.extend({
  queryParams: ["scrollTop"],
  scrollTop: 0,
  handleScroll: function() {
    this.set('scrollTop', $('body').scrollTop());
  },
  bindScrollEvent: function() {
    $('body').scrollTop(this.get('scrollTop'));
    $(window).on('scroll', Ember.run.bind(this, this.handleScroll));
  }.on('init')
});

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

Еще одна маленькая деталь. При каждом изменении скроллинга, в историю браузера будет записываться новая ссылка. В данном случае это не нужно, историю лучше перезаписывать:

App.ApplicationRoute = Ember.Route.extend({
  queryParams: {
    scrollTop: {
      replace: true
    }
  },  
});

Итого пример приложения на JSBin ^[4] занимает всего 21 строку, вместе с инициализацией Ember, без ущерба для читаемости кода. Хорошая демонстрация мощи queryParams.