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

时间:2016-08-11 22:40:40

标签: javascript ember.js ember-cli

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

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

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

我的路线层次结构:

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

另一种思考方式是:在soundcloud上,你播放一首曲目,然后导航到另一条路线。当您向后导航时,播放元素没有丢失其状态或已重建。

2 个答案:

答案 0 :(得分:1)

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

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


{{sound-track currentTrack=currentTrack}}

我已经就这个做了Fiddle。看看这个。

答案 1 :(得分:1)

正确的方法是提供服务。

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

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

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

这实际上是服务的 用例!