Question

以下是我尝试编写代码的基础（基于Bootstrap~2）：

<script type="text/x-handlebars" data-template-name="application">
    <h1>Boostrap modal sample</h1>    
    <a {{action showModal}} href="#">Open modal</a>
</script>

<script type="text/x-handlebars" data-template-name="modal">
<!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">{{view.title}}</h4>
        </div>
        <div class="modal-body">
          <p>{{view.content}}</p>
        </div>
        <div class="modal-footer">
          <button type="button" {{action close target="view"}} class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
</script>

这是我与Bootstrap 3的混蛋：

http://jsfiddle.net/5R8U9/9/

有人能帮助我找到问题吗？

Answer 1

如果您使用的是Bootstrap 3和Ember 1.0，则应在路线中替换

App.ModalView.create({ title: "My title", content: "My content" }).append();

带

this.container.lookup('view:modal').append();

以避免defaultContainer弃用（https://github.com/emberjs/ember.js/issues/2597）

Answer 2

你的问题在于css：

在ModelView classNames: ["modal", "fade", "hide"], hide。您必须删除modal类。

在模板中，您还有另一个问题。您再次使用fade和ModelView。由于您已在<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">中指定了它，因此这是不必要的。

模板

modal

当创建视图时，结果将是2 <div class="modal fade ember-view" > <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">个类，布局将被破坏：

{{1}}

最终结果是http://jsfiddle.net/marciojunior/rrXc2/

带有Ember.js的Bootstrap 3模态模式

2 个答案: