Modal not working in Ember.js app

Question

I'm developing my portfolio website and I'm having problems getting a modal to work. I'm first keeping it simple and just coding this feature as if this was plain html5.

This is the code:

<div class="main-information">
    <div class="main">
        <img src="images/profile.JPG"/>
        <div class="info">
          <h2 class="text-primary">FRANCISCO GOITIA</h2>
          <h3 class="text-primary">SOFTWARE DEVELOPER</h3>
        </div>
    </div>
    <div class="links">
        <ul class="list-inline">
            <li>
                <a class="btn" href="#" data-toggle="modal" data-target="#heroku">Heroku</a>
            </li>
            <li>
                <a class="btn" href="https://github.com/frangoitia" target="_blank">GitHub</a>
            </li>
            <li>
                <a class="btn">Curriculum Vitae</a>
            </li>
        </ul>
    </div>
</div>


<div class="modal fade" id="heroku" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id=""></h4>
      </div>
      <div class="modal-body">
        <p>
          The following are some applications I have built and deployed to Heroku. The code for this projects, as well as the code for many more projects and massive open online courses I've taken, can be access in my Github repo:
        </p>
        <ul class="list-unstyled">
          {{#each model as |application|}}
            {{heroku-app application=application}}
          {{/each}}
        </ul>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary"></button>
      </div>
    </div>
  </div>
</div>

Bootstrap is working successfully otherwise.

Thanks.

Answer 1

Edit:

I totally misread what you were doing. Your code is correct, but it is likely that you don't have the javascript files for Bootstrap included (or jQuery)

---

So all you are missing is a button that will toggle the modal like so:

<button type="button" class="btn" data-toggle="modal" data-target="#heroku">
  Toggle Modal
</button>

It is the second example in the docs found here

Additionally, here is a JSBIN

Answer 2

Actually the html you posted is correct, and opens a modal:

http://jsfiddle.net/0s397z3p/

So i suppose that the problem is actually in the wrong use of handlebars #each helper:

{{#each application in model}}
  {{heroku-app application=application}}
{{/each}}