21

当我的应用程序的主视图被切换（重新连接我的应用程序控制器的主出口的新路由）时，我希望页面滚动到顶部。否则，我导航到另一个类似页面的视图并且视口仍然丢失在我离开的地方有点奇怪。

我破解了一个解决方案，想知道是否有更好的方法，或者是否有人有同样的方法。

这就是我所做的：

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

6 回答 6

20

@Baruch 的解决方案很好，但是当我实现它时，我在应用程序状态中的元素上进行了渲染，并且在不需要时会导致 scrollTop 。

我发现这更有效，因为它只在路径更改时运行：

App.ApplicationController = Ember.Controller.extend({

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

});
于 2013-10-21T16:30:11.860 回答
9

我通过以下代码实现了这一点：

Ember.Route.reopen({
  render: function(controller, model) {
    this._super();
    window.scrollTo(0, 0);
  }
});
于 2013-10-14T10:15:01.430 回答
7

咖啡脚本：

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

Javascript：

Ember.Route.reopen({
  activate: function() {
      this._super();
      window.scrollTo(0, 0);
  }
});
于 2013-11-24T00:22:37.737 回答
6

您可能应该尝试扩展Ember.Route并将您的添加window.scrollTo到enter回调中。然后，您无需将 EmberRoute用于您的叶子路由，而是调用您的路由。，因此当您输入路线/状态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...
       })
});

是否有意义？

于 2012-11-09T20:48:09.113 回答
1

现在是render(name, options)，如果您专门调用渲染（即使用模态），您希望将其传递给 super()

Ember.Route.reopen({
  render: function(name, options) {
    if (name != null) {
      return this._super(name, options);
    } else {
      return this._super();
    }
  }
});
于 2014-07-22T02:51:46.713 回答
1

Ember 3.12+ （这在技术上是此处列出的 3.20 代码）

import EmberRouter from '@ember/routing/router';

const Router = EmberRouter.extend({
  init() {
    // call event everytime route changes
    this.on('routeDidChange', () => {
      this._super(...arguments);
      window.scrollTo(0, 0); // scrolls to top
    });
  }
});

Router.map(function () {
  // your mapping code goes here
});

export default Router;

3.12 之前（这在技术上是 3.4，但关键代码应该相同）

import EmberRouter from '@ember/routing/router';

const Router = EmberRouter.extend({
  didTransition() {
    this._super(...arguments);
    window.scrollTo(0, 0);
   }
});

Router.map(function () {
  // your mapping code goes here
});


export default Router;

我们已经多次处理过这个问题，我们发现最简单和最直接的方法是使用“路由转换”事件函数在 router.js 文件中配置一次。我们didTransition在 Ember 3.12 中弃用它之前使用它来代替routeDidChange. 我在下面发布了两个示例。根据您使用的 Ember 版本，某些语法可能略有不同，但核心代码应该相同。

于 2020-10-23T19:23:17.417 回答