通过路由转换维护组件状态 - EmberJS
Maintaining component state through route transitions - EmberJS
我正在使用 Ember 构建单页音乐网络应用程序。每个轨道在页面上都表示为一个组件。给定页面上有许多曲目。当用户点击播放时,组件会更新其 UI 以反映这一点,并且主路由会跟踪当前正在播放的曲目。
但是当我切换路线探索应用程序的其他部分,然后 return 到正在播放曲目的那个部分时,Ember 已经销毁并重建了每个组件,将所有内容设置回它的初始状态并使路由的 current_track 对象过时。
如何在路由转换中最好地保持这样的状态?
我的路线层次结构:
master-route
liked-tracks
favorite-tracks
posted-tracks
另一种思考方式是:在 soundcloud 上,您播放曲目,然后导航到不同的路线。当您返回时,播放元素并未丢失其状态或已重建。
你可以有一个控制器 属性 currentTrack 并将其传递给组件以维护当前播放的音轨。
Ember.Controller.extend({
currentTrack: 0,
actions: {
playNext() {
this.incrementProperty('currentTrack');
}
}
});
{{sound-track currentTrack=currentTrack}}
我在这上面做了Fiddle。看看这个。
正确的做法是服务。
您可能会有一个服务 player
并将其注入到您的组件中。然后你就有了一个方便的地方来管理所有放置器的东西,并可以在你的组件中使用它。
您可以只访问服务上的 属性,甚至可以像这样在计算的 属性 中使用它:
player: Ember.inject.service(),
isCurrentTrack: Ember.computed('track', 'player.currentTrack', {
get() {
return get(this, 'track') === get(this, 'player.currentTrack');
}
}),
这实际上是服务的用例!
我正在使用 Ember 构建单页音乐网络应用程序。每个轨道在页面上都表示为一个组件。给定页面上有许多曲目。当用户点击播放时,组件会更新其 UI 以反映这一点,并且主路由会跟踪当前正在播放的曲目。
但是当我切换路线探索应用程序的其他部分,然后 return 到正在播放曲目的那个部分时,Ember 已经销毁并重建了每个组件,将所有内容设置回它的初始状态并使路由的 current_track 对象过时。
如何在路由转换中最好地保持这样的状态?
我的路线层次结构:
master-route
liked-tracks
favorite-tracks
posted-tracks
另一种思考方式是:在 soundcloud 上,您播放曲目,然后导航到不同的路线。当您返回时,播放元素并未丢失其状态或已重建。
你可以有一个控制器 属性 currentTrack 并将其传递给组件以维护当前播放的音轨。
Ember.Controller.extend({
currentTrack: 0,
actions: {
playNext() {
this.incrementProperty('currentTrack');
}
}
});
{{sound-track currentTrack=currentTrack}}
我在这上面做了Fiddle。看看这个。
正确的做法是服务。
您可能会有一个服务 player
并将其注入到您的组件中。然后你就有了一个方便的地方来管理所有放置器的东西,并可以在你的组件中使用它。
您可以只访问服务上的 属性,甚至可以像这样在计算的 属性 中使用它:
player: Ember.inject.service(),
isCurrentTrack: Ember.computed('track', 'player.currentTrack', {
get() {
return get(this, 'track') === get(this, 'player.currentTrack');
}
}),
这实际上是服务的用例!