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

我正在使用Ember构建单页音乐Web应用程序。每条曲目都在页面上作为一个组件呈现。给定页面上有很多曲目。当用户点击播放时，组件会更新其UI以反映该内容，并且主路线会跟踪当前正在播放的曲目。通过路由转换维护组件状态 - EmberJS

但是，当我切换路线以探索应用程序的其他部分，然后返回到正在播放轨道的地方时，Ember已销毁并重建每个组件，将所有组件重新设置为其初始状态，并使路由的current_track对象过时。

我该如何最好地维护这样的跨越路径转换的状态？

我的路线层次：

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

另一种方式去思考的是这样的：上的SoundCloud，你玩一个轨道，然后导航到不同的路线。当您返回时，播放元素没有失去其状态或被重建。

来源

2016-08-11 user3661956

做到这一点的正确方法是服务。

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

你可以只访问一个属性上的服务，甚至用它在计算性能是这样的：

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

这实际上是的用例的服务！

来源

2016-08-12 20:50:17 Lux

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

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

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


{{sound-track currentTrack=currentTrack}}

我对此做了Fiddle。看看这个。

来源

2016-08-12 04:12:14 Raj

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

回答

相关问题