Emberjs 1.0, Computed property and template not refreshed when data changes

Question

I have an emberjs app that integrates with datepicker. When I click a date on the datepicker, a computed property is supposed to compare the clicked date with the dates on *timeslot** to see if there is a match and I expect the template to refresh based on that, either listing the available timeSlots or saying there is not. Unfortunately, the template doesn't refresh or present new data.

This is the jsfiddle, the important controllers/routes/templates are timeSlot, appointment, datePicker and the datepickerComponenet.

In the jsfiddle, you need to click on see more and scroll down, to see the loaded calendar and the dates that have timeslot coloured in red. The problem is that clicking on any date coloured in red is supposed to re-render the timeSlot template and recompute, the displaySelectedDate computed property. Right now, it only renders the timeslot template, the first time you click on a date, after that the template is not refreshed on all subsequent clicks.

This is the controller. It also seems the computed property is not being called more than once. As a result, previously, I called .volatile on the displaySelectedDate computed property but there was no change, so I removed it and added the observer shown here but there is still no change.

App.TimeSlotController = Ember.ArrayController.extend({
  needs: 'appointment',
  content: [ ],

 apptId: null,
 apptDate: null,
 day: Ember.A([ ]),

 contentDidChange: function(){
   a = this.get('day'); 
     console.log(a);
   return a;
  }.observes('day'),

  displaySelectedDate: function(){
    a = moment(this.get('apptDate')).unix();

    b = moment.utc(this.get('day').toString()).unix(); 

    x = (a === b);

    return x;

  }.property('day.@each', 'apptDate'),                                                 

});

The route from where I populate timeSlot by first fetching the appointment

App.TimeSlotRoute = Ember.Route.extend({

   setupController: function(controller, model) {

     self = this;
     self._super(controller, model);

     parent = self.controllerFor('appointment');

     self.controller = controller;

    c =   parent.get('timeSlots').then(function(data){
        f =  self.controller.set('content', data); 

     });          
   }
 })

The datepicker controller that supplies array of dates that will be coloured in the datepicker. If we use the uncommented out version of of dateArray computed property that fetches appointment startDate the dates are coloured as expected. But if comment the first version and uncomment the second version of dateArray computed property that fetches timeSlot by startTime the calebdar are not coloured. Any ideas why this so.

  App.DatePickerController =  Ember.ArrayController.extend({ 
     needs: ['appointments', 'appointment', 'timeSlot'],

   time: Ember.computed.alias('controllers.timeSlot.content'),
   appointments: Ember.computed.alias('controllers.appointments.content'),

   dateArray: function(){
     _this = this;  
     var fetchDates = _this.get('appointments');

     return  fetchDates.map(function(item){ 
       return moment.utc(item.get('startDate')).format("YYYY-MM-DD");
     });
   }.property('appointments.@each.startDate'),

   /*
   dateArray: function(){
     _this = this;  
     var fetchDates = _this.get('time');

     return  fetchDates.map(function(item){ 
      return moment.utc(item.get('startTime')).format("YYYY-MM-DD");
     });

    }.property('timeSlot.@each.startTime'),  
   */
 });

This is a smaller version of thesame code, I created a second jsfiddle. In this version the datePicker controller and route are removed and the code it had, were moved to the appointment controller. If you click on it, you will see that the timeSlots with appointment are not getting coloured in red which it should be.

  App.AppointmentController = Ember.ObjectController.extend({

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

});

Doing console log suggestions the dateArray in the appointment controller returns an array in the form :

  [Array[2]]

But the array returned by the datepickerController when using the 1st version of dateArray computed property that colors the calendar by appointment startDate, is of the form:

  ["2013-10-18", "2013-10-25", "2013-10-25", "2013-10-18"]

what I want

Is do a very click on a date in datePicker to re-render the timeSlot template and secondly for me to be able to load timeSlot startTime in the calendar either using the appointment controller or the second version of dateArray computed property from the datePicker controler.

This is the screen-shot of the appointment startDate on the calendar basedon the first jsfiddle

This is the screenshot when I try to pass timeSlot startTime to the calendar based on either the 2nd jsfiddle, or the commented out dateAarray property in the datepicker controller of the 1st jsfiddle. Note the calendar remains uncoloured in both instances

Thanks for your help.

Answer 1

There was an async problem, as the timeSlots are defined as async. You can resolve this with the afeterModel hook in the route. If this hook (also beforeModel and model hooks) returns a promise the router stops until the promise resolves... Here is the new appoinment route:

App.AppointmentRoute = Ember.Route.extend({
    model: function(params){
      return modelFor('appointments').get(params.appointment_id);  
    },
    afterModel:function(model){
        return model.get('timeSlots');
    }
});

and JsFiddle http://jsfiddle.net/Xajsr/10/