Emberjs Sort Content By Date Using Sortproperties

I am trying to use Emberjs sortProperties to sort content by date in this jsfiddle. My model has a startTime property which I tried to sort by but it didn't work. I then created a

Solution 1:

I managed to solve it @edu but thanks for trying to help. You can see a working jsfiddle.

There are two approaches and both use 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_sortreturn1;

   } elseif ( 
      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;
   }
     return0;

  })

The second approach

//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 workingvar ap = moment(Ember.get(a, 'startTime')),
       bp = moment(Ember.get(b, 'startTime'))

  //we return morning before afternoon times if(ap !== bp) {
      return ap - bp;
    }

  })

Solution 2:

Use .sortBy() to sort an array of objects containing dates.

In your model:

fooDate: DS.attr('date')

In your component/controller/route:

dateSortedFoos: function() {
  returnthis.get('model.foos').sortBy('fooDate');
}.property('model.foos.@each'),

No need to iterate through or to use Moment JS.

Works with dates in this format "2015-09-11T08:15:00+10:00".

For reference: I'm using Ember 1.13.10 and Ember Data 1.13.9.

Solution 3:

You can simply override sortFunction on your ArrayController. See Sort Function

App.TimeSlotController = Ember.ArrayController.extend({
  sortProperties: ['startTime'],
  sortAscending: true,
  sortFunction: function (dateX, dateY) {
    returnEmber.compare(dateX.getTime(), dateY.getTime());
  }

Solution 4:

The sorted content of the controller lives in the property named arrangedContent, so inside controller you should call

this.get('arrangedContent')

or in handlebars

{{#each arrangedContent}}

Hope this help

Solution 5:

I know this is an old question, but I figured out that I will post a new, more 'up-to-date' answer.

To sort an iterable by dates, you can use Ember.computed.sort in this way:

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

It is worth noting, that when you define a model property with type 'date' ( date: DS.attr('date') ) than a date in a string format like '2016-10-17' will be nicely converted and stored in the model as a Date object. During sorting, the date will be explicitly converted to a timestamp, so you don't need to do any convertion yourself.