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

Question

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

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

我如何最好地在整个路线转换中保持这种状态？

我的路线层次结构：

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

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

Answer 1

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

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


{{sound-track currentTrack=currentTrack}}

我为此做了小提琴 。 看看这个。

Answer 2

正确的方法是服务。

您可能会有一个服务提供player并将其注入到您的组件中。 然后，您将拥有一个方便的位置来管理所有放置程序内容，并且可以在组件内部使用它。

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

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

这实际上是服务的用例！