JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
<script src="http://builds.emberjs.com/canary/ember.js"></script>
<script type = "text/x-handlebars" data-template-name="application">
    <h1> hello</h1>
    {{#link-to 'appointments'}}appointments{{/link-to}}
    {{outlet}}
</script>


<script type = "text/x-handlebars" data-template-name="components/date-picker">
    <p class="first">from inside component's template</p> {{datePickerController}} 
    <br/>
    <p class="second">from inside component's template</p>: {{timeSlotController}}
</script>


<script type="text/x-handlebars" data-template-name="appointments">
  <h2>Appointments Listings:</h2>
     {{#link-to 'appointment' this}} display appointment template with component {{/link-to}}
    {{outlet}}
</script>

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

CSS

p.first{ color: blue; }
p.second{ color: red; }

JavaScript

App = Ember.Application.create({
  LOG_TRANSITIONS: true,
  LOG_ACTIVE_GENERATION: true
});


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

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

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

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

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);
  }
});

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


App.AppointmentRoute = Ember.Route.extend({
    model: function(params){
     // return modelFor('appointments').get(params.appointment_id);  
    },
    
    setupController: function(controller, model){
        this._super(controller, model);
        controller.set('content', model);
    }
});

App.TimeSlotRoute = Ember.Route.extend({
    model: function(params){
      //return ({day: params});   
    },
   
    setupController: function(controller,...