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

【问题标题】：Modal not working in Ember.js app模态在 Ember.js 应用程序中不起作用
【发布时间】：2015-06-11 01:41:01
【问题描述】：

我正在开发我的投资组合网站，但在让模态运行时遇到问题。我首先保持简单，只是将这个功能编码为普通的 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>

Bootstrap 正常工作，否则。

谢谢。

【问题讨论】：

你能确认你已经为 Bootstrap 加载了 JS 吗？您可以尝试在检查器控制台中查找对象，然后查看是否会自动完成任何 BS JS 方法。例如，window.$modal = $('.modal')，然后是 $modal.modal('show')。如果它已加载，键入$modal.mo 应在自动完成中显示modal。此外，如果 JS 存在，上述代码将以编程方式打开您的模式。
这可能正是您所说的 Bootstrap 运行成功，但只是想确认一下。
如果模态打开了，但是each区域没有内容，那么Ember中发生了一些奇怪的事情。

标签： javascript twitter-bootstrap ember.js modal-dialog

【解决方案1】：

编辑：

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

所以你所缺少的只是一个可以像这样切换模式的按钮：

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

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

另外，这里是JSBIN

【讨论】：

【解决方案2】：

其实你贴的html是正确的，打开了一个modal：

http://jsfiddle.net/0s397z3p/

所以我认为问题实际上出在错误使用车把#eachhelper：

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

【讨论】：

每个循环的语法最近发生了变化，提问者正在使用正确的新的。