EmberJS - 如何在路线后滚动到出口？答案

【问题标题】：EmberJS - How to scroll to outlet after a Route?EmberJS - 如何在路线后滚动到出口？
【发布时间】：2014-04-12 12:19:33
【问题描述】：

我的申请模板：

<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}} ？

【问题讨论】：

标签： javascript ember.js

【解决方案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

【讨论】：

【解决方案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);

【讨论】：