模态在Ember.js应用程序中不起作用

Question

我正在开发自己的投资组合网站，但在获取工作模式方面遇到问题。 首先，我将其保持简单，并仅将此功能编码为纯HTML5。

这是代码：

<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>

否则，引导程序将成功运行。

谢谢。

Answer 1

编辑：

我完全误读了你在做什么。 您的代码是正确的，但是很可能您没有包含Bootstrap的javascript文件（或jQuery）

---

因此，您所缺少的只是一个将像下面这样切换模式的按钮：

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

这是此处找到的文档中的第二个示例

另外，这是一个JSBIN

Answer 2

实际上，您发布的html是正确的，并打开了一个模式：

http://jsfiddle.net/0s397z3p/

所以我想问题出在实际上是错误地使用了把手#each helper：

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