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して追加する必要があります。次に、リーフルートにEmberを使用する代わりに、ルートを呼び出します。、ルート/状態を入力すると、自動的に上にスクロールします。これに似たもの：window.scrollToenterRouteextend()

// 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 に答える