Ember.js 模态对话框不可见地呈现

Question

我正在开发一个 Ember.js 应用程序，我计划在其中大量使用模态对话框。 我一直在关注这个指南：http://emberjs.com/guides/cookbook/user_interface_and_interaction/using_modal_dialogs/

我正在使用以下库：（控制台输出）

“调试：-------------------”

“调试：Ember：1.7.0”

“调试：Ember 数据：1.0.0-beta.11”

“调试：车把：1.3.0”

“调试：jQuery : 1.11.1”

“调试：-------------------”

我的问题是，当我按下一个应该打开模式对话框的按钮时，我在屏幕上什么也看不到。我可以在检查器中找到呈现的 HTML，但它不会出现在用户可以看到的任何地方。因为我不太确定这个 HTML 应该如何出现，因为这在任何地方都没有解释，所以我不知道出了什么问题。

HTML 似乎已正确呈现。我只希望它会出现在我的屏幕上！ :)

车把相关代码：

<div id="modal">
     {{outlet modal}}
</div>

控制器（路由）：

App.UsersRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('user');
  },
  actions: {
    openModal: function(modalName, model) {
      console.log("usersroute.actions.openmodal("+modalName+", "+model+")")
      this.controllerFor(modalName).set("model", model);
      return this.render(modalName, {
        into: "application",
        outlet: "modal"
      });
    },
    closeModal: function() {
      return this.disconnectOutlet({
        outlet: "modal",
        parentView: "application"
      });
    }
  }
});

控制台按预期记录：

"usersroute.actions.openmodal(userModal, <App.User:ember578:4>)"

从inspector复制，显示id为#modal的div：（抱歉缩进混乱）

<div id="modal">
        <script id="metamorph-15-start" type="text/x-placeholder"></script><script id="metamorph-16-start" type="text/x-placeholder"></script>
<div id="ember603" class="ember-view">
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">


<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
    <h4 class="modal-title" id="myModalLabel">User: <script id="metamorph-17-start" type="text/x-placeholder"></script>andreas@kodeworks.no<script id="metamorph-17-end" type="text/x-placeholder"></script></h4>
</div>
<div class="modal-body">
    <form role="form">
        <div class="form-group">
            <script id="metamorph-18-start" type="text/x-placeholder"></script>
                <label for="name">Name</label>
                <input id="ember612" class="ember-view ember-text-field form-control" required="true" value="Andreas L Johnsen" type="text">
                <label for="position">Position</label>
                <input id="ember613" class="ember-view ember-text-field form-control" required="true" type="text">
                <label for="email">E-mail</label>
                <input id="ember614" class="ember-view ember-text-field form-control" required="true" value="andreas@kodeworks.no" type="text">
                <label for="name">Name</label>
                <input id="ember615" class="ember-view ember-text-field form-control" required="true" value="Andreas L Johnsen" type="text">
            <script id="metamorph-18-end" type="text/x-placeholder"></script>
        </div>
    </form>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
    <script id="metamorph-19-start" type="text/x-placeholder"></script>
        <button type="button" id="delete" class="btn btn-danger" data-dismiss="modal" data-ember-action="617">Delete user</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" data-ember-action="618">Save changes</button>
    <script id="metamorph-19-end" type="text/x-placeholder"></script>
</div>

        </div>
    </div>
</div>
</div>
<script id="metamorph-16-end" type="text/x-placeholder"></script><script id="metamorph-15-end" type="text/x-placeholder"></script>
    </div>

但正如我所说，它实际上并没有在屏幕上显示任何内容。而且我不确定为什么会这样，我只是按照文档中给出的示例进行操作。那里似乎没有提到如何让东西出现在屏幕上。

如果有人能解释一下出了什么问题，以及我该如何解决它，我们将不胜感激。

Answer 1

您是否从 JSBin 示例中获得了相关的 CSS？如果 HTML 正在呈现但您看不到它，可能是因为您没有设置模态窗口的样式：

.overlay {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.2);
}

.modal {
  position: relative;
  margin: 10px auto;
  width: 300px;
  background-color: #fff;
  padding: 1em;
}