首页 文章

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

提问于
浏览
1

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

这是 jsfiddle ,重要的控制器/路由/模板是 timeSlotappointmentdatePicker 和datepickerComponenet .

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

这是控制器 . 似乎计算属性不会被多次调用 . 结果,之前,我在 displaySelectedDate computed property 上调用了 .volatile ,但没有变化,所以我删除了它并添加了 observer ,但是仍然没有变化 .

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

});

通过首次获取约会我从 populate 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 computed property 的未注释的版本来获取 appointment startDate ,则日期会按预期着色 . 但是如果评论第一个版本并取消注释 dateArray computed property 的第二个版本,那么取出 timeSlot by startTime 的calebdar就没有着色了 . 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'),  
   */
 });

这是相同代码的较小版本,我创建了第二个 jsfiddle . 在此版本中, datePicker 控制器和路由被删除,其代码被移动到 appointment 控制器 . 如果单击它,您将看到带有约会的 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')

});

执行 console log 建议约会控制器中的 dateArray 返回以下形式的数组:

[Array[2]]

但是 datepickerController 返回的数组在使用 dateArray computed property 的第一个版本时会按 appointment startDate 为日历着色,其形式如下:

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

what I want

是非常点击datePicker中的日期来重新渲染 timeSlot 模板,其次让我能够使用 appointment controllerdatePicker controler 的第二版 dateArray computed property 在日历中加载 timeSlot startTime .

This is the screen-shot of the appointment startDate on the calendar basedon the first jsfiddle
enter image description here

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
enter image description here

谢谢你的帮助 .

1 回答

  • 4

    存在异步问题,因为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/

相关问题