Programmatically (not declaratively) render Meteor template

Question

I'm trying to customize events added to FullCalendar, using eventRender. I'm aware that I can directly return HTML from my eventRender method, but I would prefer to programmatically merge event data with a predefined Meteor template (with associated events).

Previously I could have used Meteor.render() but that functionality is no longer available. I'm familiar with Template.dynamic, but that appear to only be available declaratively, and most of the questions I've seen here are quite old, so refer to deprecated functionality.

Here's what I would like to do:

Calendar - event population & rendering:

Template.dashboard.rendered = function(){
  $('#calendar').fullCalendar({
    events: function(start, end, timezone, callback) {
      callback(Events.find().fetch()); 
    },

    eventRender: function(event, element) {
      // PROGRAMMATICALLY RENDER TEMPLATE
      // The following does not work - no data is attached 
      return Template.calendarEvent.renderFunction(event);
    }
  });
};

Event template HTML

<template name="calendarEvent">
  {{title}} 
  <!-- full layout for rendering event here -->
</template>

Event template JS

Template.calendarEvent.events({
  // define template event handlers
});

d_inevitable d_inevitable · Accepted Answer · 2014-11-23T16:04:22

That function was not removed, it was renamed and quite a while ago it also changed behaviour (when spark was replaced by blaze).

What you are looking for is Blaze.renderWithData.

Note that it returns a Blaze.View and not a DOM object.

To make it a dom object you could provide it as a parent:

var renderedCalendarEvent = document.createElement("div");

Blaze.renderWithData(Template.calenderEvent, event, renderedCalendarEvent);

The DOM element renderedCalendarEvent will react to any reactive sources the template uses.

If you need HTML you can use Blaze.toHTMLWithData, but that html will remain static.

Blaze.toHTMLWithData(Template.calenderEvent, event);

Programmatically (not declaratively) render Meteor template

1 Answers