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}}低于侧边导航，因此内容的更改在底部不会被注意到。那么如何在路线后自动滚动到{{outlet}}？

Answer 1

您需要确保在完全呈现新视图（路由更改时）后发生window.scrollTo调用。 Ember.js提供了一个完全符合该队列的队列：afterRender。

让我们定义一个可以在视图中使用的mixin，这样无论何时渲染该视图，它都会将窗口滚动到其模板的起始位置：

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

Answer 2

这与Ember.js没什么关系，这是直接的Javascript（如果你愿意，还可以是jQuery）。首先，添加ID或唯一类：

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

然后，滚动到它：

window.scrollTo(0, $('#outlet_div').offset().top);

EmberJS - 如何在路线后滚动到插座？

2 个答案:

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