3

我正在尝试使用 Emberjs sortProperties在这个jsfiddle中按日期对内容进行排序。我的模型有一个startTime属性，我尝试对其进行排序，但它不起作用。然后，我在控制器中创建了一个名为todayEvent的计算属性，该属性返回与传入日期匹配的事件，我尝试对其进行排序，但它也不起作用。我要做的只是列出同一天发生的事件，但是以这样一种方式，即发生 chich 事件的一天中的时间按升序排序，例如，上午 10 点发生的事件 应该列在下午 12 点之前发生的事件之前。

这是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'),


});

夹具适配器

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
 }
];
4

5 回答 5

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;
    }

  })
于 2013-11-11T20:38:49.240 回答
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。

于 2015-09-09T06:08:05.933 回答
2

您可以简单地覆盖sortFunction您的ArrayController. 见排序功能

App.TimeSlotController = Ember.ArrayController.extend({
  sortProperties: ['startTime'],
  sortAscending: true,
  sortFunction: function (dateX, dateY) {
    return Ember.compare(dateX.getTime(), dateY.getTime());
  }
于 2013-12-27T09:05:52.167 回答
1

控制器的排序内容存在于名为arrangedContent的属性中，所以在控制器内部你应该调用

this.get('arrangedContent')

或在车把中

{{#each arrangedContent}}

希望这有帮助

于 2013-11-11T10:31:40.893 回答
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对象存储在模型中。在排序时，日期会显式转换为时间戳，因此您无需自己进行任何转换。

于 2016-10-13T12:04:45.593 回答