Я создаю приложение календаря, используя emberjs и Jquery fullcalendar. Полный календарь рендерится через компонент emberjs. Однако, когда новое событие создается через форму и вызывается метод обновления маршрута (), компонент не перерисовывает или не перерисовывает себя. Поэтому, чтобы увидеть новое событие в полном календаре, мне нужно вручную обновить страницу. Как я могу заставить компонент перерисовываться при создании нового события. Я пробовал использовать маршрут и шаблон событий, прежде чем использовать маршрут и шаблон событий/индекса.
приложение/событие/шаблоны/index.hbs
{{cal-event model=model event=model refreshModel='refreshModel'}}
приложение/маршруты/события/index.js
import Route from '@ember/routing/route':
export default Route.extend({
model(){
let model = this.get('store').findAll('event', {reload: true});
return model;
},
actions: {
refreshModel(data) {
let e = data.get('start');
let d = data.get('description');
let f = data.get('finish');
let event = this.get('store').createRecord('event', {description: d, start: e, finish: f})
event.save().then((e) => {
this.refresh();
this.transitionTo("events")
}, function(e) {
console.log("event error", e)
})
}
}
});
приложение/компоненты/cal-event.js
import Component from '@ember/component';
import EmberObject, { computed, observer } from '@ember/object';
export default Component.extend({
event: '',
didUpdateAttrs(data) {
console.log('didUpdatedAttrs called', data);
},
didRender() {
console.log('didRender');
},
didInsertElement() {
this._super(...arguments);
this.$().attr('contenteditable', true);
return this.$("#calendar").fullCalendar({
events: this.eventJSON(),
defaultView: 'agendaWeek'
});
},
eventJSON() {
return this.get('model').map(function(event) {
return event.get('toJSON');
});
},
getnewEvent: computed('newEvent', function(){
console.log('getnewEvent', this.get('newEvent'));
}),
modelChanged: Ember.observer('model', function(){
console.log("model changed!");
}),
eventsDidChange: Ember.observer('model.[]', function() {
this.$("#calendar").fullCalendar({
events: this.eventJSON,
defaultView: 'agendaWeek'
});
}),
actions: {
createEvent: function(param) {
this.sendAction('refreshModel', param);
}
}
});
Update.
Я добавил didUpdateAttrs и didRender().
update 2Я получил еще одно предложение от Bendemboski через slack, что мне следует попробовать добавить наблюдателя в массив моделей, как в Ember.observer('model.[]'). Это не сработало, компонент не перерисовывается, а fullcalendar не показывает новое событие.
Спасибо за помощь.