emberjs 组件不会重新渲染组件来更新 fullcalendar

Question

我正在使用 emberjs 和 Jquery fullcalendar 构建一个日历应用程序。全日历是通过 emberjs 组件呈现的。但是，当通过表单创建新事件并调用路由 refresh() 方法时，组件不会重新呈现或重绘自身。因此，要在全日历上查看新事件，我必须手动刷新页面。创建新事件时如何让组件重新呈现。在使用 events/index 路由和模板之前，我已经尝试过事件路由和模板。

app/event/templates/index.hbs

 {{cal-event model=model event=model refreshModel='refreshModel'}}

应用程序/路由/events/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)
       })   
     }
   }
 });

app/components/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);
     }
   }
 });

更新。

我添加了 didUpdateAttrs 和 didRender()。

更新 2

我通过 slack 从 bendemboski 那里得到了另一个建议，我应该尝试在模型数组上添加一个观察者，如 Ember.observer('model.[]')。它没有用，组件没有重新渲染并且 fullcalendar 没有显示新事件。

感谢您的帮助。

Answer 1

选项 1：您当前的观察者解决方案将起作用，错误是 eventsDidChange 您错过调用的观察者函数 this.eventJSON()

Option2.You 想要在模型数据发生变化时重新绘制日历，为此您可以在 didRender 方法中进行渲染。你根本不需要观察者。

备注：

1.Dont expect getnewEvent computed 属性将被调用，只有当您通过 get 或在模板中请求时才会调用它。目前它看起来没有 returning 值。记住计算出的属性总是应该 return 的值。但这与您的问题无关。

2.In events/index.js,

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

以上两个都会做同样的事情，我认为在你的情况下你不需要调用这两个方法，因为你的模型钩子正在使用 findAll 所以它会 return 实时记录数组所以它会自动被更新。由于您的 cal-event 组件将调用 rerendering methods.

emberjs 组件不会重新渲染组件来更新 fullcalendar

emberjs component doesn't rerender component to update fullcalendar

fullcalendar

ember.js

ember-router

ember-cli

ember-components