Question

我正在开发一个Ember.js应用程序，我计划大量使用Modal Dialogs。我一直在关注本指南：http://emberjs.com/guides/cookbook/user_interface_and_interaction/using_modal_dialogs/

我使用以下库:(从控制台输出）

＆＃34; DEBUG：-------------------------------＆＃34;

＆＃34; DEBUG：Ember：1.7.0＆＃34;

＆＃34; DEBUG：Ember数据：1.0.0-beta.11＆＃34;

＆＃34; DEBUG：Handlebars：1.3.0＆＃34;

＆＃34; DEBUG：jQuery：1.11.1＆＃34;

＆＃34; DEBUG：-------------------------------＆＃34;

我的问题是，当我按下一个应打开模态对话框的按钮时，我在屏幕上看不到任何内容。我可以在检查器中找到呈现的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>)"

从检查员复制，显示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;
}

Ember.js模态对话框呈现无形

1 个答案: