Emberjs在更改視圖時滾動到頂部

切換我的應用程序的主視圖（重新連接應用程序控制器的主插座的新路徑）我希望頁面滾動到頂部。否則，我有點奇怪，導航到另一個類似頁面的視圖，並且視口仍然丟失在我離開的地方。Emberjs在更改視圖時滾動到頂部

我破解了一個解決方案，並想知道是否有更好的方法或者是否有人擁有相同的東西。

這是我做的：

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

來源

2012-10-29 xMartin

你應該嘗試和擴展Ember.Route並添加window.scrollTo在enter回調。然後，您不必使用Ember的Route作爲您的葉子路線，而是調用您的路線。 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-09 20:48:09 MilkyWayJoe

你的方法完美地回答了這個問題。是的，它似乎是關於離開路線，而不是關於應用程序控制器。 – xMartin

如果this.childStates.length爲0，您也可以重新打開Ember.Route並檢查每個「輸入」事件，因此您知道這是一個離開路線。如果您需要在特定路線中使用「輸入」事件，兩種方法都會將責任推給this._super。 – xMartin

請記住，重新開啓'Ember.Route'就是你會爲所有**路線提高輸入功能。您可能想保留框架中的原始功能並在自己的lib中進行擴展。 – MilkyWayJoe

我用下面的代碼來實現這一點：

Ember.Route.reopen({ 
    render: function(controller, model) { 
    this._super(); 
    window.scrollTo(0, 0); 
    } 
});

來源

2013-10-14 10:15:01 Baruch

@巴魯克的解決方案是好的，但是當我實現它，我必須呈現在我的應用程序狀態中的元素，並會導致scrollTop的是在不需要的時候。

我發現，因爲它僅在通路改變運行此要有效得多：

App.ApplicationController = Ember.Controller.extend({ 

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

});

來源

2013-10-21 16:30:11

我也喜歡這種方法，謝謝發佈。 –

@邁克爾 - 貝寧似乎是一個不錯的解決方案，但是當URL中包含像/後參數不起作用/ POST_ID。

電流通路的變化使用像「post.index」路線的名稱，僅在參數「POST_ID」不改變改變

來源

2013-10-28 17:37:08 Krumpi

咖啡腳本：

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

的Javascript：

Ember.Route.reopen({ 
    activate: function() { 
     this._super(); 
     window.scrollTo(0, 0); 
    } 
});

來源

2013-11-24 00:22:37

這是值得的這是由Ember文檔正式規定的方法，至少在食譜中是這樣的：http://guides.emberjs.com/v1.11.0/cookbook/user_interface_and_interaction/resetting_scroll_on_route_changes/ 而且這也是唯一能夠適應我的情況的方法是使用最新的ember-cli，我必須創建一個mixin並將其引入每個受影響的路線。無法讓它在所有子路由的應用程序路由上觸發。 – Mattygabe

它現在render(name, options)，如果你是專門調用render（即用模式）要傳遞到超（）

Ember.Route.reopen({ 
    render: function(name, options) { 
    if (name != null) { 
     return this._super(name, options); 
    } else { 
     return this._super(); 
    } 
    } 
});

來源

2014-07-22 02:51:46 andorov

Emberjs在更改視圖時滾動到頂部

回答

相關問題