Wrong data context in modal - meteor

Question

I can't figure out why this Bootstrap modal receives the wrong data context.
Let's begin with my templates (excluding the modal for now). The first iterates through a list of items fetched by itemsList:
<template name="CategoryItems">
<ul>
{{#each itemsList}}
{{> Item}}
{{/each}}
</ul>
</template>
itemsList looks like this, by the way:
itemsList: function() {
return Items.find()
}
The inside template, Item, details just how these items should appear:
<template name="Item">
<li>
<span class="item-name">{{name}} </span>
<a href="#" class="anchor-item-edit" data-toggle="modal" data-target="#edit-item-modal">
<span class="fa fa-2x fa-pencil-square-o"></span> //Font Awesome icon
</a>
{{> EditItemModal}}
</li>
</template>
So basically it displays the name of the item fetched from the database and then provides an edit button that opens the edit-item-modal. The modal itself is placed here (it's hidden by default) so that it gets the correct data context, however that doesn't seem to work.
When the edit link is clicked, the modal opens. Excluding a lot of markup, it looks like this:
<template name="EditItemModal">
<div class="modal fade" id="edit-item-modal" tabindex="-1" role="dialog" aria-hidden="true">
<h4>{{name}}</h4>
</div>
</template>
The name, however, always displays the name of my first item in the list, ignoring what I actually clicked on.
A very strange thing, though, is that if I include a helper check inside the modal like so,
<template name="EditItemModal">
{{checkDataContext}}
//the other stuff
</template>
and makes the helper look like this,
Template.EditItemModal.helpers({
checkDataContext: function() {
console.dir(this)
}
})
then all the correct items are spit out in the console as soon as I load the page.
What's going on here?

Answer 1

Your modal markup only defines one shared ID between all of your modals, which is not valid HTML and ends up being the root of your problem.
When you click on any button triggering the modal, it's going to show up the first modal it finds in your markup, which always happens to be the first one.
You need to decorate your modals IDs with your items IDs (since they come from a Mongo.Collection), your markup will no longer contain duplicated modal IDs and your code will run as expected.
<template name="EditItemModal">
<div class="modal fade" id="edit-item-modal-{{_id}}" tabindex="-1" role="dialog" aria-hidden="true">
<h4>{{name}}</h4>
</div>
</template>
<template name="Item">
<li>
<span class="item-name">{{name}} </span>
<a href="#" class="anchor-item-edit" data-toggle="modal" data-target="#edit-item-modal-{{_id}}">
<span class="fa fa-2x fa-pencil-square-o"></span> //Font Awesome icon
</a>
{{> EditItemModal}}
</li>
</template>