模態在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}}