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

Question

这是我试图建立代码的基础（基于 Bootstrap ~2）：

http://jsfiddle.net/marciojunior/tK3rX/

<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 的 jsfiddle：

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">

因为创建视图时，结果将是 2 个modal 类，并且布局将被破坏：

<div class="modal fade ember-view" >
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

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