Passing variable from parent template to child template in meteor - templates

Question

I have a parent template with several nested child templates inside it. And inside each nested template I have a string generated from an array. A simplified model of my html:
<template name="parent">
<a class="logId">Console log parent Id</a>
{{> firstChild}}
{{> secondChild}}
</template>
In addition my child templates have an each loop like this:
<template name="firstChild">
{{#each users}}
{{this}}
{{> adminSelectUser}}
{{/each}}
</template>
<template name="adminSelectUser">
<a class="selectUser">SelectUser</a>
</template>
In my js code:
Template.parent.events({
'click .logId': function () {
var eventId = this._id._str;
console.log(eventId);
});
Template.adminSelectUser.events({
'click .selectUser': function(template){
var userString = this.valueOf();
console.log(userString);
}
});
To this point I get it to work and in both of my templates I can find the id of my parent and the string of my user as I want it to do. But then I would also want to use both my variables eventId and userString in the same method call, called from the template adminSelectUser. Is there any way that I can pass the eventId found in the parent template down to the adminSelectUser template so that I can work with both variables with the same method call.
This is what I aim to do with my server methods:
Meteor.methods({
removeUser: function(){
Meets.update({_id: eventId}, {$pull : {usersApplied: userString}});
}
});
I want my server method to recognize the eventId and the userString and get them to work together when I call the method later on in the adminSelectUser template.
Hope this is clear enough!

Answer 1

There are several ways to go about this.
Using Template.parentData
You can traverse the template hierarchy from within template JS using Template.parentData(n) where n is the number of levels up in the hierarchy you want to go. So specifically for your example:
Template.adminSelectUser.events({
'click .selectUser': function(template){
var user = this;
var parentId = Template.parentData(2)._id;
myRemoveMethod(parentId, user);
}
});
However, this means that the inner template relies on always being rendered within the same hierarchy, which kinda has a bad smell. If the templates are tightly coupled and this is the case (which is likely) then using parentData is probably fine. However, if a template has data dependencies it does make sense to pass the appropriate data explicitly (see #2).
Pass the data into the templates explicitly.
<template name="firstChild">
{{#each users}}
{{this}}
{{> adminSelectUser user=this parent=..}}
{{/each}}
</template>
In your example, when you pass no argument to a template render, the data context is assumed to be this. Here instead we pass a user and a parent into the template (Note the use of .. here to reference this outside of the users loop). Your handler would then look more like:
Template.adminSelectUser.events({
'click .selectUser': function() {
var data = Template.currentData();
myRemoveMethod(data.parent._id, data.user);
}
});