Emberjs-1.0.0-rc.6 using enumerable to list events occurring on a particular date

Question

When I define a controller action to display dates occuring a particular date, it works correctly, but If I convert that controller action to a property it stops displaying the date occuring on a particular event. The jsfiddle

 App.EventsController = Em.ArrayController.extend({
   todayEvent: function(date){
     return this.get('content').filter(function(event) {
       return (moment(event.get('start')).unix() == moment(date).unix());
     });
   }
});

I can fetch an instance of the controller:

 u = App.__container__.lookup("controller:events")

on the event 25th, there are 2 events and I can fetch it with

u.todayEvent(new Date('2013-07-25').toString())

which correctly returns

[> Class,  > class]

But in the CalendarEvent controller, I want to display the events for a particular date just like above but this time using computed-property, so I redefine todayEvent asa computed property as shown below, only this time, it only returns true or false instead returning class objects containg the events for that day.

The date property is set using controllerFor in the router serializers hook instead of passing it in as we did when we defined todayEvent as a controller action previously.

 App.CalendarEventController = Em.ObjectController.extend({
    date: null,
    needs: ['appointments'],

    todayEvent: function(){
      var _self = this;
      var appoint = _self.get('controllers.appointments');
      var appCont = appoint.get('content');

      return appCont.map(function(appointee) {
        return (moment(appointee.get('event.start')).unix() == moment(_self.get('date')).unix());    
      });
  }.property('date')    
});

Now I click on the link for appointment, then the link for calendar and then click one of the dates in red from the calendar, so the serializer hook can set the controller date and I then go into the console:

u = App.__container__.lookup("controller:calendarEvent")

try to fetch the events occuring on that date in the console with:

u.get('todayEvent')

I either get an empty array like this [ ] or if I filter using map() instead of filter(), then it returns [false, false, false]

The jsfiddle

Swordtail

Answer 1

It looks like you need to add 'content.@each' to your computed property.

As it stands now 'todayEvent' will only be computed when 'date' changes I am guessing date is being set before or at the same time as the content.

todayEvent is returning [false, false] because you are using map not filter.

todayEvent: function(){
  var _self = this;
  var appoint = _self.get('controllers.appointments');
  var appCont = appoint.get('content');

  return appCont.filter(function(appointee) {
    return (moment(appointee.get('event.start')).unix() == moment(_self.get('date')).unix());    
  });
}.property('content.@each', 'date')

Stavro

Thanks Aaron for taking a look and for the suggestion to add 'content.@each'. I have now done that but it still just prints out: false false false instead of the events occuring on the selected date. – Swordtail

did you change return appCont.map to return appCont.filter – Stavro

Yes I tried, appCont.map, appCont.filter and appCont.forEach. It was appCont.map that returned false false false. while appCont.filter returned undefined. Finally appCont.forEach returned the whole events in the store without doing any filtering by date. thanks for for helping. – Swordtail