Programmatically (not declaratively) render the Meteor template
I am trying to set up events added to FullCalendar using eventRender
. I know that I can directly return HTML from my method eventRender
, but I would prefer to programmatically combine the event data with the predefined Meteor template (with associated events).
I could use Meteor.render()
it before, but this feature is no longer available. I'm familiar with Template.dynamic
, but seems to be only available declaratively and most of the questions I've seen here are pretty old, so refer to deprecated functions.
Here's what I would like to do:
Calendar - collection of events and 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);
}
});
};
HTML Event Template
<template name="calendarEvent">
{{title}}
<!-- full layout for rendering event here -->
</template>
JS event template
Template.calendarEvent.events({
// define template event handlers
});
source to share
This feature was not removed, it was renamed and quite a long time ago it also changed the behavior (when the spark was replaced by a flame).
What you are looking for is Blaze.renderWithData .
Note that it returns an object Blaze.View
, 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 whatever reactive sources the template uses.
If you need HTML you can use Blaze.toHTMLWithData but this html will remain static.
Blaze.toHTMLWithData(Template.calenderEvent, event);
source to share