Reactive Dict - How to pass data to modal?

Hey guys!

I am using Fullcalendar to manage an event agenda. I want to implement a modal that shows information when you click on a specific event.

To do this, I was thinking about ReactiveDict. I could use the “eventClick” hook on Template.Calendar.onRendered( ) to create the ReactiveDict, set it with all the data and then create a helper function that sends this data to the modal.

Unfortunately, I have not been able to do so… the modal opens without data and I am getting this error:
Exception in template helper: TypeError: Cannot read property ‘get’ of undefined

Can someone please give me a light on how to do this? Here is my code:

if(Meteor.isClient){

    Template.Agenda.onRendered(function(){

        $('#eventmodal').modal();

        $('#calendar').fullCalendar({

            /* a lot of configurations */

            eventClick: function(event) {

                var state = new ReactiveDict();
                state.set({
                    'id':event._id,
                });

                $('#eventmodal').modal('open');
            
            },

        });

    });

    Template.Agenda.helpers({

        'eventId'(){

            const instance = Template.instance();
            return instance.state.get('id');

        }

    })
    
}

I also tried to change my ReactiveDict call to this.state = ReactiveDict( ) , but no success.

You never defined the state as a member of the instance. I had success with the following pattern

Template.Agenda.onRendered(function(){
  const instance = this;
  instance.state = new ReactiveDict();
  .
  .
  .
  $('#calendar').fullCalendar({
      /* a lot of configurations */
      eventClick: function(event) {
          instance.state.set({
              'id':event._id,
          });
          $('#eventmodal').modal('open');
      },
  });
});
1 Like

Awesome! I think an example just like this would be nice to have on the ReactiveDict documentation. Would help beginners like me.