How do I correctly place nested #each Spacebars Iterators when using Meteor?
I have these nested iterators:
<ul class='detailViewList'>
{{#each detailsCollection}}
<li id={{_id}} class='detailViewEntry {{checkboxStatus}}'>
<input type="checkbox" class='detailCheckbox'>
<b>{{detail}}</b>
<div class="btn btn-xs btn-danger" id="delete-detail">x</div>
<form class='form-inline'>
<div class="form-group">
<input type="text" id='{{_id}}' name='message' class="form-control" placeholder="message">
</div>
</form>
{{#each messagesCollection}}
{{#if isMessageForThisDetail}}
{{message.message}}
{{/if}}
{{/each}}
</li>
{{/each}}
</ul>
And I understand that I can access the parent attributes from the child template via the handlebars path, from the docs :
{{./name}} or {{this / name}} or {{this.name}}
But I need my helper isMessageForThisDetail
to compare the attribute of the current iteration messageCollection
with the current iteration parent detailsCollection
. My helper for this looks like this:
isMessageForThisDetail: function(){
var message = messagesCollection.findOne({detailId: this._id});
if(message != undefined){
return this._id == message._id;
} else {
console.log('there is no message for this detail');
}
}
But the context this._id
is the message, not the _id
detail that I want to compare to the message field.
source to share
You should be able to access the parent data like this:
isMessageForThisDetail: function() {
var detailId = Template.parentData(1)._id;
var message = messagesCollection.findOne({detailId: detailId});
if(message)
return this._id === message._id;
else
console.log('there is no message for this detail');
}
source to share
I got stuck this way and found that the Template.parentData () method is currently not working in event handlers (see https://github.com/meteor/meteor/issues/5491 ). A user Lirbank posted this simplest solution:
Pass data from external context to html element in internal context in the same template:
{{#each companies}}
{{#each employees}}
<a href="" companyId="{{../id}}">Do something</a>
{{/each}}
{{/each}}
Now the company ID can be retrieved from an event handler with something like
$(event.currentTarget).attr('companyId')
source to share
(not verified)
Option 1:
Template
{{#each companies}}
{{#each employee this}}
<a href="">{{this}}</a>
{{/each}}
{{/each}}
Assistant
var templateHelpers = {
companies: function () {
// array of companies
return arrayOfCompanies;
},
employee: function (company) {
var companyId = company.id;
// do something with companyId
}
}
Option 2:
Template
{{#each companies}}
{{#each employee this.id}}
<a href="">{{this}}</a>
{{/each}}
{{/each}}
Assistant
var templateHelpers = {
companies: function () {
// array of companies
return arrayOfCompanies;
},
employee: function (companyId) {
// do something with companyId
}
}
source to share