Meteor Data Context of Template Event Handler is null - templates

Question

I am trying to access the data context of my Template from an event handlers, but it is null.
Here is my Template:
<template name="calendar">
<div class="calendar">
{{#with calendar}}
<h1>{{name}}</h1>
{{#each days}}
<div class="calendar-day">
{{this.date.getDate}}
<!-- I want to access the data context when this div is pressed -->
</div>
{{/each}}
{{/with}}
</div>
</template>
Here is where I want to get the data context.
Template.calendar.events({
'click .calendar-day': function(e, template) {
console.log(Template.currentData()); // null
console.log(Template.parentData()); // null
}
});
Update: I am able to access the current data context through this, but I also want to access the data context of the parent, namely, the data context of calendar

Answer 1

OK. Let me make it clear;
Template.calendar.events({
'click .calendar-day': function(e, template) {
//FYI: template === Template.instance()
//will give you your data context
console.log(this);
//will give you your data context
console.log(template.data);
//will give you your data context
console.log(Template.currentData());
//will give you your data context also
console.log(Template.parentData(0));
//will give you your parent template data context. Equivalent of Template.parentData()
console.log(Template.parentData(1));
}
});
If it turns out that your parentData is null then IT IS null, double check it.

Answer 2

you can get the context from this.
Template.calendar.events({
'click .calendar-day': function(e, template) {
console.log(this);
}
});

Answer 3

It's possible there is a bug in Blaze - github has 3 or 4 open issues which relate to this, so I haven't raised a specific issue myself.
The issue is with having multiple data contexts within a single template; this fix is to split the contexts by splitting the template:
<template name="calendar">
<div class="calendar">
{{#with calendar}}
<h1>{{name}}</h1>
{{#each days}}
{{> calendarDay}}
{{/each}}
{{/with}}
</div>
</template>
<template name="calendarDay">
<div class="calendar-day">
{{this.date.getDate}}
<!-- I want to access the data context when this div is pressed -->
</div>
</template>
And then just move your event to the new template:
Template.calendarDay.events({
'click .calendar-day': function(e, template) {
console.log(Template.currentData()); // no longer null!
console.log(Template.parentData()); // no longer null!
}
});
Within this event, you can now get to the following data contexts:
console.log(this); // the {{#each days}} context
console.log(template.data); // the {{#each days}} context
console.log(Template.currentData()); // the {{#each days}} context
console.log(Template.parentData(0)); // the {{#each days}} context
console.log(Template.parentData(1)); // the {{#with calendar}} context
By using this pattern as described I've managed to solve an identical problem to the OP, but only after 2-3 hours of investigation!