vendredi 1 décembre 2017

emberjs component doesn't rerender component to update fullcalendar

I am building a calendar app using emberjs and Jquery fullcalendar. The fullcalendar is rendered via emberjs component. However, when a new event is created via a form and the route refresh() method called, the component doesn't rerender or redraw itself. Therefore to see the new event on fullcalendar, I have to manually refresh the page. How can I get the component to rerender when a new event is created. I have tried with event route and template before using events/index route and template.

app/event/templates/index.hbs

 

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: '',

   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!");
   }), 
   actions: {
     createEvent: function(param) {
       this.sendAction('refreshModel', param);
     }
   }
 });

Thanks for helping.




Aucun commentaire:

Enregistrer un commentaire