Emberjs-1.0 passing controller instance to ember components

Question

I have created a DatePickerComponent and I am passing in two controller instances like this:

<script type="text/x-handlebars" data-template-name="appointment">
  {{date-picker datePickerController=datePickerController  timeSlotController=timeSlotController}}

From the inside the component I can fetch the datePickerController but when I try to fetch the timeSlotController, it always returns undefined. They are both defined thesame and passed in thesame way, so why is one undefined and the other is available. Both controllers and the components and router are pasted here.

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

  didInsertElement: function() {
   this._super();
   _this = this;
   var datePicker, timeSlot;
   timeslot = _this.get('timeSlotController');
   datePicker = _this.get('datePickerController');

   alert(timeSlot);
   alert(datePicker);
  }
});

I added the DatePickerComponent to the appointment template below.

  <script type="text/x-handlebars" data-template-name="appointment">
   {{date-picker datePickerController=datePickerController  timeSlotController=timeSlotController}}

  <p class="first">   from appointment template</p> 
   {{datePickerController}}
   <br/>
  <p class="second"> from appointment template</p>
   {{timeSlotController}}
 <br/>
</script>

The strange thing is that when the appointment template renders based on the content above, it shows that the timeSlotController instance was passed on so it see:

 <App.TimeSlotController:ember319>

and

<App.DatePickerController:ember313>

But I added 2 alert to the component alert(timeSlot) and alert(datePicker)

   alert(timeSlot);   gives undefined
  alert(datePicker);  returns **<App.DatePickerController:ember313> **

So ** alert(datePicker)** returns thesame instance that was displayed in the template.

The appointment controller

App.AppointmentController = Ember.ObjectController.extend({
  needs: ['datePicker', 'timeSlot'],
  datePickerController:   Ember.computed.alias('controllers.datePicker'),
  timeSlotController: Ember.computed.alias('controllers.timeSlot')

});

The timeslot controller

 App.TimeSlotController = Ember.ArrayController.extend({
   content: [ ],
   //content: Ember.computed.alias('day'),
   contentBinding: 'day',
   day: ''   
 });

The date picker controller

 App.DatePickerController =  Ember.ArrayController.extend({ 
   needs: ['appointments', 'appointment'],
   //apptId: '', 
  appointments: Ember.computed.alias('controllers.appointments.content'),
  apptId:  Ember.computed.alias('controllers.appointment.content')
 });

The router

  App.Router.map(function(){
    this.resource('appointments', {path: "/"}, function(){ 
      this.resource('appointment', {path: "/:appointment_id"}, function(){
         this.resource('timeSlot', {path: '/:day'});                     
      });     
    }); 
  });

You have a typo in the code of the components didInsertElement should be timeSlot = _this.get('timeSlotController'); with the S capitalized jsfiddle.net/FUdgY/1 — Edu
Thanks @Edu. I checked through for all kinds of spelling mistakes or missing comma's and found nothing. Do you want to add it as an answer for me to accept. Thanks again. — brg

Edu Edu · Accepted Answer · 2013-10-18T09:00:25

You have a typo in the code of the components didInsertElement should be timeSlot = _this.get('timeSlotController'); with the S capitalized

didInsertElement: function() {
  this._super();
  _this = this;
  var datePicker, timeSlot;
  //timeslot = _this.get('timeSlotController');
  timeSlot = _this.get('timeSlotController');
  datePicker = _this.get('datePickerController');

  alert(timeSlot);
  alert(datePicker);
}

http://jsfiddle.net/FUdgY/1/

Emberjs-1.0 passing controller instance to ember components

1 Answers