Semantic UI Meteor modal initalization-open source projects Semantic-Org/Semantic-UI

I’m running Meteor with Semantic UI as a framework .

I’ve got my main page on which I load X detail cards who all come from the same data source. All the detail cards have buttons, for example trash to remove the card.

I’m confirming actions on the buttons through modals.

I’ve got all of my modals in a separate template called modals.

From my main page I load my modals:

{{>modals}}

Inside my modals template I’ve got:

      
          {{#with data}}
        
          //HEADER
        
        
              // DATA USAGE IN TEMPLATE
              {{city}}
        
      

Above example is commented with // and just a fraction of the real thing.

The problem I’m running into is that I’m using the buttons on said card to call for the modal. The button eventhandler looks like:

Template.availablCard.events({
    'click #checkmark': function () {
        Session.set('data', this);
        $('#takeModal').modal('show');
    }
....

and the modal template has a helper:

Template.modals.helpers({
    data: function () {
        return Session.get('data');
    }});

The problem I am facing is that the modals never function properly the first time because a click hasn’t been registered yet and Session.data hasn’t been set yet.

Is there a way to initialize the modals so they get loaded into the DOM, but still give them a data context?

ps. I’ve chosen this approach so I don’t have to give every card it’s own modal.