javascript - EmberJS - 如何在路线后滚动到导出？

Question

我的申请模板:

<div class ="row">
  <div class="hide-for-large-only small-12 text-center columns">
    <h1 class="subheader"> Departments </h1>
  </div>
  <div class="small-12 large-3 large-pull-1 columns">
    <ul class="no-bullet sid-nav">
      <li>{{#link-to "Departments.Foo"}}Foo{{/link-to}}</li>
      <li>{{#link-to "Departments.Bar"}}Bar{{/link-to}}</li>
      <li>{{#link-to "Departments.FooBar"}}FooBar{{/link-to}}</li>
      <li>{{#link-to "Departments.BarFoo"}}BarFoo{{/link-to}}</li>
    </ul>
  </div>

  <div class="small-12 large-9 columns ">
    {{outlet}}
  </div>
</div>

对于桌面版本，滚动到窗口顶部似乎没问题。

App.ApplicationController = Em.Controller.extend({
  currentPathChanged: (function() {
    return window.scrollTo(0, 0);
  }).observes("currentPath")
});

但在移动版本中，点击链接后，底部的内容更改不会被注意到，因为 {{outlet}} 位于侧面导航下方。那么如何在 Route 之后自动滚动到 {{outlet}} 呢？

Answer 1

您需要确保在新 View (在路由更改时)完全呈现之后发生 window.scrollTo 调用。 Ember.js 专门为此提供了一个队列:afterRender .

让我们定义一个可以在 View 中使用的 mixin，以便每当该 View 呈现时，它都会将窗口滚动到其模板的起始位置:

App.ScrollToMixin = Ember.Mixin.create({
  setupScrollToOutlet: function() {
    Ember.run.scheduleOnce('afterRender', this, function(){
      var position = this.$().offset().top;
      window.scrollTo(0, position);
    });
  }.on('didInsertElement')
});

假设您访问 posts 路线，并且导出位于页面的深处。将 App.ScrollToMixin 包含到 App.PostsView 中，它会将窗口滚动到 posts.handlebars 起始位置:

App.PostsView = Ember.View.extend(App.ScrollToMixin);

演示:http://emberjs.jsbin.com/miqakovu/4/edit