Ember model attributes in modals - ember.js

Question

This is my problem:
What I'm trying to do is when I click on a model's name, I get a modal window that shows all it's attributes, like so:
However, when I click on another one, it doesn't work, no modals show up, like so:
This is my index.hbs:
<div class="row" style="text-align:center;">
{{#each model as |event|}}
<div class="col-xs-3 col-md-3">
<div class="centerBlock">
</div>
<button type="button" class="btn btn-link" data-toggle="modal" data-target="#{{event.name}}">{{event.name}}</button>
</div>
<!-- Modal -->
<div class="modal fade" id="{{event.name}}" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">{{event.name}}</h4>
</div>
<div class="modal-body">
<p>{{event.location}}</p>
<p>{{event.roomNumber}}</p>
<p>{{event.eventDay}}</p>
<p>{{event.eventTime}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End Modal-->
{{/each}}
</div>
And this is my index.js:
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return this.store.findAll('event');
}
});
I suppose that I'm doing my {{#each}} wrong, but I've spent about an hour on it and I can't figure it out.
Sorry this is such a dumb problem, and thanks for any direction!

Answer 1

The problem is your event name. You have spaces in Yoga Drop-In and later you use that as modal id attribute. You can't target model by id with spaces. You have to use another property as modal target. For example you could take model name and remove all spaces from that, or replace with dashes. It will work after you do so.