使用 Promises 对 Ember 对象数组进行排序
Sort Ember Object Array with Promises
我有模特
model/person
{
firstName: DS.attr( 'string'),
lastName: DS.attr( 'string'),
email: DS.attr( 'string' ),
}
和另一个模型
model/project
{
name: DS.attr( 'string' ),
code: DS.attr( 'string' ),
startDate: DS.attr( 'date' ),
endDate: DS.attr( 'date' ),
users : DS.hasMany('person', {async: true}),
}
然后我将检索所有项目作为一个包含 ember 个对象的数组。
因为项目 -> 用户是异步的,所以它是一个承诺。我想使用此人的名字对该数组进行排序。当数据相应到达并重新渲染正在使用列表的 hbs
我有一个计算的 属性 叫做
renderProjects = computed ('model.projects.[]')
{
// trying to sort in here but data is not avaiable so its not getting sorted
}
我会实现一个观察者,它观察项目数组。在观察者内部,我将解决用户关系,然后对项目数组进行排序。
请查看以下代码片段。
modelObserver: observer('model.[]', function() {
let userPromises = this.get('model').map(project => project.get('users'));
RSVP.all(userPromises).then(function() {
this.set('sortedProjects', this.get('model').sortBy('users.firstObject.name'));
}.bind(this));
})
解决方法就是使用.@each
:
renderProjects: computed ('model.projects.@each.firstName', function() {
return this.users.sortBy('firstName');
})
这将在项目列表更改或任何项目的任何 firstName
更改时重新计算 renderProjects
CP,然后自动更新您的视图。
一条重要通知:你不能做.@each.foo.bar
。
这就是您在 twiddle 中使用 model.@each.myUser.name
所做的。
在您的游戏中,最简单的解决方法是将 computed.alias
添加到 video
模型:
username: computed.alias('myUser.name'),
那么你可以这样做:
sortedVideos: computed('model.@each.username', function() {
return this.get('model').sortBy('username');
})
我有模特 model/person
{
firstName: DS.attr( 'string'),
lastName: DS.attr( 'string'),
email: DS.attr( 'string' ),
}
和另一个模型 model/project
{
name: DS.attr( 'string' ),
code: DS.attr( 'string' ),
startDate: DS.attr( 'date' ),
endDate: DS.attr( 'date' ),
users : DS.hasMany('person', {async: true}),
}
然后我将检索所有项目作为一个包含 ember 个对象的数组。 因为项目 -> 用户是异步的,所以它是一个承诺。我想使用此人的名字对该数组进行排序。当数据相应到达并重新渲染正在使用列表的 hbs
我有一个计算的 属性 叫做
renderProjects = computed ('model.projects.[]')
{
// trying to sort in here but data is not avaiable so its not getting sorted
}
我会实现一个观察者,它观察项目数组。在观察者内部,我将解决用户关系,然后对项目数组进行排序。
请查看以下代码片段。
modelObserver: observer('model.[]', function() {
let userPromises = this.get('model').map(project => project.get('users'));
RSVP.all(userPromises).then(function() {
this.set('sortedProjects', this.get('model').sortBy('users.firstObject.name'));
}.bind(this));
})
解决方法就是使用.@each
:
renderProjects: computed ('model.projects.@each.firstName', function() {
return this.users.sortBy('firstName');
})
这将在项目列表更改或任何项目的任何 firstName
更改时重新计算 renderProjects
CP,然后自动更新您的视图。
一条重要通知:你不能做.@each.foo.bar
。
这就是您在 twiddle 中使用 model.@each.myUser.name
所做的。
在您的游戏中,最简单的解决方法是将 computed.alias
添加到 video
模型:
username: computed.alias('myUser.name'),
那么你可以这样做:
sortedVideos: computed('model.@each.username', function() {
return this.get('model').sortBy('username');
})