Question

我的观点之一是有一个子路由器。此子路由器用于允许人们导航到不同的子视图。现在这些子视图不需要任何逻辑，因此只使用没有js viewmodel的.html视图即可找到。这是因为其中一些子视图相当长，如果从一个子视图导航到下一个子视图，则滚动位置将与上一页保持在同一位置。

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

当前，您需要为每个页面都有一个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');
   }
 }

Answer 2

我找到了一种有趣的方法，可以在不使用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>

Aurelia路由器，仅html视图，添加一些javascript？

2 个答案: