Emberjs 1.0，数据更改时不刷新计算属性和模板 [英] Emberjs 1.0, Computed property and template not refreshed when data changes

问题描述

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

这是

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('[e-mail]'),

   /*
   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('[e-mail]'),  
   */
 });

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('[e-mail]')

});

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.

解决方案

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/

这篇关于Emberjs 1.0，数据更改时不刷新计算属性和模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！