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

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

这是，重要的控制器/路由/模板是时隙、约会、日期选择器和日期选择器组件

在JSFIDLE中，您需要单击“查看更多”并向下滚动，以查看加载的日历和时间段为红色的日期。问题在于，单击任何红色日期都应该重新呈现时间段模板并重新计算displaySelectedDatecomputed属性。现在，它只会在您第一次单击日期时呈现时间段模板，之后所有后续单击都不会刷新该模板

这是控制器。似乎计算属性没有被多次调用。因此，之前，我在displaySelectedDate computed属性上调用了.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'),                                                 

});

通过首先获取约会来填充时隙的路径

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

     });          
   }
 })

日期选择器控制器，提供将在日期选择器中着色的日期数组。如果我们使用未注释版本的dateArray computed属性获取约会开始日期，则日期将按预期着色。但是，如果注释第一个版本并取消注释第二个版本的dateArray computed属性，该属性通过startTime获取时间段，则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'),  
   */
 });

这是同一代码的较小版本，我创建了第二个。在此版本中，日期选择器控制器和路由被删除，其代码被移动到约会控制器。如果您单击它，您将看到带有约会的时隙没有被涂成应有的红色

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

}))

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

  [Array[2]]

但是，当使用第一版的dateArray computed属性时，datepickerController返回的数组按约会开始日期为日历着色，其格式如下：

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

我想要什么

只需在datePicker中点击一个日期，即可重新呈现时隙模板，其次，我可以使用约会控制器或dateArray computed属性的第二个版本在日历中加载时隙开始时间控制器

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

这是基于第一个JSFIDLE的日历上约会开始日期的屏幕截图

这是我尝试根据第二个JSIDLE或第一个JSIDLE的datepicker控制器中已注释掉的dateAarray属性将时隙startTime传递到日历时的屏幕截图。注意：日历在两种情况下均保持不着色状态

---

感谢您的帮助。

出现了异步问题，因为时隙定义为异步。您可以使用路由中的AfterModel钩子解决此问题。如果这个钩子（也在模型钩子和模型钩子之前）返回一个承诺，路由器将停止，直到该承诺得到解决。。。以下是新的任命路线：

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

---

JSFIDLE

存在异步问题，因为时隙定义为异步。您可以使用路由中的AfterModel钩子解决此问题。如果这个钩子（也在模型钩子和模型钩子之前）返回一个承诺，路由器将停止，直到该承诺得到解决。。。以下是新的任命路线：

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

---

和JsFiddle

Hellow，看看这个JsFiddle感谢@Edu的JsFiddle。单击日期显示正确的时间段。datepicker组件中仍然存在一个问题，我使用了未注释的beforeShowDay方法来说明这一点。我还添加了*uncommented console.log（事件）；和console.log（checkForDate）；，在上述方法中。如果checkForDate返回true，则日历为彩色，否则不为彩色。在上面的beforeShowDay之前的didInsertElement中，我还未注释console.log（controllerContent）；，并添加了警报（controllerContent）；返回未定义的。Hellow，看看这个JSFiddle谢谢@Edu的JSFiddle。单击日期显示正确的时间段。datepicker组件中仍然存在一个问题，我使用了未注释的beforeShowDay方法来说明这一点。我还添加了*uncommented console.log（事件）；和console.log（checkForDate）；，在上述方法中。如果checkForDate返回true，则日历为彩色，否则不为彩色。在上面的beforeShowDay之前的didInsertElement中，我还未注释console.log（controllerContent）；，并添加了警报（controllerContent）；返回未定义的。感谢@Edu花时间回答这个问题。我很感激。感谢@Edu花时间回答这个问题。我很感激。