Emberjs-1.0.0-rc.6 unable to filter controller content to return values for a particular property

Question

I have CalendarController that uses the needs api to access AppointmentController, with the intent of filtering the content AppointmentController and return only event.start. But I have tried filter() and forEach() and it always returns all the different properties instead of only all the available timings for event.start. When I use map(), it gives map back only the event.start values as I want in the console but then handlbars fails to display anything.

u = App.__container__.lookup("controller:appointments");

y = u.get('content');

y.map(function(appointee) { return appointee.get('event.start') });

which returns:

[Thu Jul 18 2013 01:00:00 GMT+0100 (GMT Daylight Time), Thu Jul 25 2013 01:00:00 GMT+0100 (GMT Daylight Time), Thu Jul 25 2013 01:00:00 GMT+0100 (GMT Daylight Time)]

The jsfidle for when we use map() and calendars template displays nothing. This jsfiddle USES FILTER() and calendar template displays the content but instead of just event.start, it returns every of its content and filters nothing.

 App.AppointmentsController = Ember.ArrayController.extend({ });

Calendarscontroller todayEvent property using filter():

 App.CalendarController = Em.ObjectController.extend({
   needs: ['appointments'],

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

      var appCont = appoint.get('content');

      return appCont.filter(function(appointee) {
         return appointee.get('event.start');
      });
  }.property()

});

Note I added {{name}} property to demonstrate that what is returned by the todayEvent property is not filtering by event.start but rather than returning only 'event.start', it is returning all the properties.

 <script type="text/x-handlebars" data-template-name='calendar'>

    <h1> from todayEvent</h1>
     {{#each todayEvent}}
        {{name}}<br/>
         {{event.start}}<br/>
     {{/each}}

Router

App.Router.map(function() {
  this.route('events');    
  this.resource('appointments');
  this.route('calendar', {path: '/cal'});
});

ember-model is used::

App.Appointment = Ember.Model.extend({
  name: Ember.attr(),
  event : Ember.belongsTo('App.Event', {key: 'event_id'})

});

App.Event = Ember.Model.extend( {
  title: Ember.attr(),
  start: Ember.attr(Date),
  end: Ember.attr(Date),
  allDay: Ember.attr(Boolean),
  appointments: Ember.hasMany('App.Appointment',  {key:  'appointment_ids'})
});

Answer 1

The filter method just returns the enumerables for which the passed function evaluates true. You can use the map method as you did. Your code

y.map(function(appointee) { return appointee.get('event.start') });

returns an array of start date as you expected. The typo was in your calender hbs.

   {{#each todayEvent}}
     {{this}}
   {{/each}}

Your fiddle