Компонент emberjs не перерисовывает компонент для обновления полного календаря

Я создаю приложение календаря, используя 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 не показывает новое событие.

Спасибо за помощь.


person brg    schedule 01.12.2017    source источник


Ответы (1)


Вариант 1: ваше текущее решение наблюдателя будет работать, ошибка заключается в eventsDidChange функции наблюдателя, которую вы пропустили для вызова this.eventJSON()

Вариант 2. Вы хотите снова рисовать календарь при изменении данных модели, для этого вы можете выполнить рендеринг в методе didRender. Вам вообще не нужен наблюдатель.

Примечания:

1. Не ожидайте, что будет вызвано getnewEvent вычисляемое свойство, оно будет вызываться только тогда, когда вы запросите его через get или в шаблоне. в настоящее время он выглядит не возвращающим значение. Помните, что вычисляемое свойство всегда должно возвращать значение. но это не относится к вашей проблеме.

2.В событиях/index.js,

this.refresh(); 
 this.transitionTo("events") 

Оба выше будут делать то же самое, я думаю, что в вашем случае вам не нужно вызывать оба метода, так как ваш хук модели использует findAll, поэтому он будет возвращать массив живых записей, поэтому он будет автоматически обновляться. из-за этого ваш cal-event компонент вызовет рендеринг методы.

person Ember Freak    schedule 02.12.2017
comment
Спасибо. Просто для расширения своих знаний. Знаете ли вы, почему это все еще не работает, если я вместо этого вызываю компонент, т.е. {{cal-event model=model event=model refreshModel='refreshModel'}} ** из **events.hbs из events/index.hbs и модели, загруженной из маршрута событий. шаблон формы находится по адресу events/new. через ведение журнала я вижу, что при создании новой записи компонент никогда не вызывается, когда он находится в events.hbs, и новые данные ему не передаются. Но если я добавлю компонент в events/index и сохраняю данные из маршрута событий, все по-прежнему работает. терпит неудачу, если форма в index.hbs - person brg; 02.12.2017
comment
Я создал образец twiddle для демонстрации - вы можете играть с вводом URL-адресов, таких как /events и /events/new, следите за консолью, как называются все модели. ember-twiddle.com/ - person Ember Freak; 02.12.2017
comment
Есть ember-diagonal от AlexSpeller. вы можете использовать это для лучшего понимания маршрутов. Я [создал для вас пример](alexspeller.com/ember-diagonal/route/ ) Самое главное, выберите "Дерево" и нажмите на узел, а справа вы увидите все соответствующие маршруты и шаблоны, а также порядок вызова его метода ловушки. - person Ember Freak; 02.12.2017