通过路由转换维护组件状态 - EmberJS答案

【问题标题】：Maintaining component state through route transitions - EmberJS通过路由转换维护组件状态 - EmberJS
【发布时间】：2016-08-11 22:40:39
【问题描述】：

我正在使用 Ember 构建单页音乐网络应用程序。每个轨道在页面上表示为一个组件。给定页面上有许多曲目。当用户单击播放时，组件会更新其 UI 以反映这一点，并且主路由会跟踪当前正在播放的曲目。

但是当我切换路线以探索应用程序的其他部分，然后返回到正在播放曲目的位置时，Ember 已经销毁并重建了每个组件，将所有内容设置回其初始状态，并使路线的 current_track 对象过时.

如何在路由转换中最好地保持这样的状态？

我的路线层次结构：

master-route 
    liked-tracks
    favorite-tracks
    posted-tracks

另一种思考方式是：在 soundcloud 上，您播放曲目，然后导航到不同的路线。当您向后导航时，正在播放的元素并没有丢失其状态或被重建。

【问题讨论】：

标签： javascript ember.js ember-cli

【解决方案1】：

正确的做法是服务。

您可能会有一个服务player 并将其注入到您的组件中。然后你就有了一个方便的地方来管理你所有的布局器东西，并且可以在你的组件中使用它。

您可以只访问服务上的属性，甚至可以在计算属性中使用它，如下所示：

player: Ember.inject.service(),
isCurrentTrack: Ember.computed('track', 'player.currentTrack', {
  get() {
    return get(this, 'track') === get(this, 'player.currentTrack');
  }
}),

这实际上是服务的用例！

【讨论】：

每当音乐开始时，然后更新播放器服务的 currentTrack 属性，而不是在主路由中。

【解决方案2】：

您可以拥有一个控制器属性 currentTrack 并将其传递给组件以维护当前播放的音轨。

Ember.Controller.extend({
  currentTrack: 0,
  actions: {
    playNext() {
      this.incrementProperty('currentTrack');
    }
  }
});


{{sound-track currentTrack=currentTrack}}

我已经为此制作了Fiddle。看看这个。

【讨论】：