與Ember.js

Question

這裏引導模式3模式是什麼，我想立足於（基於引導〜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> 

，這是我的jsfiddle與引導3：

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

誰能幫我找到我的小提琴問題？

Answer 1

你的問題是與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"> 

Becaues創建視圖時，結果將是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/

Answer 2

如果您正在使用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）