Emberjs 1.0，计算属性和模板在数据更改时不刷新

Question

我有一个与datepicker集成的emberjs应用程序。当我点击日期选择器上的日期时，计算属性应该将点击的日期与*时间段**上的日期进行比较以查看是否存在匹配，我希望模板基于此进行刷新，列出可用的时间点或者说没有。不幸的是，模板不会刷新或显示新数据。

这是 jsfiddle ，重要的控制器/路线/模板是 timeSlot ，约会， datePicker < / strong>和datepickerComponenet。

在jsfiddle中，您需要单击以查看更多并向下滚动，以查看已加载的日历以及时间段为红色的日期。问题是点击任何红色的日期应该重新渲染timeSlot模板并重新计算， displaySelectedDate 计算属性。现在，它只会在第一次单击日期时呈现时间段模板，之后在所有后续点击中不刷新模板。

这是控制器。似乎计算属性不会被多次调用。因此，之前我在 displaySelectedDate计算属性上调用了 .volatile ，但没有任何更改，因此我将其删除并添加了观察者这里显示但仍然没有变化。

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

});

首先获取约会我填充timeSlot 的路线

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

     });          
   }
 })

datepicker控制器，它提供将在datepicker中着色的日期数组。如果我们使用 dateArray计算属性的取消注释版本来获取约会startDate ，则日期会按预期着色。但是，如果对第一个版本发表评论并取消注释 dateArray计算属性的第二个版本，该版本通过startTime 获取 timeSlot，则calebdar不会着色。 任何想法为何如此。

  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'),  
   */
 });

这是相同代码的较小版本，我创建了第二个 jsfiddle 。在此版本中， datePicker 控制器和路由被删除，其代码被移至约会控制器。如果你点击它，你会看到约会的 timeSlots 没有变成红色，应该是。

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

}）;

执行控制台日志建议约会控制器中的 dateArray 会返回以下格式的数组：

  [Array[2]]

但 datepickerController 返回的数组在使用 dateArray计算属性的第一个版本时，通过约会startDate 为日历着色，是形式：

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

我想要什么

点击datePicker中的日期以重新呈现 timeSlot 模板，其次让我能够在日历中加载 timeSlot startTime 来自 datePicker控制器的约会控制器或第二版 dateArray计算属性。

这是基于第一个jsfiddle的日历上的约会startDate的屏幕截图

这是我尝试根据第二个jsfiddle或第一个jsfiddle的datepicker控制器中注释掉的dateAarray属性将timeSlot startTime传递给日历时的屏幕截图。请注意，日历在两种情况下都保持无色

感谢您的帮助。

Answer 1

存在异步问题，因为timeSlots被定义为异步。您可以使用路径中的afeterModel挂钩解决此问题。如果这个钩子（也在模型和模型钩子之前）返回一个promise，路由器就会停止，直到promise解析...这是新的命令路由：

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

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