Emberjs scorre verso l'alto quando si cambia vista

Question

Quando viene cambiata la vista principale dell'applicazione (nuova rotta che ricollega l'uscita principale del controller dell'applicazione) Voglio che la pagina venga spostata verso l'alto. Altrimenti è un po 'strano navigare in un'altra vista simile a una pagina e il viewport è ancora perso da qualche parte dove ho lasciato.

Ho violato una soluzione e mi chiedo se c'è un modo migliore o se qualcuno ha la stessa cosa.

Ecco quello che faccio:

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

Answer 1

Probabilmente si dovrebbe cercare di estendere Ember.Route e aggiungere il vostro window.scrollTo nel enter callback. Quindi, invece di usare il numero Route di Ember per i percorsi delle foglie, chiami il percorso. extend(), quindi scorreranno automaticamente quando si immettere un percorso/stato. Qualcosa di simile a questo:

// 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... 
     }) 
}); 

ha senso?

Answer 2

ho raggiunto questo con il seguente codice:

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

Answer 3

@ soluzione di Baruch è buono, ma quando ho realizzato che dovevo render su elementi all'interno del mio stato di applicazione e causerebbe una scrollTop quando non era necessario.

Ho trovato questo per essere molto più efficace in quanto viene eseguito solo sul cambiamento percorso:

App.ApplicationController = Ember.Controller.extend({ 

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

}); 

Answer 4

@ michael-Bénin sembra una buona soluzione, ma non funziona quando l'URL contiene un parametro come/post/post_id.

Il cambio di percorso corrente utilizza il nome del percorso come 'post.index' e non cambia solo il parametro 'post_id' cambia

Answer 5

Caffè Script:

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

Javascript:

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

Answer 6

e 'ora render(name, options), e se si sta chiamando specificamente il rendering (cioè con un modale) che si desidera passare che a super()

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