我使用Ember.Service作为一个长期的ember对象,因为我需要它在我的应用程序的不同部分中可用。
import Ember from 'ember';
export default Ember.Service.extend({
user:null,
updateActiveUser(user){
this.set('user',user);
},
getActiveUser(){
const user=this.get('user');
if(user){
return user;
}else{
return null;
}
}
});
在我的组件上,我以这种方式要求此用户: 从'余烬'中导入Ember;
export default Ember.Component.extend({
activeUser:Ember.inject.service('active-user'),
list: [],
selectedUser:null,
didReceiveAttrs() {
this._super();
this.set('list',this.get('model'));
const active=this.get('activeUser').getActiveUser();
if(active){
this.set('selectedUser',active);
}else{
this.set('selectedUser',this.get('model').objectAt(0));
}
},
actions:{
selectUser(user){
this.set('selectedUser',user);
this.get('activeUser').updateActiveUser(user);
}
}
});
我的问题是,在我选择一个用户然后重新加载页面时,没有保存最后选择的用户并显示默认用户。
答案 0 :(得分:4)
(问题稍有改动后编辑)
即使在页面刷新后,您也试图让应用状态在客户端的浏览器中保留。
我认为你应该考虑使用localStorage。
在您的服务中执行以下操作:
import Ember from 'ember';
export default Ember.Service.extend({
user: null,
updateActiveUser(user){
this.set('user', user);
// persist the user's browser so it can be retrieved on reload
localStorage.setItem('user', JSON.stringify(user));
},
getActiveUser(){
var user = this.get('user');
if (user) {
return user;
} else {
// try to get the user from localStorage
var foundUser = JSON.parse(localStorage.user);
if (foundUser) {
this.set('user', foundUser);
return foundUser;
} else {
return null;
}
}
}
});
最后,你为什么要使用const
?如果你永远不会改变变量,那就意味着要使用它。但看起来用户经常更换。如果更改标记为 const 的变量,ES6应该抛出异常。 const - MDN
答案 1 :(得分:2)
您没有在代码中为用户分配未定义的变量
updateActiveUser(user){
this.set('user',kid);
}
应为this.set('user', user);
<强>更新强>
问题在于,Ember服务不会通过页面重新加载,因为所有JS都被丢弃并重新加载(包括您的应用程序)。
您可以将服务中的数据存储在浏览器本地存储或类似内容中。