Маршрутизатор Aurelia, html только просмотры, добавить немного JavaScript?

Question

У меня есть дочерний маршрутизатор в одном из моих представлений.Этот дочерний маршрутизатор используется, чтобы позволить людям переходить к различным подпредставлениям.Теперь эти подпредставления не требуют какой-либо логики, поэтому, используя только представление .html без js viewmodel works find.Это то, что некоторые из этих подпредставлений довольно длинные, и если вы переходите от одного к другому, то положение прокрутки остается на том же месте, что и на предыдущей странице.

configureRouter(config, router) {

  config.map([
    { route: '', name: 'main', moduleId: 'main_view', nav: false, title: 'Main' },
    { route: 'sub_view_1', name: 'p1', moduleId: 'sub_view_1.html', nav: true },
    { route: 'sub_view_2', name: 'p1', moduleId: 'sub_view_2.html', nav: true },
    { route: 'sub_view_3', name: 'p2', moduleId: 'sub_view_3.html', nav: true },
    { route: 'sub_view_4', name: 'p3', moduleId: 'sub_view_4.html', nav: true },
    { route: 'sub_view_5', name: 'p4', moduleId: 'sub_view_5.html', nav: true },
    { route: 'sub_view_6', name: 'p5', moduleId: 'sub_view_6.html', nav: true } 
  ]);

  this.router = router;
}

Возможное решение - добавитьтег script со следующим запросом к каждому подпредставлению:

$('html, body').animate({ scrollTop: 0 }, 'slow');

Однако это будет смешивать js и html.

Другим возможным решением будет создание модели представления для каждого изподвиды.Но кажется, что нужно просто добавить одну строку кода.

Есть ли другое возможное решение?Может быть, у каждой ссылки на подвид есть одна и та же модель представления?

Answer 1

Я нашел интересный способ прокрутки вверх без JQuery и без добавления дополнительного класса VM.

Я предполагаю, что у вас есть контейнер переполнения в каждом из ваших представлений (элемент, который имеет фактическийполоса прокрутки).просто добавьте привязку one-time к этому контейнеру для свойства scrolltop, вы свяжете его со значением 0 и все готово.это работает, потому что каждый раз, когда будет загружено новое представление, aurelia будет перепривязывать эту привязку, в результате чего свойство scrollTop этого элемента будет иметь значение 0.

. Единственное сокращение состоит в том, что у вас не будет хорошегоэффект прокрутки.

<template>
    <div scrolltop.one-time="0"> <!-- your overflow container -->
      a very big html fragment that causes scrolling<br>
      a very big html fragment that causes scrolling<br>
      ...
  </div>
</template>

Answer 2

В настоящее время вы должны иметь класс VM для каждой страницы.Это раздражает, но это так, как сейчас.Класс может быть пустым, хотя.Это может быть так просто:

export class EmptyVM { }

Что касается кода, который вы хотите запустить при рендеринге каждого представления, я бы рекомендовал подключить postRender к маршрутизатору.

export class Page {
  configureRouter(config, router) {
    config.addPostRenderStep(ScrollToTopRenderStep);

    config.map([
      { route: '', name: 'main', moduleId: 'main_view', nav: false, title: 'Main' },
      { route: 'sub_view_1', name: 'p1', moduleId: 'sub_view_1', nav: true },
      //...
    ]);

    this.router = router;
   }
 }

 class ScrollToTopRenderStep {
   run(navigationInstruction, next) {
     $('html, body').animate({ scrollTop: 0 }, 'slow');
   }
 }