我正在尝试使用Emberjs sortProperties 在此 jsfiddle 中按日期对内容进行排序。我的模型有一个 startTime 属性,我尝试排序,但它不起作用。然后,我在控制器中创建了一个名为 todayEvent 的计算属性,该属性返回与传入日期匹配的事件,我尝试对其进行排序,但它也不起作用。我所要做的就是列出在同一天发生的事件,但是以chich事件发生的一天中的时间按照升序排序,例如,应该列出 10am 发生的事件在那些发生之前说 12pm 。
这是 jsfiddle
模特:
App.TimeSlot = DS.Model.extend( {
startTime: DS.attr('date'),
endTime: DS.attr('date'),
allDay: DS.attr('boolean'),
soldOut: DS.attr('boolean')
});
控制器
App.TimeSlotController = Ember.ArrayController.extend({
content: [ ],
sortProperties: ['todayEvent'],
sortAscending: true,
day: Ember.A(['2013-10-25']),
todayEvent: function(){
self = this;
u = self.get('content');
console.log('u', u);
kl = u.filter(function(availableSlot) {
console.log ('a', availableSlot.get('startTime') );
return (moment(availableSlot.get('startTime')).format("YYYY-MM-DD") == self.get('day').toString() );
});
return kl;
}.property('day', 'content@each'),
});
fixtureAdapter
App.TimeSlot.FIXTURES = [
{
id: 3,
startTime: moment.utc('2013-10-25T12:30:00+01:00',"YYYY-MM-DD HH:mm:ss" ),
allDay: true
},
{
id: 4,
startTime: moment.utc('2013-10-25T10:10:00+01:00',"YYYY-MM-DD HH:mm:ss" ),
allDay: true
},
{
id: 5,
startTime: moment.utc('2013-10-23 00:00 +01:00', "YYYY-MM-DD HH:mm"),
allDay: true
}
];
答案 0 :(得分:5)
我设法解决了@edu,但感谢您的帮助。您可以看到有效的 jsfiddle 。
有两种方法,都使用 Ember.computed.sort :
sortedTime: Ember.computed.sort('todayEvent', function(a, b){
if (
moment(Ember.get(a, 'startTime') ) > moment(Ember.get(b, 'startTime') )
){
//returns morning timings before afternoon timings
//api doc says return 1 when 'a' should come after 'b'
//http://emberjs.com/api/#method_computed_sort
return 1;
} else if (
moment(Ember.get(a, 'startTime') ) < moment(Ember.get(b, 'startTime') )
)
{
//returns afternoon timings before morning timings
//api docs says return -1, when 'a' should come before 'b'
return -1;
}
return 0;
})
第二种方法
//adapted from http://jsbin.com/OjoXOqE/9/edit
sortedContent: Ember.computed.sort('content.@each.startTime', function(a, b){
//the this keyword does not work here,
//throws "Object #<Object> has no method 'get'"
//so we use the Ember keyword to get it working
var ap = moment(Ember.get(a, 'startTime')),
bp = moment(Ember.get(b, 'startTime'))
//we return morning before afternoon times
if(ap !== bp) {
return ap - bp;
}
})
答案 1 :(得分:3)
使用.sortBy()对包含日期的对象数组进行排序。
在你的模特中:
fooDate: DS.attr('date')
在您的组件/控制器/路由中:
dateSortedFoos: function() {
return this.get('model.foos').sortBy('fooDate');
}.property('model.foos.@each'),
无需迭代或使用Moment JS。
使用此格式的日期"2015-09-11T08:15:00+10:00"
。
供参考:我使用的是Ember 1.13.10和Ember Data 1.13.9。
答案 2 :(得分:2)
您只需覆盖sortFunction
上的ArrayController
即可。见Sort Function
App.TimeSlotController = Ember.ArrayController.extend({
sortProperties: ['startTime'],
sortAscending: true,
sortFunction: function (dateX, dateY) {
return Ember.compare(dateX.getTime(), dateY.getTime());
}
答案 3 :(得分:1)
控制器的已排序内容位于名为arrangeContent的属性中,因此在控制器内部应调用
this.get('arrangedContent')
或车把
{{#each arrangedContent}}
希望这个帮助
答案 4 :(得分:1)
我知道这是一个老问题,但我发现我会发布一个新的,更新的“最新”答案。
要按日期对可迭代内容进行排序,可以这样使用Ember.computed.sort:
export default Ember.Component.extend({
//...stuff
eventsArray: [
{eventName: 'Event One', date: dateObject1},
{eventName: 'Event One', date: dateObject2},
],
eventsArraySortDefinition: ['date:ascending],
sortedStuff: Ember.computed.sort('eventsArray', 'eventsArraySortDefinition'),
//...stuff
})
值得注意的是,当你定义一个类型为'date'(date: DS.attr('date')
)的模型属性而不是像'2016-10-17'这样的字符串格式的日期时,它将被很好地转换并存储在模型作为Date
对象。在排序过程中,日期将显式转换为时间戳,因此您无需自行进行任何转换。