Emberjs-1.0 component and compute property in controller

Question

I am passing a controller into an emberjs component. The controller has a computed property called dateArray that holds an an array of dates. After clicking on a #linkTo that points to appointment template, I can go into the console and do:

    b = App.__container__.lookup("controller:appointment")
    c = b.get('dateArray')
    and it returns [Array[2]]

However, when I pass that controller into an emberjs component with

      {{date-picker datePickerController=controller}}

Inside the component, I can get the correct instance of the controller , using the code below

 datePicker = _this.get('datePickerController');
 console.log(datePicker), shows the dateArray with its content.

but the array displays as empty, when i fectch it based on the above instance using the code below.

  controllerContent = datePicker.get('dateArray'); 

However if I add the dateArray in a handlebars expressions in the appointments template, it renders its content:

  {{dateArray}}

So why its dateArray empty inside emberjs component when controller instance the emberjs component has the dateArray

The controller:

App.AppointmentController = Ember.ObjectController.extend({
   needs: [ 'timeSlot'],
   timeSlotController: Ember.computed.alias('controllers.timeSlot'),
   dateArray: function(){
     _this = this;  

     fetchDates = [ ];

    var aa = _this.get('content'); 

    var yy = aa.get('timeSlots')

    yy.then(function(hh){
        nn = hh.map(function(item){ return moment.utc(item.get('startTime')).format("YYYY-MM-DD"); });

     pp =  fetchDates.pushObjects([nn]);

     return nn;
    });  

    return fetchDates;
  }.property('content.@each.timeSlots')


});

The emberjs component:

App.DatePickerComponent = Ember.Component.extend({
   datePickerController: null,

   didInsertElement: function() {
     this._super();
     _this = this;
     var datePicker;

     datePicker = _this.get('datePickerController');
    //console.log(datePicker);

     var controllerContent = datePicker.get('dateArray');    

    //returns nil
     alert(controllerContent); 

    });// closes didInsertElement

  }

 });

Answer 1

Your problem is that your dateArray property is async, because you are using yy.then.

This is what happens:

You call datePicker.get('dateArray') this trigger yy.then but it doesn't resolve immediatelly, you return fetchDates as empty array. When yy.then load, it will populate the array with fetchDates.pushObjects([nn]) so this update the template.

I recommend you to observe changes in the array to perform what you want:

App.DatePickerComponent = Ember.Component.extend({
  datePickerController: null,
  dateArrayChanged: function() {
    var dateArray = this.get('datePickerController.dateArray');
    // now date array have elements
  }.observes('datePickerController.dateArray.[]')
 });

Answer 2

In Ember a controller is a weird thing to pass around, it's just a decorator over a model, if your model changes underneath your controller your controller could be completely different (maybe that's your intention). You might try passing in the dateArray into the component.