Emberjs 1.0，計算屬性和模板在數據更改時未刷新

Question

我有一個與datepicker集成的emberjs應用程序。當我點擊日期選擇器上的日期時，計算出的屬性應該將點擊的日期與*時間段**上的日期進行比較，以查看是否存在匹配，並且我期望模板基於此進行刷新，或者列出可用的時間間隔或者說沒有。不幸的是，模板不會刷新或顯示新數據。

這是jsfiddle，重要的控制器/路由/模板時隙，任命，日期選擇器和datepickerComponenet。

在jsfiddle中，您需要點擊查看更多並向下滾動，以查看加載的日曆和時間帶紅色的日期。問題在於，單擊紅色的任何日期應該重新呈現timeSlot模板並重新計算，displaySelectedDate計算的屬性。現在，它只會呈現時段模板，您第一次點擊某個日期，之後該模板不會刷新所有後續點擊。

這是控制器。它似乎也沒有被調用的屬性不止一次。因此，之前我在.volatile上調用了displaySelectedDate的計算屬性但沒有變化，所以我刪除它並添加了這裏顯示的觀察者，但是仍然沒有變化。

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計算的屬性取得約會startDate日期按預期着色。但如果評論第一個版本並取消註釋第二版dateArray計算屬性獲取timeSlot由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'), 
    */ 
}); 

這是thesame代碼的較小版本，我創建第二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在約會控制器返回形式的數組財產即日曆的顏色由預約開始日期，形式爲：

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

我想

是做在日期選擇器的日期很點擊重新呈現時隙模板，其次對我來說，能夠在日曆中加載時隙開始時間要麼使用預約控制器或第二版dateArray計算的屬性來自datePicker控制器。

這是日曆上的支持算法FMP第一的jsfiddle任命的startDate的截圖

這是截圖，當我試圖根據任一二號的jsfiddle時隙開始時間傳遞到日曆，或者在第1個jsfiddle的datepicker控制器中註釋掉dateAarray屬性。請注意日曆在兩種情況下都保持無色

感謝您的幫助。

Answer 1

有一個異步問題，因爲timeSlots被定義爲async。您可以使用路由中的afeterModel掛鉤來解決此問題。如果這個鉤子（也beforeModel和型號掛鉤）返回一個承諾路由器停止，直到承諾解決......這是新的會面路線：

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/