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

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