Ember.js emberjs组件没有'；t重新加载组件以更新fullcalendar

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

app/event/templates/index.hbs

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

app/routes/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未显示新事件

---

感谢您的帮助。

选项1：您当前的observer解决方案将起作用，错误是您错过了调用

this.eventJSON（）

选项2.每当模型数据发生更改时，您希望再次绘制日历，因此您可以在

didRender

方法中进行渲染。你根本不需要观察者

注:

1.不要期望调用

getnewEvent

computed属性，仅当您通过urgh

get

或在模板中请求时才会调用它。目前它看起来没有返回值。请记住，computed属性始终应返回值。但这与你的问题无关

2.在events/index.js中

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

---

以上两种方法都会做同样的事情，我认为在您的情况下，您不需要同时调用这两种方法，因为您的模型钩子使用findAll，所以它将返回live-record数组，这样它将自动更新。由于您的

cal事件

组件将调用。

谢谢。只是为了扩大我的知识面。如果我从**events.hbs调用组件ie{{cal event model=model event=model refreshModel='refreshModel'}**，而不是从events/index.hbs调用从events路由加载的模型，您知道为什么它仍然不起作用吗。表单模板位于events/new。通过日志记录，我可以看到，当创建新记录时，在events.hbs中的组件永远不会被调用&新数据不会传递给它。但是，如果我将该组件添加到事件/索引中&来自事件路由的数据仍然有效。如果index.hbsI中的表单创建了示例twiddle进行演示，则失败-您可以使用键入URL的方式，如

/events

和

/events/new

注意控制台所有模型钩子的调用。阿列克斯佩勒的余烬对角线。您可以使用它来更好地了解路线。我[created sample for you]（）最重要的是选择树状视图并单击节点和右侧，您可以看到所有相应的路由和模板及其钩子方法调用顺序。